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

 今回は、投稿されたコメント、トラックバックの繰り返し表示、トラックバック用URLの表示部分を作成します。




変数を組み上げる


 順番に読んで頂けた方は、もう要領は理解されていると思います。本文部分の組み立ての復習のようなモノです。

①使える、使いたい「変数」を調べ、表示順に配置する。
②繰り返しブロック変数や、エリア変数が必要か確認し、必要であれば随時追加。
③最後にDIVブロックで丁寧にコーティングしていく。

※変数も、HTMLタグも同様、「閉じタグ」を忘れないようにする。



表示アイテム

 コメント表示アイテムは、オードソックスに行けば…

  • コメントの表示部分を示すタイトル
  • 投稿されたコメントのタイトル
  • 投稿されたコメントの内容
  • 投稿してくれた人のメールリンク
  • 投稿してくれた人のブログ(HP)URL
  • コメント再編集モードへのリンク
  • 日付


 トラックバックは、

  • トラックバックの表示エリアを示すタイトル
  • トラックバック先の記事へのタイトへのリンク
  • その本文要約
  • トラックバック先のブログへのリンク
  • 日付

  • この記事へのトラックバック用URL表示部分


 このような感じになるかと思います。



変数を組む

 これを、変数を調べて組んで行きます。

<!--コメント-->
<!--comment_area-->
<%template_comment>
<!--comment-->
<%comment_title>
<%comment_body>
<%comment_year>. <%comment_month>. <%comment_day> |
<%comment_mail+name> | <%comment_url+str> |
<a href="<%comment_edit_link>" title="<%template_edit_comment>" rel="nofollow"><%template_edit></a>
<!--/comment-->
<!--/comment_area-->
<!--コメントここまで-->

<!--トラックバック-->
<!--trackback_area-->
<%template_trackback>
<!--trackback-->
<a href="<%tb_url>" title="<%tb_title>"><%tb_title></a>
<%tb_excerpt>
<%tb_year>. <%tb_month>. <%tb_day> | <%tb_blog_name>
<!--/trackback-->
<!--/trackback_area-->
<!--トラックバックここまで-->

<!--トラックバックURL-->
<!--trackback_area-->
<%template_trackback> URL
<input onfocus="this.select()" value="<%trackback_url>" readonly="readOnly" />
<a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);" title=""><%template_trackback_this></a>
<!--/trackback_area-->
<!--トラックバックURLここまで-->


 ブロック変数の入れ子に注意して、組み立てていきます。トラックバックURLのタグと変数は、公式テンプレートのコピーです。Javaスクリプトが使われています。
 また、コメントエリアにある「編集」へのリンクタグに「rel="nofollow"」という文言が入っています。これは、「このリンク先はクロールしないで下さい」という検索エンジンに向けたタグです。



DIVコーティング

 いつものようにDIVでコーティングしていくと…

<!--コメント-->
<!--comment_area-->
<div class="area_title"><%template_comment></div>
<!--comment-->
<div class="sub_title"><%comment_title></div>
<div class="sub_body"><%comment_body></div>
<div class="sub_footer">
<%comment_year>. <%comment_month>. <%comment_day> |
<%comment_mail+name> | <%comment_url+str> |
<a href="<%comment_edit_link>" title="<%template_edit_comment>" rel="nofollow"><%template_edit></a>
</div>
<!--/comment-->
<!--/comment_area-->
<!--コメントここまで-->

<!--トラックバック-->
<!--trackback_area-->
<div class="area_title"><%template_trackback></div>
<!--trackback-->
<div class="sub_title"><a href="<%tb_url>" title="<%tb_title>"><%tb_title></a></div>
<div class="sub_body"><%tb_excerpt></div>
<div class="sub_footer">
<%tb_year>. <%tb_month>. <%tb_day> | <%tb_blog_name>
</div>
<!--/trackback-->
<!--/trackback_area-->
<!--トラックバックここまで-->

<!--トラックバックURL-->
<!--trackback_area-->
<div class="area_title"><%template_trackback> URL</div>
<div class="sub_input">
<input onfocus="this.select()" value="<%trackback_url>" readonly="readOnly" />
</div>
<div class="sub_adminjump">
<a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);"><%template_trackback_this></a>
</div>
<!--/trackback_area-->
<!--トラックバックURLここまで-->


 このような感じで如何でしょうか?



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