関連記事リストを任意の場所に表示したい |
||
(4)
スポンサードリンク
↑ブログの環境設定から、関連記事の表示場所をテンプレート変数のみに変更してください
こちらが変数です。
これで、普段と同じデフォルトの関連記事リストが作成されます。<!--relate_list_area-->
<dl class="relate_dl">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list-->
<!--relate_entry_other-->
<li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
<!--/relate_entry_other-->
<!--relate_entry_now_showing-->
<li class="relate_li_nolink"><%topentry_relate_title></li>
<!--/relate_entry_now_showing-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->
【記事個別ページに関連記事リストを挿入】
まず、テンプレートのHTMLから、このような箇所を探してください。<!--more-->
<%topentry_more>
<!--▼記事下広告スペース▼-->
<!--この文章を消してここに広告を貼ると記事下の広告スペースになります-->
<!--▲記事下広告スペース▲-->
<!--/more-->
<!--/more-->の後ろに、上記の関連記事リストの変数を挿入してください。
つまり、
<!--more-->
<%topentry_more>
<!--▼記事下広告スペース▼-->
<!--この文章を消してここに広告を貼ると記事下の広告スペースになります-->
<!--▲記事下広告スペース▲-->
<!--/more-->
<!--relate_list_area-->
<dl class="relate_dl">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list-->
<!--relate_entry_other-->
<li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
<!--/relate_entry_other-->
<!--relate_entry_now_showing-->
<li class="relate_li_nolink"><%topentry_relate_title></li>
<!--/relate_entry_now_showing-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->
このようにすることで、個別記事が終わり、広告を挟んで、関連記事を表示することもできます。
【記事一覧ページに関連記事リストを挿入】
という箇所を探してください。<!--more_link-->
～～
<!--/more_link-->
このすぐ下に、関連記事リストの変数を挿入すれば、記事一覧ページの下部にも関連記事リストを設置できるようになります。
つまり、
このようにすれば完成です。<!--more_link-->
～～
<!--/more_link-->
<!--relate_list_area-->
<dl class="relate_dl">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list-->
<!--relate_entry_other-->
<li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
<!--/relate_entry_other-->
<!--relate_entry_now_showing-->
<li class="relate_li_nolink"><%topentry_relate_title></li>
<!--/relate_entry_now_showing-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->
他にも、
<!--topentry-->～<!--/topentry-->の中であれば、どこにでも関連記事リストを設置することができます。
3日くらい前からテンプレートを02T_Whiteに変更しまして
試行錯誤している最中なのですが、
どうしてもわからないことがありまして、質問させていただきました。
ブラウザを横に伸ばした際にタイトル、メニューバー、パンくずリストも
メインコンテンツ同様に固定で付いてくるようにしたいのと、
fc2関連記事リストの ・ ファビコンっていうのでしょうか？の空いている
左スペースをもっと左詰めにして記事を詰めたいのですが可能でしょうか？
以上2点ととなります。ご教示願い致します。m(_ _)m
> ブラウザを横に伸ばした際にタイトル、メニューバー、パンくずリストも
> メインコンテンツ同様に固定で付いてくるようにしたいのと、
> fc2関連記事リストの ・ ファビコンっていうのでしょうか？の空いている
> 左スペースをもっと左詰めにして記事を詰めたいのですが可能でしょうか？
まず、タイトル、メニューバー、パンクズリストをメインコンテンツと同様、固定したいということでしょうか？
それならば、
<div id="outline">と</div><!--outline-->の間に、タイトル、メニューバー、パンくずリストが入っていると思います。
まずは、<div id="outline">と</div><!--outline-->のみを消してください。
次に、 <div id="outline_main">と記述されていると思うので、 <div id="outline_main">を<body onBlur="" bgcolor= "#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">のすぐ下に移動させてください。
スタイルシートの方では、
#outline {
min-width:1050px;
width:100%; /* 全体 */
margin:0 auto;
}
は不要なので消してください。このようにすることで、固定長になるかと思います。
次に、関連記事変数に関してですが、スタイルシートの方に、
.relate_dl {
border:2px solid #466e9d; /* 内枠の色 */
}
.relate_dt{
background-color:#466e9d; /* 外側背景色 */
color:#ffffff;
font-weight:bold; /* 太字 */
padding-left:30px;
font-size:12pt; /* 文字サイズ */
}
という記述があると思います。この下に、以下の記述を追加してください。
.relate_dd {
margin-left:-5px; /* 内枠の色 */
}
この-5pxの部分を、変えてあげれば左に詰めていくことが可能になるかと思います。
もし質問の答えがズレていた等、また何かあればコメントください('∀`)
早速ですが試しましたところ・・・・
無事、出来ました！
yutaさんは神ですね。感謝感激です。ﾜｰｲヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉﾜｰｲ
これでブログ作業も捗りそうです。
的確な回答ありがとうございました。
これにて失礼致します。 |彡ｻｯ
グレーが基本色のテンプレートです。
メインカラー ：#444444
メニューカラー：#333333
サブカラー ：#EFEFEF
ラインカラー ：#999999
で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。
SP01_Blue
爽やかな水色が基本色のテンプレートです。
必ず結果が出るブログ運営テクニック
もっとカスタマイズしたい方必見！
毎日メンテナンスするだけで･･･
