Linkwithinの画像つき項目の幅を標準より大きくしてみました

イントロダクション

関連記事を自動的に表示してくれる機能「Linkwithin」ですが、デフォルトのサイズだと、このサイトの幅よりも小さいため、サイトの幅ギリギリまで幅を広げてみました。

Linkwithin デフォルトのサイズ

その時に、Linkwithin の全体の幅を広げた分、各項目の画像が大きく表示されるようにしてみました。

コード

以下の CSS を追加しました。

div.linkwithin_inner {
width: 100% !important;
}

.linkwithin_posts > a > div {
width: 120px !important;
}

div.linkwithin_img_0 > div {
background-size: cover !important;
width: 115px !important;
height: 115px !important;
}

一つ目の div.linkwithin_inner にて、Linkwithin をページの幅 100% で表示するようにしています。

二つ目の .linkwithin_posts > a > div にて、関連する画像つきの項目の幅を大きめに設定しています。
ブラウザのスタイルシートのデバッグ機能を使用して、ページの幅ギリギリまで表示される大きさを指定します。
但し、ブラウザによって微妙な表示サイズのゆれが発生する場合があるので、あまりにもギリギリな値は指定せず、少しの余裕を持たせるとよいでしょう。

三つ目の div.linkwithin_img_0 > div にて、画像のサイズを拡大しています。
画像サイズは、デフォルトのサイズが幅と高さの長さが同じだったため、拡大後のサイズも幅と高さが同じになるようにしています。
ブラウザのスタイルシートのデバッグ機能を使用して、画像サイズが見栄え良く表示されるサイズを指定するとよいでしょう。


なお、Linkwithin の場合、各要素に直接 style 属性が書き込まれているため、そのデフォルト値を上書きするために、すべてのスタイルシートの指定に !important を付与しています。

結果

以下のように、Linkwithin の各要素が拡大され、ページ幅ぎりぎりのサイズで表示されるようになりました。

Linkwithin デフォルト

↓

Linkwithin スタイルシート変更後

これで、ページの閲覧者の関連記事への注目度を上げることが出来るかもしれません。