Blogger にオススメ記事を表示するLinkWithinを導入して、さらにレイアウトまでもカスタマイズする。

おすすめ記事ピックアップ

関連記事を表示するウィジェット LinkWithin（http://www.linkwithin.com/）は、ブログ記事の関連記事を自動で表示してくれます。登録も不要で、簡単にコードを生成してくれます。Bloggerのウィジェットは連動しており、スムーズに設置できます。

一見英語で難しそうなLinkWithinの導入方法を説明します。LinkWithinの一番残念な点は、CSSやレイアウトの変更ができないことです。LinkWithinはCSSなど変更できないので、微妙に隙間があったり、スッキリ並ばなかったりします。

とてもモヤモヤします。でも力技で変更できてしまうのです。本邦初公開です。デザインやレイアウトを重視している人にオススメの情報です。

LinkWithinは一見、ユーザー登録が必要に見えますが、簡易登録で利用できます。サイトにアクセスして右側の項目を入力します。

メールやサイトURLを入力します。Bloggerの場合はBloggerを選んでください。Widthは、オススメ記事の表示数です。1～5で設定できます。背景の色が黒い場合はチェックを入れてください。白い場合はチェックなしで。

登録が終わると、説明画面が出てきます。一見難しそうですが、何も考えずにインストールウィジェットを押しましょう。

導入したいブログを選び、ウィジェットの追加をします。

ウィジェットを追加するとレイアウト画面に移動します。ブログの投稿したにでも移動しましょう。

編集を押してみてください。このままだと英語の見出しが表示されます。

下記のように、これを追加します。日本語の見出しが使えます。IDの下に追加しましょう。

var linkwithin_text='ここに見出しを入れる';

実際に表示させて見ましょう。無事関連記事が表示されました。しかし右側のスペースが発生しています。596ピクセルで幅が固定されています。微妙にレイアウトが気持ち悪いです。

ソースの見てみます。下記の2つのCSSに注目します。innerが幅を決定しています。個別の画像のスペースは、postsのさらに、それぞれaリンクごとに設定されています。このCSS自体は、LinkWithin側にあるために、コードで変更することができません。

変更すれば良いCSSが分かったので、強制的に変更するimportantを使いながら、レイアウトをカスタマイズします。CSSにこの追記をしましょう。簡単に説明するとwidthを100％にして横幅を広げて、ポストのa部分にそれぞれ隙間を設定しました。

このブログの場合は、13pxで、ちょうど良かったので13にしています。上下左右など、
ご利用の環境にあわせて自由に変更すると良いです。

/*------------------------------------------------------
linkwithin　kasutamu kodo
------------------------------------------------------*/

.linkwithin_inner{
width:100% !important;
}
  
.linkwithin_posts a{
padding: 13px !important;
}

プレビューしてみます。大成功！！！レイアウトがキレイになりました。

みなさんも是非LinkWithinを導入してみてください。何かメディアっぽくなった気分になりますねー。

LinkWithin
http://www.linkwithin.com/

追記：2015年2月

デザインのカスタマイズについて追記記事かきました。
http://www.furimuke.com/2015/02/linkwithin-css-blogger.html