ホームページの話

ここでは、このツーレポホームページの作り方に関する話を少しだけ書いてみます。ここに書いていることは極々基本的な内容ですが、ホームページを作成する上での重要なコツです。

最近は、かなり見応えのあるツーレポを作られているライダーさんが増えてきました。私も負けずにたくさんツーレポを書いていきたいと思います。

ホームページを開設するには、まずレンタルサーバを借りましょう。

私は、さくらインターネット の「レンタルサーバライト」コースを使用しています。このコースの内容は左の通りです。何と言っても、月額125円という料金が魅力的です。

容量が 1GBと他のレンタルサーバに比べると若干少ないですが、一般的なツーレポサイトを作るならこれで十分に足ります。

ちなみにこのホームページは2012年 2月現在で400MBほど使用しています。

【追記】5GBに増量されました。

ツーリング中に撮影した写真を加工しましょう。

画像編集ソフトは何でも構いません。私は、Photoshopを使っていますが、ツーレポの写真を加工するにはややオーバスペックの製品です。もっと安いツールでも十分です。

私は、主にトリミング、縮小、明度・コントラスト補正を行っています。このホームページのツーレポで掲載している写真はほとんど400×300に縮小しています。

次にホームページのメインとなる「HTMLの作成」ですが、私はごく普通のテキストエディタを使用しています。

世の中にはFrontPageを初めとしていろんなHTMLエディタがありますが、私は昔から普通のテキストエディタでHTMLを書くことに慣れてしまった為、いまさらHTMLエディタには移れませんでした。これからHTMLを作ろうとしている方は、マネをされない方が賢明です（笑）

テキストエディタの場合は、HTMLエディタと違い、直にタグを記述できる為、きめ細やかな記述ができるのですが、反面、ページを作るにはかなり時間がかかります。

ツーレポHTMLの構造は、↓のようになっています。

見ての通り、非常にシンプルです。

基本的に400×300の画像とコメントを記述する <div class="box"> と、
横800pxの画像とコメントを記述する <div class="wbox"> の 2種類でほぼ全てのページを作成しています。

スタイル情報は、原則として後述のCSSを使っています。これによりHTMLが非常にシンプルな構造になり、メンテナンスしやすくなります。

例えば、全てのページに表示している上段のタイトルバーと左側のメニューは、左の図のようにこれだけのHTMLで実現しています。

先ほど作成したHTML用のスタイルシートを作成します。いわゆるCSS(Cascading Style Sheets)のことです。テキストのサイズ、間隔などを決めて配置を調整します。

重要なポイントは、行間と間隔 です。

行間が狭いと見づらくなります。このホームページでは、フォントサイズ10pt、行間14ptがデフォルトになっています。フォントサイズを固定にしている為、ブラウザのフォントサイズ変更機能が使用できないというデメリットがありますが、反面どんな状態で見ても表示が崩れないというメリットがあります。

行間と同じように間隔(margin)も見やすくなるように調整しましょう。

ちなみに、このホームページのテキストは 黒色ではない のですが気が付いていましたか？ やや青みがかった黒色(#303060)を使用しています。

このホームページではさまざまなアイコンを使用しています。もちろん、全てPhotoshopで作っています。

←の画像を見ると判りますが、頻繁に登場するアイコンは「CSSスプライト」を使っています。 CSSスプライトとは、頻繁に表示するアイコンを１つの画像ファイルに全て描いておきCSSを使って表示するアイコンを選択する技術です。この方法だと、ブラウザとホームページの間の通信（HTMLリクエスト）が 1回で済むため、表示を高速化することができます。

CSSスプライトの使い方はいろんなサイトで紹介されているので、ここでは省略します。ポイントは、「background-position」です。

ちなみに、この白抜きされたタイトルの画像は、Photoshopで文字に光彩効果を付けているだけです。

簡単に作れる割には見た目も綺麗なので、何かと役に立ちます。

ここまできたら、写真やアイコンなどの画像ファイルが揃ったと思います。

しかし、画像編集ソフトによっては、出力した画像ファイルが最適化されていない場合があります。そこで、以下のツールと使って画像ファイルを最適化しましょう。このツールを使うと、画像の品質を劣化させることなくファイルサイズを減らすことができます。

・PNGOUT - PNG optimizer

・OptiPNG - Advanced PNG optimizer

・jpegtran - transcode JPEG lossless

特に私のように古いバージョンのPhotoshopを使っている場合は、このツールは必須です。

もちろん、画像が写真かアイコンかによって、pngとjpegを使い分けて下さい。gifは非推奨です。

このホームページのGuestBookは、ShiromukuさんのフリーCGIを使用させて頂いています( http://www.t-okada.com/cgi/ )。

非常に細かい設定やカスタマイズができるお勧めのCGIです。

しかし、掲示板を設置すると問題になるのがspam書き込みです。このホームページも毎日多数のspam書き込みアクセスがあります。

ShiromukuさんのCGIにはIPアドレスを用いたリジェクト機能はあるのですが、これだけでは全てのspam書き込みをリジェクトできないので、ちょっとCGIを改造して使わせてもらっています。

１）英文書き込みブロック

　海外からのspam書き込みをブロックするには、日本語チェックが一番有効です。

２）禁止単語ブロック

　英文チェックだけでは国内のspam書き込みをブロックできないので、特定の単語が含まれていたらブロックします。

こんな簡単な対策だけでも充分な効果があります。

このホームページをGoogleで検索すると左の画像のように著者情報、更新日、ディレクトリ構造などが表示されます。これをリッチスニペットと呼び、各ページにはここの情報を表示するためのメタ情報が埋め込まれています。

詳しいことは、Googleウェブマスタツール に書かれている為、ここでは説明を割愛します。

このホームページは、できる限り高速に画面を表示できるように幾つかの工夫をしています。

例えば、最もシンプルなのが ← で、HTMLを最小化しています。IEなら右クリックして「ソースの表示」を選択してもらうと判りますが、改行コードがほとんど入っていません。これもデータ転送量を減らすひとつのポイントです。

前述の画像ファイルを最適化やCSSスプライトも高速化の手段のひとつです。

ページ表示速度の高速化の検証は、Googleの PageSpeed Insights で行うことができます。

PageSpeed Insightsは、自分のページがどれだけ高速化できているかを検査して、表示速度のスコアと高速化の為のアドバイスを示してくれます。

ちなみに、ここのトップページのスコアは、92点です。本当は100点になるまで改善したいのですが、レンタルサーバ側の制約事項など、幾つかの理由により100点をマークするのは難しいことが判明しています。無理矢理100点にすることはできるのですが、デメリットの方が大きいため実施していません。この辺りの詳しいことは、いずれ加筆します。