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

 今回は、いよいよ難しい記事表示部分の構築に入っていきます。





記事ブロックに入れるアイテム


 最初に再確認をしておくと、記事ブロックで必要なのが

  • 記事のタイトル
  • 記事本文
  • 記事フッター
    • 日付
    • カテゴリ
    • タグ
    • コメント・トラックバックのリンク

 こんな感じだと思います。

 これらで使う変数は膨大になってきます。
テンプレート用 変数一覧|FC2ブログ公式マニュアル

 とりあえず、最初にこれらの中身を変数のみで組み立てていきます。

<!--topentry-->
   <%topentry_title>(タイトル)
   <%topentry_body>(本文)
   <%topentry_more>(追記)
   <%topentry_category>(カテゴリ)
  <!--tag_list-->
   <%topentry_tag_list_name>(タグ)
  <!--/tag_list-->
   <%topentry_year> /
   <%topentry_month> /
   <%topentry_day>
   (<%topentry_wayoubi>)
   (年 月 日 曜日)
   コメント(<%topentry_comment_num>) トラックバック(<%topentry_tb_num>)
<!--/topentry-->

 オードソックスに行きましたが、自分の好みで組み立ててください。
 そして現在、タイトル、カテゴリ、タグには、「リンクタグがない状態」です。
 勿論ただ表示されるだけでもブログは出来上がるのですが、最適化・ユーザビリティーの観点からリンクタグに置き換えていきます。



リンクタグを加える

<!--topentry-->
   <a href="<%topentry_link>"><%topentry_title></a>
   <%topentry_body>
   <%topentry_more>
   <a href="<%topentry_category_link>"><%topentry_category></a>
  <!--tag_list-->
   <a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>
  <!--/tag_list-->
   <%topentry_year> /
   <%topentry_month> /
   <%topentry_day>
   (<%topentry_wayoubi>)
   コメント(<%topentry_comment_num>) トラックバック(<%topentry_tb_num>)
<!--/topentry-->


 一気に非常にややこしくなりましたが…

「<a href="○URL○">リンクの文言</a>」

 これがリンク用のタグですよね。これに、
「<%topentry_link>(エントリーのURL表示変数)」
「<%topentry_title>(エントリーのタイトル表示変数)」
 を組み合わせたモノなんです。「表示変数」というより「書き込み変数」と言った方が分かりやすいかも知れません。

 変数は、ブラウザがHTML表示をする前に、HTMLに「指定した何か」を書き込むものです。変数が書き込まれた後、ブラウザがHTMLを表示するという流れになります。
 通常のHTMLタグと変数を組み合わせられるようになると、色んな事が出来るようになります。

 例えば、非常にややこしいタグのリンクですが、タグページのURLは、FC2では以下のように表示されます。

「http://designlabolatory.blog16.fc2.com/?tag=面白テンプレ」

 これを分解すると…
http://designlabolatory.blog16.fc2.com/?tag=面白テンプレ」
 この赤字部分は「ブログのURL」

「http://designlabolatory.blog16.fc2.com/?tag=面白テンプレ
 これが、「タグの名前」

「http://designlabolatory.blog16.fc2.com/?tag=面白テンプレ」
 これが、タグページでのURLのパターンです。

 ですので、「<%url>(ブログのURL書き出し変数)」「<%topentry_tag_list_name>(URLエンコード化(URL用・コンピューター用に日本語を書き直した)したユーザタグ名を表示)」と「?tag=」を組み合わせれば、タグページへのリンクのURLが組み上がるわけです。




追記用ブロック変数を加える

 このままでは、ブログが表示されると、本文も追記も一気に表示されます。
 FC2ブログでは、追記文を「続きを読む」をクリックすることで詳細記事ページへとジャンプさせ、読ませることが出来ます。
 これを実現していきます。

<!--topentry-->
   <a href="<%topentry_link>"><%topentry_title></a>
   <%topentry_body>
  <!--more_link-->
   <a href="<%topentry_link>"><%template_extend></a>
  <!--/more_link-->

<!--more-->
   <%topentry_more>
<!--/more-->
   <a href="<%topentry_category_link>"><%topentry_category></a>
  <!--tag_list-->
   <a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>
  <!--/tag_list-->
   <%topentry_year> /
   <%topentry_month> /
   <%topentry_day>
   (<%topentry_wayoubi>)
   コメント(<%topentry_comment_num>) トラックバック(<%topentry_tb_num>)
<!--/topentry-->


 赤字の「more」が、記事繰り返し表示の時は表示されず、詳細記事ページでは表示される、という特別なブロック変数です。
 青字の部分が、記事繰り返し表示の時表示され、詳細記事ページでは表示されない、「続きを読む」のリンクタグです。「<%template_extend>」が、多言語に対応した「続きを読む」に変換されます。
多言語用変数|FC2ブログ公式マニュアル



DIVブロックでコーティング

 最後に、いつものようにそれぞれのアイテムを「DIVブロック」でコーティングして記事部分が完成します。
 デザイン上、記事ブロックと、記事フッターブロックの2つの大きなブロックに分けるのがお勧め。

 DIVブロックを挿入した例。





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