日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年5月26日火曜日

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:関連記事を横に2つずつ並べる

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


まとめ

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




Kindle版 楽天 7net




関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...