【B】はてなブログで関連記事を紹介してくれる、LinkWithinをカスタマイズするのだ！の巻

f:id:hisoka_maki:20130601205517j:plain

以前、はてなブログに「こちらの記事もどうぞ」を表示するためのサービス
LinkWithinをご紹介させていただきましたが、
今回はそのデザインをカスタマイズして
自分のブログにあったテイストにしちゃおう！という話です。

LinkWithinのデザインは、どんなサイトにもマッチするシンプルなものなので
とりあえず設置してそのまま、という方が多いのではないでしょうか。

今回、Google先生と先輩のみなさまのお力を借りて、
LinkWithinを自分好みに変えてみましたので、その方法をご紹介します。

もし、ご自身のサイトでLinkWithinを使われているようでしたら
本記事を読みながら、一度見直してみるのもいいかもしれません。
所要時間は20分くらい。当記事のCSSをコピペして微調整するだけです。

※LinkWithinってなに？という方はこちらをご参照ください：

【B】 10分ではてなブログに「他にこんな記事も読まれています」を表示するめっちゃカンタンな方法！の巻

f:id:hisoka_maki:20130530173322g:plain

修正したかったポイントは大きく分けて4つ、です。

f:id:hisoka_maki:20130601205413j:plain

LinkWithin上部の空白をもっと狭くしたい
ハイライトの背景色をブログのトーンに合わせたい
長めのタイトルがはみ出しちゃうのを防ぎたい
「他にこんな記事も…」をもうちょっと目立たせたい

もうね、すんごい細かい、重箱の隅をつつくっていうか
机の上に指をすべらせてホコリを確認した上で
「あら、由美子さん(仮)はお掃除が苦手なのかしら？」
なんて嫁さんに言っちゃう姑くらいのうっとうしさですが
一度こだわりだしたら止まれない猪突猛進、
出されたモノは全て食べ尽くす食欲旺盛、育ち盛りなわたくしです。

では、当サイトで使っているCSSを例に、ひとつずつ見ていきましょう。
※当サイトで使用しているCSSを(ほぼ)そのまま掲載していますので
　みなさまのブログにあわせて修正するには
　赤字で表記されている部分を変えてみてください。

f:id:hisoka_maki:20130428134611g:plain

LinkWithin上部の空白をもっと狭くしたい

.linkwithin_div {
margin-top:-30px !important;
margin-bottom: -20px !important;
}

"margin-top: -30px" がLinkWithin上部の空白を狭める役割を果たしています。
数字はみなさまのブログのデザインに合わせて修正してみてください。
私の場合、LinkWithin下部も狭めるため"margin-bottom: -20px"も追記しています。

※もし他のコンテンツと重なって表示されるようであれば
　-30を-20や-10にするなど変更してみてください。

ハイライトの背景色をブログのトーンに合わせたい

.linkwithin_posts a:hover {
background-color: #B7DBE4 !important;
}

”#B7DBE4”`ってところが色を指定している部分です。
ここを自分の好きな色に変えてやればOKです。

当サイトの場合は、URLリンクやタイトルに使っているこの色を
淡い色に変えて使ってやることで、サイト内でのトーンを
統一させるようにしています。

使いたい色のイメージはあるんだけど、具体的にどう指定すればいいの？
#xxxxxxってどうやったら分かるの？
って方はこちらのサイトが役に立つかもしれません。

f:id:hisoka_maki:20130530173321g:plain

長めのタイトルがはみ出しちゃうのを防ぎたい

.linkwithin_posts {
height: 200px !important;
}

.linkwithin_posts a {
height: 200px !important;
}

"height: 200px"というところで、高さを調整しています。
この"200"という数字は、みなさまのブログで使われている
タイトルの長さやデザインに合わせて変えてみてください。

「他にこんな記事も…」をもうちょっと目立たせたい

このぐうたらジャーナルの他のところ
たとえば「続きを読む」でも使っているように、
アクセントとなる画像をつけてやりたいのです。

f:id:hisoka_maki:20130601212004j:plain

そのためのCSSがこちら。

画像のURLや"padding-left: 35px"、 ”padding-top: 15px”は
みなさまのブログで使われるアクセントの画像にあわせて変えてみてください。

.linkwithin_text {
     background: url("画像のURL") no-repeat left center;
   padding-left: 35px !important;
     padding-top: 15px !important;
}

【参考】ちなみに「続きを読む」のアクセントを表示するためのCSSはこちら。

.entry-see-more {
  background: url("画像のURL") no-repeat left center;
  padding-left: 35px;
  padding-top: 10px;
}

f:id:hisoka_maki:20130428134610g:plain

その他もろもろの微調整

やめて！LinkWithinのライフはゼロよ！って突っ込みたくなるくらいに
ネチネチと細かい調整をしてきたわけですが、さらに突っ込みます。
ぐうたらなくせに、絶対同居したくない小姑ナンバーワンになれるくらい
神経質なタイプです。わたくし。

まず、ブラウザの横幅が狭くなってしまったとき
必要に応じて2段以上に分けて関連記事を表示するようにします。

.linkwithin_inner {
width: 100% !important;
}

また、ぐうたらジャーナルの場合、5記事を紹介して
横幅がパツンパツンになってしまっているので、
関連記事の間にある仕切り線をなくし、記事の間隔を調整します。
"padding-right: 4px"、"padding-left: 4px"の数字は
みなさまのブログにあわせて調整してみてください。