« ゴールデンウィークの小旅行 | トップページ | 単語カード漢字語18冊目突入! »

2007年4月19日 (木)

CSSをいじくって「同一カテゴリの最新記事5件表示」に枠をつけてみる

「同一カテゴリの最新記事5件表示」便利な機能なんで設置しましたが、


なんかとってもあっさりしてて見た目がいまいちなんですよね。


とおもっていたら "http://koroppy.cocolog-nifty.com/blog/2007/04/5css_d425.html"
target="_blank">KOROPPYの本棚
さんで、調整されてましたので参考にして私も変更してみました。


KOROPPYさんは点線の枠で囲んでらっしゃいますが、私のほうはKOROPPYさんの引用のように青系でやってみました。


以下の記述をCSSに追加しました。


style="MARGIN-RIGHT: 0px">

/* 同一カテゴリの新着記事5件 */

.entry-recent-posts{

height:190px;

}


.entry-recent-posts ul{

color:#697497;

border: 4px double #CCE6FF;

background-color: #ECF1FA;

font-size: small;

padding:10px;

}



CSSにつきましては "https://kazumaro.cocolog-nifty.com/corean/2006/08/css_7611.html"
target="_blank">スタイルシートCSSをいじくって、写真をポラロイド風にしてみる。
を参考にしてください。


<H19.4.23追記>


KOROPPYさんの指摘を受け以下のように修正を行っております。


style="MARGIN-RIGHT: 0px">

/* 同一カテゴリの新着記事5件 */

.entry-recent-posts{

overflow:auto;

height:210px;


}



|

« ゴールデンウィークの小旅行 | トップページ | 単語カード漢字語18冊目突入! »

ブログ@カスタマイズ」カテゴリの記事

コメント

まろさん、こんばんは!
「最新記事5件」の表示は、ありがたい新機能ですよね~!
どれだけの人が、この機能で過去記事を辿ってくれるかが未知数ですけど。。^^;;
こうして色分けして仕切ると、その部分が別管理されているのがよく分かりますね。
確かに、標準の仕様だとあっさりし過ぎてるかも...

投稿: makoto | 2007年4月20日 (金) 21:07

こんばんわー
本当にこの機能は良いですよね。
私も便利と思いつつも、未知数だなぁと思ったものでアクセントをつけてみました。
この機能、日付ではなくて更新した順番なんでさらにすばらしい気がしますね

投稿: まろ | 2007年4月20日 (金) 22:53

こんにちは。
ご紹介ありがとうございました。

今Firefoxでみているのですが、
ちょっと気になるところが。

文字サイズが大きくなると、
カテゴリ内の最近の記事のリンクが190pxで収まらないようで、
はみ出した部分に、
「トラックバック」の文字が重なってしまっています。

うちのブログでは、文字サイズが大きくなって
指定したheightを超えると、
スクロールバーが発生して、重ならないのですが。

overflow:auto;
を指定すると、スクロールバーを発生させられるかな、
と思います。

投稿: KOROPPY | 2007年4月21日 (土) 12:35

ご指摘ありがとうございます。私のほうでも症状を確認しました。
KOROPPYさんのアドバイスどおり設定しましたら、Firefoxでスクロールバーが現れるようになりました。
m(__)m

投稿: まろ | 2007年4月21日 (土) 19:28

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: CSSをいじくって「同一カテゴリの最新記事5件表示」に枠をつけてみる:

« ゴールデンウィークの小旅行 | トップページ | 単語カード漢字語18冊目突入! »