上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 FC2テンプレートを実際に作ってみる企画です。
 はじめから読むには、以下からどうぞ。
FC2テンプレートを1から作ってみる

 今回は、ヘッダーとフッターを作成していきます。
 サイドバーとメインカラムは作成するのがぐっと難しくなりますので、ヘッダー、フッターで「変数(独自タグ)」の使い方を掴んでください。




ヘッダー


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

<!---ヘッダー->
<div id="header">
タイトル
ブログの紹介文
</div>
<!--ヘッダーここまで-->

 こんな感じです。


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

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

<!---ヘッダー->
<div id="header">
<div>タイトル</div>
<div>ブログの紹介文</div>
</div>
<!--ヘッダーここまで-->


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

<!---ヘッダー->
<div id="header">
<div class="title">タイトル</div>
<div class="introduction">ブログの紹介文</div>
</div>
<!--ヘッダーここまで-->
※勿論クラス名、ID名は、自分の好きなように設定することも出来ます。



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

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

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


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

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

<!---ヘッダー->
<div id="header">
<div class="title"><%blog_name></div>
<div class="introduction"><%introduction></div>
</div>
<!--ヘッダーここまで-->




最適化をする

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

 最適化の基本は…

  • <H1>大見出し</h1>
    • <p>大見出しの内容</p>

  • <H2>中見出し</h2>
    • <p>中見出しの内容</p>

  • <H3>小見出し</h3>
    • <p>小見出しの内容</p>

     :
     :
     :
  • <H6>小見出し</h6>
    • <p>小見出しの内容</p>

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

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

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

<!---ヘッダー->
<div id="header">
<div class="title"><H1><%blog_name></H1></div>
<div class="introduction"><p><%introduction></p></div>
</div>
<!--ヘッダーここまで-->


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

<!---ヘッダー->
<div id="header">
<H1 class="title"><%blog_name></H1>
<p class="introduction"><%introduction></p>
</div>
<!--ヘッダーここまで-->


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




フッターを作成する


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

<!---フッター->
<div id="footer">
<div class="copy"><address>Copyright © <%blog_name> All right reserved.</address></div>
<div class="adspace">Powered by <a href="http://blog.fc2.com/" title="FC2 BLOG">FC2 Blog</a> | <%ad> <%ad2></div>
</div>
<!--フッターここまで-->


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




■次は、サイドバーアイテムを入れていきます。
サイドバーにプラグイン表示をする
このエントリーをはてなブックマークに追加
Mon.01.03.2011
Comment
205
今回テンプレートを自分で作ってみようって思ってこのサイトにたどり着いて読ませていただいています!
丁寧に説明されてて分かりやすいです!

一箇所誤字が見つかったので報告します
<!--ヘッダー-->の部分が<!---ヘッダー->になっています

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。