LinkWithin:関連記事を横に2つずつ並べる

イントロダクション

ブログ内の関連記事を一覧で表示してくれる「LinkWithin」というブログへ埋め込めるサービスがあります。

以前、LinkWithin にスタイルシート(CSS)を適用して、関連記事の一覧を一般的な横並びではなく、縦並びにしてみました。

LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-vertical.html
Dr.ウーパのコンピュータ備忘録

今回は、その時の知見を活かして、関連記事を横に 2 つずつ並べるように、CSS を適用してみます。

LinkWithin:関連記事を横に2つずつ並べる

スタイルシート(CSS)の定義

以下の CSS を定義します。

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

.linkwithin_posts > a  {
    border-left-style: none !important;
    height: 110px;
    width: 46%;
}

.linkwithin_posts > a > div {
    width: 100% !important;
    height: auto !important;
}

.linkwithin_posts > a > div > .linkwithin_img_0 {
    float: left;
    margin-right: 10px !important;
}

「LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！」のときのスタイルシートをベースとしています。

基本的に、そのときのスタイルシートの定義と同じですが、「.linkwithin_posts > a」に一部変更を加えて、関連記事を横に 2 つずつ並べられるようにしています。具体的には、関連記事を縦一列に表示していた時に設定していた「float: none !important;」と「clear: both;」を削除して、元々の状態である「float: left;」のスタイルが適応された状態にしています。また、「width: 46%;」を設定することで、関連記事の幅が LinkWithin の表示領域の半分よりも小さくなるようにしています。

[重要!] float を解除する要素を配置

さて、上記のスタイルシートを有効にすると、「float: left;」を解除する要素が無くなってしまうため、LinkWithin の下に配置した要素が LinkWithin と干渉する（LinkWithin とその下の要素が重なるなど）ことがおこりえます。

そのため、LinkWithin を表示している領域の直下に、「float: left;」を解除するための「clear:both;」を適用した要素を配置します。

例）「float: left;」を解除するための「clear:both;」を適用した要素
<div class="linkwithin_div"></div>


もし、LinkWithin を、

<div style="clear:both;"></div>

によって、ブログ内の任意の箇所に表示できるようにしているならば、その HTML コードの下に、「float: left;」を解除するための「clear:both;」を適用した要素を配置すると良いでしょう。

例）LinkWithinの任意の箇所への配置と、「float: left;」を解除するための「clear:both;」を適用した要素
<div style="clear:both;"></div>
<div class="linkwithin_div"></div>

適用結果

今回のスタイルシートを定義すると、LinkWithin が次のように関連記事が横に 2 つずつ表示されるようになります。

LinkWithin:関連記事を横に2つずつ並べる

関連記事を縦１列に配置した時には、文章の部分に空白が目立っていましたが、縦２列に配置した場合には、サムネイル・タイトル（文章）と空白のバランスがとれており、関連記事の内容を視認しやすくなったように感じます。

まとめ

スタイルシートを定義することで、LinkWithin の関連記事を縦２列で表示することができます。

このブログ内の、他の”LinkWithin”についての情報を見る

---

演習で力がつく HTML/CSSコーディングの教科書

Kindle版 楽天 7net