Vanilla*e

うるるの雑記部屋☆彡
<< モブログ投稿テスト | TOP | ご挨拶 >>

アーカイブタイトル一覧表示を設置

2006/10/10 Tue | Serene Bach > カスタマイズ

え〜、今回は月別アーカイブやカテゴリーごとのタイトルリストを一覧表示するカスタマイズをやってみました。


とりあえずの完成形







記事数があんま無いので寂しいですが、多くなってくれば
これは便利な表示方法じゃないかと今から導入決定w

でもまぁ、案の定ちょっと苦戦しました(´д`)

最初、Bolero様 のカテゴリーINDEX化プラグインを使って色々やってみましたが
どうも上手くいかないので断念(´・ω・`)ヘタレ・・





そして色々巡って参考にさせて頂いたサイトはこちらの
Gimlet 様のパンくずリスト&アーカイブタイトル一覧表示の記事です。

そしてSerene Bach パティオ「タイトルリスト表示

ほんとに感謝でございます<(_ _)>



1)一覧表示用テンプレートを用意

まず準備としては今使ってるテンプレをカテゴリー表示用として
別の名前で保存しとく。(例カテゴリー表示用・・とか。



2)不要なHTMLを削除

1で保存したテンプレのHTMLのコメント&トラックバック不要な部分をザックリ削除する。(タイトル一覧表示をさせる場所はエントリー部分なので、コメントやトラックバックの部分はザックリ削除)


3)エントリー部分のHTML変更

あくまでも私の一覧表示用に変えてありますのでこちらは一例として
ご自分のテンプレに合うように更にカスタマイズして下さい^^;


<!-- entry_areaここから -->
<div id="entry_area">
<div class="entry_body">
<h2>{selected_archive}</h2><br>
<ul>
<!-- BEGIN entry -->
<li><span>{entry_date}</span> <a href="{entry_permalink}">{entry_title}</a></li>
<!-- END entry -->
<ul>
<div class="pagetop"><a href="#layout">↑ top of page</a></div>
</div>
</div>
<!-- entry_areaおわり -->

※青字はトップに戻るリンク部分


4)そしてcssも付け加えてカスタマイズ

/*----エントリエリアの外枠や背景----*/
div.entry_body{
background-color: #fff;
margin: 5px 20px 0px 20px;
padding: 10px 10px 0px 30px;
border-top: 1px dotted #666;
border-bottom: 1px dotted #666;
border-left: 1px dotted #666;
border-right : 1px dotted #666;
}


/* 記事内のリストマークを消す */
#entry_area ul li {
margin:0px 0px 0px 0px;
padding:0px;
list-style:none;
}

/* 一覧記事の頭にリスト画像を付ける */
div.entry_body li span{
display: block;
float: left;
width: 120px;
background:transparent url(http://〜.gif) no-repeat left;
padding-left:15px;
}


div.pagetop{
padding: 10px 0px 15px 10px;
text-align : right ;
}



※青字はトップに戻る部分

5)設定メニューの変更 
「テンプレート」→「設定」→「利用テンプレート設定」のアーカイブの
テンプレートの部分を (1 で作成したカテゴリ表示用のテンプレートに設定する。
その下のCSSの反映も一覧表示用のテンプレのCSSに
上記のCSSを書き加えた場合「CSSテンプレートも変更する」に変更しておく。


6)そして環境設定の変更
「環境設定」→「表示件数設定」のページ表示部分をアーカイブではページ表示しないに設定。
その下検索結果も同じく「表示しない」に設定。

7)最後に全構築する前に確認事項。
※「編集メニュー」→「記事カテゴリー」の各カテゴリーの詳細部分、テンプレートという箇所は全てのカテゴリーにおいて標準にしておかなければならない。そうしないと一覧表示になりません。

「標準」を選択した場合、「テンプレート設定」の設定を引き継ぎます。
それ以外の場合は「アーカイブテンプレート」の設定よりもこちらの設定が優先されます。いずれの場合もスタイルシートは「テンプレート設定」の「CSS反映」の設定に依存します

以上 Gimlet様より抜粋



ほとんど私の知識不足の為、無理やり表示させてるような気がしますので
参考にしない方がいいかと思います(ぉぃw

でもこの一覧表示のカスタマイズで今まで見て見ぬふりをしてきた・・
と言うか避けてきたwコトに挑戦して玉砕したり成功したりで
面白かったし勉強になりました(*´Д`*))

これからはこれ以上表示が重くならない程度にボツボツやってみたいと
思います(´Д`;)ヾ



author : うるる | comments (0) | trackbacks (0)

Comment

Comment Form








[icon]


 

Trackback

Trackback URL :