【静的サイト制作】古いWebサイトをカスタマイズ【HTML部品化・レスポンシブ対応】

　過去につくったホームページを放置したままにしている方は少なからず、いらっやると思います。2000年代初頭くらいまでは、PCのブラウザで見ることを前提としてつくればよかったのですが、現在は、様々なデバイスから閲覧されることを意識する必要があります。また、見た目が古臭いホームページは、それだけで敬遠されてしまう可能性が高くなります。

　自分が過去につくったホームページ(以降、Webサイトと呼びます)が、まさにそうであったため、このままではいけないという思いから、カスタマイズに踏み切ることにしました。

　この記事では、静的な古いWebサイトを現代風の外観、機能にカスタマイズしていく過程、手法について説明します。

 

目次

1. 古いWebサイト
2. 現代風Webサイトへ向けた改造ポイント
3. 複数ページで使える共通機能の部品化
4. 各コンテンツに誘導するリンクの刷新
5. レスポンシブ対応
6. まとめ

1. 古いWebサイト

　図1-1は、2000年代初頭に作成した自サイト(静的サイト)のインデックスページです。当初からは、サイト名やリンク先などの変更した点もありますが、サイトロゴがあって、コンテンツ一覧、リンク先、ゲストブックへのリンクがあるという、何とも単純な外観です。

　ごく最近まで、この簡素なインデックスページのままサイトを公開していて、つくった当初から大きく変更することはありませんでした。

　図1-1 カスタマイズ前のインデックスページ

 

　なお、機能を部品化することについては、一部テーブルのスタイルをスタイルシートに定義して、共通のテーブルスタイルを複数のページで使うということはありましたが、その程度でしかありませんでした。

 

 

　

・複数ページで使える共通機能の部品化

　変更前は、１つのページの構成は一部のテーブルスタイルを除き、複数ページで共通に使える部品のようなものは無く、以下の図2-1のメインコンテンツ部分に、そのページの全機能を詰め込むというやり方でした。
　

 

　そのため、複数のページで共通に使える機能があったとしても、その機能を丸ごとメインコンテンツ部分に詰め込んでいました。新規にページをつくる際は流用元のページをコピーしてつくりますので、追加でコーディングすることは、ほぼ無かったのですが、機能の一部を変更する際は、対象の全ページを同じように変更する必要があり、これがけっこうな手間となっていました。

　上記の問題点解消に向けて、今回のカスタマイズにより、共通機能の部品化を実現させていきます。

 

 

　

・レスポンシブ対応の徹底

　自サイトを作成した2000年代初頭は、スマホは存在しておらず、PCで見ることだけを考えておけばよかった時代です。

　ところが、現代ではスマホによるサイト閲覧の頻度がPCを上回るほどになり、閲覧する端末により、ページスタイルを柔軟に変更させていくことが必須となっています。これをサボると、スマホで閲覧したときの表示が崩れてしまい、スマホから閲覧してもらえなくなるのは確実です。

 

　実は、変更前にも、ある程度のレスポンシブ対応はおこなっており、スマホで閲覧しても表示が大きく崩れるようなことはなくなりました。ただし、あくまで最低限の措置でしたので、今回のカスタマイズにより、スマホ閲覧時の使い勝手を更に向上させていくつもりです。

 

 

　カスタマイズ後は、図3-1に示すページ構成とし、複数ページで共通に使えるヘッダー、サイドバー、フッターについて部品化します。ページごとに内容が変わるのは、メインコンテンツ部分のみとなり、ここにページ固有の内容を埋め込みます。

　ほぼ、ブログページと同じようになると考えていただけたらいいと思います。今後、更なるカスタマイズを加えるとしても、まずはこの基本のスタイルを実現させることが先決だと思っています。

 

 

　

　ヘッダメニューを実装する具体的な方法については、以下の記事を参照してください。

【静的サイト制作】Webサイトのヘッダーメニューをつくる【メニューバー実装・ PC閲覧編】

PC閲覧用のWebサイトにヘッダーメニュー(メニューバー)を実装する方法について解説します、

hirokami1024.com

2024.09.08

図3-4 フッターの表示