古いウェブサイトを現代風デザインにカスタマイズ【HTML部品化とスマホ対応】

2020.02.29
 

1. 古いウェブサイト

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

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


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

 

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

　現代風サイトの外観や、機能実現に向けたカスタマイズのポイントとして、以下の3つを考えました。
 
・複数ページで使える共通機能の部品化

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

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

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

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

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

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

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

 
　

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

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

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

 
　

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

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

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

 

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

 
 

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

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

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

図3-1 変更後のページ構成　
 
 
 
 
・ヘッダー画像表示
・サイトロゴ表示
・ヘッダーメニューの付加

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

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

 
・TOP
・サイトマップ
・ブログサイトへのリンク
・プライバシーポリシー
・お問い合わせ
　
 
　また、お問い合わせフォームを実装する具体的な方法については、以下の記事を参照してください。

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

部品2(サイドバー)

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


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

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

部品3(フッター)

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

 

図3-4 フッターの表示

 

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

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

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

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

5. レスポンシブ対応

　レスポンシブ対応についてですが、各ページ固有の内容については、既に対応済ですので、今回のカスタマイズで部品化する機能について説明します。

　レスポンシブなサイトづくりの具体的な方法などについては、以下の記事をご覧ください。

PCからでもスマホからでも、どちらでもOK！【レスポンシブなサイトをつくる】
レスポンシブなサイトとは？ PCから見てもスマホから見ても文字や外観が崩れないようにするレスポンシブなサイトづくりについての説明です。
hirokami1024.com
2020.03.08

部品1(ヘッダー)

　スマホで閲覧する場合、ヘッダは図5-1の左側画像のように表示されます。PCで閲覧時とは以下のような外観上の違いがあります。

・ヘッダー画像、サイトロゴを縮小表示
・ヘッダーメニューは表示せず、ヘッダ画像の左上にメニューアイコン(ハンバーガーメニュー)を表示
・サイト内検索(Google カスタム検索)を設置

 
　メニューアイコンをタップすると、図5-1の右側画像のようにメニュー項目が表示されます。
 

図5-1 スマホ閲覧時のヘッダー表示

　

　ハンバーガーメニューを実装する方法などについては、以下の記事をご覧ください。
静的サイトのヘッダーメニューをつくる【ハンバーガーメニューの実装 ～ スマホ閲覧編】
スマホ閲覧用の静的サイトにハンバーガーメニューを実装する方法について解説します。
hirokami1024.com
2020.03.15

部品2(サイドバー)

　スマホ閲覧時は、サイドバーを表示しないようにします。

 
　

部品3(フッター)

　スマホ閲覧時のフッター(コピーライト)表示は、図5-2のようになります。PC閲覧時と同じように、最下部中央にコピーライトが表示されます。

 

図5-2 スマホ閲覧時のフッター(コピーライト)表示
 
 

6. まとめ

　今回の記事では、昔風の静的サイトに対して行ったカスタマイズの概要について説明させていただきました。ひととおり、当初考えていた分のカスタマイズは終了しており、今後は細かいカスタマイズを継続していくつもりです。

　一旦、カスタマイズを終えた自サイトは以下よりご覧いただけますので、よかったら覗いてみてください。

main.hirokami1024.com
趣味のこと中心に，思いつくまま運営しているサイトです。
main.hirokami1024.com
 
　今回のカスタマイズは、HTML、CSS、Java Script、PHPなどのソースコードを使って実現していますが、ゼロからソースコードを組み上げるようなことはしていません。これらソースコードのほぼすべてをネット上から拾ってきて、自分のサイトに適合するよう部分的に変更を加えて実現させています。

　次回の記事以降では、それぞれのカスタマイズ項目について、ソースコードを混じえた詳細な説明を加えて、発信したいと考えています。

 

おわり

 

コメント

タイトルとURLをコピーしました