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

 今回は、少し脱線する感じで、見辛くなりがちな「全記事表示」部分を、見やすくなるように組み立てていきたいと思います。
 テンプレートデザイン作りの参考になるかも。




全記事表示部分の骨格


 まずデザインをする前に、全記事表示部分を「変数」で組み立て、アイテムが表示されるようにします。
 今までの作業同様、

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

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

 これを踏襲して組み立てていきます。
 色々作れると思いますが、今回は「カテゴリのリンク」「記事へのリンク」「記事の日付」を一覧表示させます。


<!--全記事表示-->
<!--titlelist_area-->
<!--titlelist-->

<a href="<%titlelist_category_url>" title="<%template_view_category>"><%titlelist_category></a>

<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>

<%titlelist_year>.<%titlelist_month>.<%titlelist_day>

<!--/titlelist-->
<!--/titlelist_area-->
※変数(独自タグ)とリンクタグを組み合わせたモノ



見やすくするためのHTML、CSSを探る


 例えば、これをそれぞれDIVブロックで囲み、そのまま表示させると…

<!--全記事表示-->
<!--titlelist_area-->
<!--titlelist-->
<div>
<a href="<%titlelist_category_url>" title="<%template_view_category>"><%titlelist_category></a>

<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>

<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</div>
<!--/titlelist-->
<!--/titlelist_area-->
  ↓
CSS入門編  CSS3・透明度を指定してみる 2010.04.26

シンプルテンプレート ソフトコントラスト・パールグレー 2010.04.26

コルクマ テキスト文字数チェックツール・リアルタイムコルクマ 2010.04.25

コルクマ コルクマ・ホッピング 2010.04.23

CSS中級編 テーブルをある程度制御する 2010.04.22


 これでは何が何だか、訳が分からず、訪問者はこのページを見ずに離れる確率が上がります。
 例えばですが、こういったデータ的なモノをズラズラ表示させて、しかも見やすくするとしたら「table」タグが使えます。
テーブルタグを理解してみる

 試しにテーブルタグで組んでみると…

<!--全記事表示-->
<!--titlelist_area-->
<table>
<!--titlelist-->(繰り返し表示ここから)
<tr>
<td>

<a href="<%titlelist_category_url>" title="<%template_view_category>"><%titlelist_category></a>
</td>
<td>

<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
</td>
<td>

<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</td>
</tr>

<!--/titlelist-->(繰り返し表示ここまで)
</table>
<!--/titlelist_area-->
 ↓
CSS入門編 CSS3・透明度を指定してみる2010.04.26
シンプルテンプレートソフトコントラスト・パールグレー2010.04.26
コルクマテキスト文字数チェックツール・リアルタイムコルクマ2010.04.25
コルクマコルクマ・ホッピング2010.04.23
CSS中級編テーブルをある程度制御する2010.04.22


 このような感じで、非常に見やすくなりました。
 他にも、スタイルシートから「DIVブロックフロート」を利用して頭揃えをしたり、「position」等で細かくレイアウトしたりと、いくつかのHTMLと変数を組み合わせる方法が考えられます。
positionを使いこなす



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