スタンダード・デザインラボ

ヘッダー

　本当はもっと自由に何でもオリジナルに作成できるのですが、まず最初はオードソックスなテンプレートを作成していきます。
　まず、ヘッダーに入れるべきアイテムを選別します。
　オードソックスにいくと「ブログタイトル」「ブログの紹介文」を入れるのが一般的です。


　こんな感じです。


すべての要素はブロックに入れる

　ブログを組む上で基本になってくるのが「コンテンツはすべてブロック要素に入れる」ことだと思います。
　HTMLの書式の定義を満たす意味でもそうですが、何より「スタールシートでデザイン」を成立させるためには、これが必要になってきます。



　これに、スタイルシートとの旗印を入れて、後でスタイルシートデザインが出来るようにしておきます。

※勿論クラス名、ID名は、自分の好きなように設定することも出来ます。



他の人もダウンロードして使えるようにする（共有用のテンプレートにする）

　自分一人が使う場合は必要ないのですが、共有テンプレートに登録するときは、「環境設定の編集」で入力した内容をテンプレートに自動的に挿入できるように「変数（独自タグ）」を入れていきます。

　また、「変数（独自タグ）」は今どこのページが表示されているのか判断したり、プラグインの内容を表示したり、記事を繰り返して表示したりする時にも必要になってきます。


　今回はオードソックスに、ブログを作成するときに入力した「ブログタイトル」と「ブログ要約」を自動で挿入するタグを入れていきます。

■FC2ブログ「変数」一覧はこちらで紹介されています。
テンプレート用　変数一覧｜FC2ブログ公式マニュアル





最適化をする

　ここからは議論が分かれるかも知れませんが、基本的には「H」タグと「P」タグで、中身の従属関係を明確にしていきます。

　最適化の基本は…

• <H1>大見出し</h1>
  
  • <p>大見出しの内容</p>
  
  
• <H2>中見出し</h2>
  
  • <p>中見出しの内容</p>
  
  
• <H3>小見出し</h3>
  
  • <p>小見出しの内容</p>
  
  　：
  　：
  　：
  
• <H6>小見出し</h6>
  
  • <p>小見出しの内容</p>

　こういった物が、内容を表す物として使われます。
「H」タグは「見出し」
「P」タグは「内容」
　を、表します。

　これは、表示されるときにあまり変化はありませんが、現在では主に検索サイトがそのページの内容を把握するための判断材料として利用されています。
　検索エンジンは、「<H1>」の中身を見たときに、「これは、このブログ（ホームページ）の一番重要な見出しなんだな。恐らくブログ（ホームページのタイトルだな）」と判断し、貴方のサイトの検索結果を検索サイトのお客様に表示するときに使われます。

　最近の検索エンジンは進化していますが、この「H」タグあたりだけでもきちんと記述しておけば、検索エンジン（少なくともグーグルロボット）には好かれるテンプレートに近づきます。



　或いは、より最適化するなら、



　こんな感じです。（Hタグ、Pタグともにブロック要素です）
　最初のうちは、デザイン崩れの原因になるので、あまり極端な最適化は行わない方が無難かも知れません。

フッターを作成する

　フッターでは、コピーライトと、FC2広告を挿入します。FC2広告は外せないので、確実に入れておきます。
　ヘッダーと同様に、ブロックタグにコピーライトと広告を入れてみましょう。



　こんな感じでどうでしょう？
　特別な独自タグは「広告変数」とコピーライト表示の場所に「ブログタイトルを表示する変数」が入っています。




■次は、サイドバーアイテムを入れていきます。
サイドバーにプラグイン表示をする