昔風の静的なサイトをカスタマイズする【HTML部品化とレスポンシブル対応】

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

1. 古いウェブサイト

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

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

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

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

2. 現代風のサイトへ向けた改造ポイント

　現代風サイトの外観や、機能実現に向けたカスタマイズのポイントとして、以下の3つを考えました。

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

・各コンテンツに誘導するリンクの刷新

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

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

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

図2-1 変更前のページ構成

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

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

・各コンテンツに誘導するリンクの刷新

　変更前は、図1-1を見ていただくとおわかりのように、各コンテンツの名称とリンクが貼ってあるだけの何とも味気なく芸のない外観です。

　これでは、コンテンツの中身を見てみようという気が失せるのも頷ける気がします。よって、今回のカスタマイズにより、せっかく自分のサイトに来てくださった方に、多少は興味を持っていただけるような外観へと変貌させていきます。

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

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

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

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

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

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

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

図3-1 変更後のページ構成　

　HTMLの部品化についての具体的な方法については、以下の記事を参照してください。

古いウェブサイトをカスタマイズ【HTML部品化と適用の仕方】

記事の内容：・HTMLの部品化とはどういうことなのか？・どのような利点があるのか？・具体的にどうすればいいのか？

　部品化したHTMLから「サイトのひな型」をつくる手順については、以下の記事を参照してください。

部品化したヘッダー・サイドバー・フッターを使って【サイトページのひな型をつくる】

サイトページのひな型を作ってしまえば、コンテンツや記事を追加する際の手間が大幅に削減できるはず。部品化したヘッダー・サイドバー・フッターを適切に配置して、ページひな型をつくることが目的です。

部品1(ヘッダー)

　ヘッダー部分には、以下の機能を実装します。

・ヘッダー画像表示

・サイトロゴ表示

・ヘッダーメニューの付加

図3-2 ヘッダーの表示
　

　ヘッダー画像は画面の横幅一杯に表示させて、画像に重ねてサイトロゴを表示させます。サイトロゴには、TOPページへのリンクを貼っています。

　ヘッダ画像の下には、ヘッダーメニューを付加します。ヘッダーメニューの項目は、とりあえず以下の5つとしていますが、今後、変更や追加することもあると思っています。もちろん「お問い合わせ」には、問い合わせの内容を自分のメールアドレス宛や、相手先のメールアドレス宛へ、メール送信する機能を実装します。

・TOP
・サイトマップ
・ブログサイトへのリンク
・プライバシーポリシー
・お問い合わせ

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

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

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

　また、お問い合わせフォームを実装する具体的な方法については、以下の記事を参照してください。

静的サイトにお問い合わせフォームを実装する【メール送信機能】

サイトにお問い合わせフォームを実装する方法と、実際にお問い合わせメールを送信する機能について説明します。

部品2(サイドバー)

　各ページ固有のメインコンテンツ部分の右側に、サイドバーを配置します。

　図3-3 サイドバーの表示

　サイドバーに表示する項目は、とりあえず以下の4つとしていますが、これについても今後、変更や追加することもあると思っています。なお、サイドバーは広告あり版と広告なし版の2種類を用意するようにしました。広告表示がふさわしくないページ(プライバシーポリシー、お問い合わせなど)には、広告なし版のサイドバーが表示されます。

・サイト内検索
・よく見ていただいているコンテンツ
・リンク
・広告

部品3(フッター)

　ページの最下部に配置するフッターには、コピーライトを表示させる機能のみを実装します。これについても今後、変更や追加することもあると思っています。

図3-4 フッターの表示

4. 各コンテンツに誘導するリンクの刷新

　各コンテンツに誘導するリンクについてですが、コンテンツタイトルだけではなく、コンテンツ画像と簡易な説明を付けるようにします。

　はっきり言ってしまえば、ブログカード風のコンテンツ紹介というイメージで、これもブログページと似たような感じになってしまいますが、まずはこのスタイルで実現させます。

図4-1 ブログカード風のコンテンツ紹介イメージ