2009年09月17日
ファンブログのメインページとアーカイブページに記事タイトル一覧を設置してみよう！
ファンブログ カスタマイズ：HTML 編 投稿日：2009年09月17日 20:34
今回はトップページが表示されるメインページとカテゴリや月間アーカイブなんかを表示させるアーカイブページに記事タイトル一覧を表示する方法を説明します。
以前からカテゴリページに記事タイトル一覧を表示させたくて色々と試行錯誤して試した結果、非常に単純なHtmlタグの構成で表示させられることがわかりましたので、Htmlコードを公開します。(≧ω≦)b
HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、CSS に記述を追記をしなくても 貼るだけでカンタンに表示させるHTMLコードをご用意しましたのでお試しくださいませ。
※ 対応しているのは、シンプル系スキンだけです。画像を使ったデザイナーズスキンでは不具合がでます。
以前からカテゴリページに記事タイトル一覧を表示させたくて色々と試行錯誤して試した結果、非常に単純なHtmlタグの構成で表示させられることがわかりましたので、Htmlコードを公開します。(≧ω≦)b
<BlogEntries>
<img src="{$BlogTmplUrl$}img/icon.gif" align="absmiddle" border="0">
<a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a><br />
</BlogEntries>
このHtmlコードをメインとアーカイブのHTMLに貼り付けるだけで、そのページの記事タイトル一覧が表示されますが、見栄えを良くするためにはHTMLコードを追記してCSSで装飾する必要があります。HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、CSS に記述を追記をしなくても 貼るだけでカンタンに表示させるHTMLコードをご用意しましたのでお試しくださいませ。
※ 対応しているのは、シンプル系スキンだけです。画像を使ったデザイナーズスキンでは不具合がでます。
2013年06月10日 ： 記述変更
記事タイトルと同じ文字色が最初から表示されるように変更しました。
2012年05月20日 ： 誤記訂正・書き換え
ページ送りナビゲーション <!-- nextprev --> の記述に誤りがございましたので訂正して書き換えました。
お持ち帰りのコメントはいただいてませんので、この場での報告となりますことをご容赦ください。
2012年05月16日 ： 加筆・修正
2009年09月17日の記事が下書きとなって埋もれていました。訳あって全ての記事を下書きにして非公開にしていた時期がありまして、再び公開する際に見落としていたようで2年半以上眠っていました。( ^ω^;)）
読み返してみますと非常にわかりにくい内容でしたので、追記の部分を加筆、修正して全面的に書き直しました。
記事タイトルと同じ文字色が最初から表示されるように変更しました。
2012年05月20日 ： 誤記訂正・書き換え
ページ送りナビゲーション <!-- nextprev --> の記述に誤りがございましたので訂正して書き換えました。
お持ち帰りのコメントはいただいてませんので、この場での報告となりますことをご容赦ください。
2012年05月16日 ： 加筆・修正
2009年09月17日の記事が下書きとなって埋もれていました。訳あって全ての記事を下書きにして非公開にしていた時期がありまして、再び公開する際に見落としていたようで2年半以上眠っていました。( ^ω^;)）
読み返してみますと非常にわかりにくい内容でしたので、追記の部分を加筆、修正して全面的に書き直しました。
▼ 今日のおみやげ ▼ 
お持ち帰りの際は「コメント」などを残していただけますと励みになります。
ご利用の際は、ボックス右下の 「Petit Customization Diary」 というリンクを必ず表示してください。
ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピー でお持ち帰りください。
お持ち帰りいただいた「Htmlコード」を、「メイン」と「アーカイブ」の HTML に貼り付けます。作業をする前に HTML のバックアップをとっておいてくださいね。
▼ それでは設置方法の説明です ▼
「メイン」のHTMLを開いたら <div id="entries"> という記述を探してください。比較的上の方に記述されていますので、少し下にスクロールすればすぐ見つかると思いますが、説明には付近のソースも記述してありますので、見つからない方はそちらをご覧になってから探してくみてださい。
持ち帰った「Htmlコード」を <div id="entries"> と <BlogEntries> の間に貼るのですが、そのまま貼ると記述してある元のソースとコードが繋がってしまう恐れがありますので、コードを貼る前に <BlogEntries> の前にカーソルを置き、3〜4回改行して行間を広げてください。
改行して間を広げた真中あたりの行頭にカーソルを置いてコードを貼れば上下に空きができますので、貼ったコードと元から記述されていたソースとの区別がつきますから安全に作業が行えます。
|
<div id="main" class="clr"> <div id="content"> <div id="entries"> ココに貼ってください！ <BlogEntries> <div class="entry"> |
◄ ここから下に貼ってください。 ◄ ここから上に貼ってください。 |
「プレビュー(P)」を押し、記事の上に「このページの記事一覧」というタイトルのフリーエリアが表示されていましたら「保存(S)」を押してください。これで「メイン」への設置は完了しましたので、引き続き「アーカイブ」のHTMLの同じ場所に「Htmlコード」を貼り付けて「プレビュー(P)」を押して確認し、「保存(S)」を押せば貼り付け作業は完了です。
▼ 装飾の編集方法 ▼
<!-- 飾り枠 --><div style="
border-width（枠線の太さ）: 1px 1px 1px 1px; ◄ 上、右、下、左 別々に指定可能
border-style（線種）: solid; ◄ 点線は dotted 、破線は dashed
border-color: #ccc; （枠線色）
background: #fff; （背景色）
margin（外側の隙間）: 0px 0px 30px 0px; （上、右、下、左）
padding（内側の隙間）: 0px 0px 0px 0px; （上、右、下、左）
">
枠線を表示をさせたくない場合は、枠線の太さを 0px に指定してください。
枠線は、上右下左の順番で別々に指定できますので 0px 0px 1px 0px; と指定しますと下線だけが表示されます。
<!-- タイトル --><h2 class="entryTitle"
style="margin: 0px;"><a href="{$BlogArchiveLink$}">このページの記事一覧</a></h2><!-- /タイトル -->
タイトルバーは記事のタイトルの CSS を指定しています。上に 10px の隙間ができてしまいましたので、相殺させる style="margin: 0px; を追記して 10px の隙間をなくしてあります。
サンプルとして入力してあります、このページの記事一覧 をお好みのタイトルに変更してください。
記事タイトルと同じ文字色が表示されるようにタイトルに設置したページのリンクを貼ってあります。
リンクを外しますと CSS に指定色がないため、通常の黒（#333;）で表示されてしまいますので、ご注意ください。
タイトルバーが不要の方は、<!-- タイトル --> から <!-- /タイトル --> までを削除してください。
<ul><BlogEntries><li><a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a></li></BlogEntries></ul>
記事欄の行間設定がデフォルトの状態ですと非常に読みづらくなりますので、一般的なリストタグ（ul要素）で囲むことで行間を広く表示させています。
<!-- archive_nextprev --><div style="text-align: center; color: #666; line-height: 1.6;">
〜 </div><!-- /archive_nextprev -->
11記事以上（次ページが存在）になりますと記事タイトルの下に「ページ送りのナビゲーション」が表示されます。
こちらはメインページやアーカイブページの最後に設置されているものと同じものですが、ユーザビリティから考えて設置しました。記号である « | » の文字色を変更したい場合は color: #666; のカラーコードを変更してください。 不要の場合は <!-- archive_nextprev --> から <!-- /archive_nextprev --> までのコードを削除してください。
<!-- 必ずリンクを表示してください --> 〜 title="＋ぷちカスタマイズ日記＋">Petit Customization Diary</a>
ボックス右下に 「Petit Customization Diary」 というリンクが表示されます。このリンクは「記事タイトル一覧」に興味を持たれた方を、この記事へと誘うリンクになりますので削除せず必ず表示してください。
記事タイトルの他、カテゴリタイトルや投稿した日付などの情報を一緒に表示させることもできますので、詳しい方は色々と試してみてください。
いかがでしたでしょうか？初心者の方でも貼るだけで簡単に記事タイトル一覧を表示できるように、コードを全面的に修正しましたので、ご興味のある方はぜひお試しください。(´・ω・`)b
※ 上記Htmlコードはコピー＆ペーストでそのままご利用になれます。
※ Htmlコードのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：HTML 編の最新記事】
アフィリエイトの始め方 (3)
この記事へのコメント