スポンサーサイト

Category: スポンサー広告  --/-- /-- (--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Comments (-)Trackbacks (-) | TOP

FC2ブログの関連記事リストのカスタマイズ

Category: カスタマイズ  11/27 /2012 (Tue)

このカスタマイズは、
http://kumacrow.blog111.fc2.com/blog-entry-670.html 【FC2ブログの作り方】を参考にさせていただきました。

kannren.jpg


オリジナルテンプレートは、関連記事はこのような表示の仕方です。

これをカズタマイズしてみよう!!!!

http://kumacrow.blog111.fc2.com/blog-entry-670.html 【FC2ブログの作り方】によると「FC2ブログ関連記事リスト」のHTMLタグ構造はこのようになっている。


<dl class="relate_dl">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<li class="relate_li_nolink">表示している記事のタイトル (日付)</li>
<li class="relate_li"><a href="blog-entry-???.html">関連記事のタイトル (日付)</a></li>
</ul>
</dd>
</dl>


あとは、CSSを加えて装飾してみよう!!!

このブログの装飾の場合

CSSの記述は、

/* ------ FC2ブログ関連記事リスト
-----------------------------------------------*/
.relate_dl {
margin: 20px 10px;
padding: 10px;
border-radius:6px;
border:1px solid #d7d7d7;
box-shadow: 0 3px 10px #000000;
-webkit-box-shadow: 0 3px 10px #000000;
-moz-box-shadow: 0 3px 10px #000000;
background-image:url(http://blog-imgs-53.fc2.com/s/e/a/seaztemplate/bg.png);
}
.relate_dt {
font-weight: bold;
padding-left: 5px;
}
.relate_dd {
margin-top: 10px;
}
.relate_ul {
padding-left: 15px;
}

befkannren.jpg

この図のようになっているはずです。

しかし、IEブラウザは丸み&シャドウになりません。(fire fox,chromeはOK)

CSSを理解できる方は、簡単にカズタマイズ出来ます。

挑戦してみてください!!!

関連記事
スポンサーサイト

Theme: ホームページ・ブログ制作 Genre: コンピュータ
Tags : カスタマイズ 関連記事リスト

Comments (0) | Trackbacks (0) | TOP

CommentForm


URL:




Comment:

Password:

Secret:

管理者にだけ表示を許可する

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。