ブログっぽいと一番感じるところは、やはりタイトル部分。面積が多い部分にサイト名がテキスト文字で大きく表示されていると…ブログっぽいですね。

というわけでタイトル部分を変更します。サイト名と背景をイメージで作成して、それをスタイルシートで設定します。するとこんな感じになります。

タイトル部分 ブログっぽい　変更前

タイトル部分　ホームページっぽい　変更後

ここでSEOについても考えなければなりません。一般的にブログではH1タグはサイトタイトルが指定されています。検索エンジンはH1タグで指定された文字をサイトに関する重要な情報と位置づけているようですから、消してしまうのは勿体無いですね。
そこで、サイトの説明文である’description(概要)’をH1タグで囲むように設定します。表示は右上に、サイズを通常のフォントサイズに指定して違和感がないようにします。これでサイトタイトルにH1タグを指定する以上にSEO的に効果があると思われます。

今回はタイトルイメージをスタイルシートを使って、背景イメージで配置しました。もし、タイトル部分をクリックしてトップページに移動させたい場合は、工夫が必要です。
原則としてHTML文の中にaタグとimgタグを使って設定する必要があります。するとイメージの表示と’description’の表示がぶつかってしまいます。対応方法はいくつかありますが、ここでは簡単に列挙するだけにとどめます。

  • <img>タグでイメージ表示させてから、スタイルシートで絶対位置で表示指定する
  • 行を増やして’description’を表示してから、<img>タグでイメージを表示
  • まず背景イメージを指定して、一部を切り取った<img>タグでイメージをぴったり重ねる
    次に切り取った部分に’description’を表示させるとか(文字すると分かり辛い…)
  • 潔く’description’は表示しない

サンプルサイトではシンプルな方法にしたいので、背景タイトルイメージで表示させることにします。
（つまりタイトルイメージ部分をクリックしても何も起こらない）