広告

posted by fanblog

ファンブログで関連記事を表示させるスクリプト2を飾り付ける方法

このエントリーをはてなブックマークに追加
昨日、ファンブログで関連記事を表示させるスクリプト2って記事を書きました。今回はそれで表示される関連記事のリストをcss(スタイルシート)で飾り付けるって事をやります。やります、っていうかcssの例とかを書いてみます。

「関連記事」って表示をどうにかする


どんな文字にするか、ってのは個人で色々考えてもらいたいんですが、何にしてもタイトル的な感じにしたい訳です。
で、これに関しては使う方のテンプレートにもよるので、それに合わせて飾り付けるべきだと思うわけです。
そこで、どうするのか、と言うと、1記事のページの「トラックバック」とか、「この記事へのコメント」、って書いてある部分あるじゃないですか。
これのcssをコピーして、「関連記事」も同じ様に表示させる、ってのが楽かな、と。

そんな訳で、スタイルシートの中から、
h3#trackbackTitle{
~~~
}
という場所を探して下さい。~~~の部分には当然ですが色々書いてあります。テンプレートによっては2、3箇所あるかもしれません。
その~~~の部分を全てコピーして、
.hyojiboxtitle{
(ココに全て貼り付ける)
}
とスタイルシートに書き加えて下さい。

こうする事で、「トラックバック」と同じ様に飾り付けられて「関連記事」と表示される様になります。テンプレートにマッチして、それとなく表示されるかな、と。

リスト部分の飾り付け


リスト部分ってのはリンクが表示されてる部分の事です。ここに関しては特に何もしなくても良い、って人も多いのかな、と思います。
ですが、一応一例としてcssを紹介しておきます。以下のコードを貼ると、リストの先頭部分のマークは三角形になり、マウスポインタを乗せると背景色と、そのマークの色が変わる様になります。

.kanrenkbox li{
list-style-type:none;
}
.kanrenkbox li a{
position:relative;
padding-left:15px;
display:block;
}
.kanrenkbox li a:hover{
background-color:#eee;
}
.kanrenkbox li a:before{
content: "";
position:absolute;
top:50%;
left:3px;
margin-top:-3px;
border-top:3px solid transparent;
border-bottom:3px solid transparent;
border-left:6px solid #999;
}
.kanrenkbox li a:hover:before{
border-left-color:#333;
}

こんなに複雑なのじゃなくて、単にリストの先頭部分のマークを変更するなら、
.kanrenkbox li{
list-style-type: ~~ ;
}
とだけスタイルシートに書けば大丈夫です。~~の部分はlist-style-type CSS リスト等を参考にして下さい。残念ながら、ulタグを使っているので、数字等は表示できませんが。

最後に


一応以上です。関連記事を表示すると、やはり訪問者が記事を読んだ後に他の記事も読んでくれる率が増えて、ページビューが伸びるんじゃないかな、と思います。その為には、多少飾り付けをして目立たせた方が効果があるんじゃないかな、とは思います。

今回、関連記事を表示させる方法と記事を分ける様な形になってしまって申し訳ないです。追記部分に1万文字しかファンブログは書けないので、一応本文にも文章をたくさん乗せる事で不可能ではないんですが、一応分けました。しかも、「明日には書く」、と言っていたのに昨日は更新出来ず。。申し訳ない。。ま、そんなに見てる人もいないかもですが。。w

そのうち、関連記事のうち、画像が記事中に使われている物には画像も表示させるスクリプトなどについても考えて、記事も書きたいと思っていますので、よろしくお願いします。

追記


ファンブログで関連記事を表示させるスクリプト2を、使い方と全く同じ様に使っている場合、この記事で紹介した方法ではリンクの文字の色が変更出来ないかもしれません。
その場合は、以下のコードで試してみて下さい。それでもダメな場合は気軽にコメント下さいw 手間がかかってしまい申し訳ないです。

#entries .kanrenkbox a{
color:(好きな色のコード);
}
/*もしくは、*/
#entries .entryInfo .kanrenkbox a{
color:(好きな色のコード);
}
  • HOME
  • 関連記事表示
  • ファンブログで関連記事を表示させるスクリプト2を飾り付ける方法

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。