【私家版・はじめてのFC2ブログカスタマイズ】#14 左カラム（左のサイドバー）月別・カテゴリ別アーカイブ、検索フォーム
<h2 class="monthly-archives">Monthly</h2>
見出し：Monthly。クラスはmonthly-archives
<ul>
<!--archive--> アーカイブの一覧表示ですよん
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>-<%archive_month> : <%archive_count></a></li>
○年○月の記事一覧、ということでまとまり、当該月の記事一覧にアクセスできる。 <%archive_count>はその月の記事数。
<!--/archive-->
</ul>
次はカテゴリーアーカイブ。
左カラム最後はブログ内をキーワードで検索できる検索フォーム。<h2 class="categories-archives">Categories</h2> 見出し：Categories。クラスはcategories-archives
<ul>
<!--category--> カテゴリー別の一覧表示ですよん
<li><a href="<%category_link>" title="カテゴリ「<%category_name>」の記事一覧"><%category_name> : <%category_count></a></li>
自分で設定したカテゴリーの一覧が表示され、カテゴリー別に記事数が表示される。クリックするとそのカテゴリーの記事一覧にアクセスできる。
<!--/category-->
</ul>
これで、左カラムはおしまい。<h2 class="search">Search</h2> 見出し：Search。クラスはsearch
<form class="search" method="get" action="./">
<p>
<input id="search-text" type="text" name="q" size="20" value=""> 検索ウィンドウ。幅は20px。
<input id="submit" type="submit" value="検索"> 検索ボタン
</p>
</form> 検索フォーム終了
</div><!-- /secondary-column -->
はい、これ。忘れてたでしょ。ここに出てきていたもの。やっとここで閉じられている訳だ。</div><!-- /wrapper -->
え、ということは、メインカラムと左のカラムがひとまとまりになっていて、右のカラムは別扱いかい？うーん、こりゃ新たな発見である。
- at 01:37
- [107 ブログカスタマイズ]
- TB(0) |
- CO(2)
- [Edit]
無題
その通りです。
wrapper内でprimary-columnとsecondary-columnを回り込ませる事で擬似的にカラムレイアウトを作り出しており、containerの中でprimary-columnとsecondary-columnを包合したwrapperとextra-columnを回り込ませることで擬似的に3列カラムを作り出しています。
これにはちゃんと意味があり、HTMLではprimary-column→secondary-column→extra-columnの順で記述してあります。そのため、CSSを切った状態でも一番重要である記事を一番最初に表示し、続いてアーカイブ関連、その他の順で表示させるようにしてあります。
音声ブラウザなどでもその通りに読み上げますので、目に見えない部分でも気遣っているわけです（一応）。
テンプレを作成する場合は、完成後にLynxシミュレーターなどでチェックしてみるといいかもしれません。
http://www.infoaxia.com/