読者です 読者をやめる 読者になる 読者になる

HSKぐうたらジャーナル

カメラ、ガジェット、かっこいいもの、かわいいもの、おいしいものが大好きな個人トレーダーのぐうたらな日常をマイペースに綴ります。

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

[B] はてなブログ

f:id:hisoka_maki:20130601205517j:plain

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

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

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

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

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

f:id:hisoka_maki:20130530173322g:plain

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

f:id:hisoka_maki:20130601205413j:plain

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

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

では、当サイトで使っている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"の数字は
みなさまのブログにあわせて調整してみてください。

.linkwithin_posts a {
    border: none !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
}

というわけで、できあがったのが、この記事の下の方にも表示されている
LinkWithinによる記事一覧表示です。

f:id:hisoka_maki:20130428134606g:plain

もっと参考になるサイト

最後になりましたが、参考にさせて頂いたサイトをご紹介します。
ここで紹介しきれなかったカスタマイズ内容については
これらのサイトをご参照いただければ分かるかもしれません。

また、これまでぐうたらジャーナルで取り上げてきた
はてなブログのカスタマイズに関する記事の一覧は、こちらからご覧になれます。
よろしければどうぞ。

【B】はてなブログ カスタマイズ関連の記事リスト

ではでは、またー。
(※カスタマイズしたLinkWithin。これです。)

 
広告を非表示にする