LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！

イントロダクション

手軽にブログ内の関連記事の一覧を表示できる「LinkWithin」ですが、標準では関連記事の一覧は横方向に表示されます。

LinkWithin
標準では関連記事の一覧は横方向に並ぶ

横方向に関連記事の一覧が 5 つ表示されると、この部分だけ情報の密度が高くなりすぎて見づらいかな？と思い、関連記事の一覧を縦方向に表示してみようと思いました。


そこで実際に、スタイルシート(CSS)を定義することで、縦方向の表示にしてみました！

LinkWithinの関連記事一覧を縦表示するためのスタイルシート(CSS)

以下の CSS を定義します。

CSS定義

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

.linkwithin_posts > a  {
    float: none !important;
    border-left-style: none !important;
    clear: both;
    height: 110px;
}

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

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

この CSS を head タグ内の style タグ 内などに貼り付けます。

解説

各 CSS の意味は次のようになります。

.linkwithin_posts > a  {

Linkwithin が表示する各関連記事のリンクへスタイルを適用します。

    float: none !important;

既に適用されている float: left; が有効になっていると関連記事を縦方向に並べることができないため、関連記事を縦方向に並べるために、float: none を !important によって強制的に適用しています。

    border-left-style: none !important;

元々の Linkwithin の関連記事表示は、横方向であり、記事と記事の間には border-left-style: solid; によって縦線が引かれていました。

関連記事を縦方向に表示する場合には、その縦線は必要が無いので、その縦線を消すために、border-left-style: none を !important によって強制的に適用しています。

    clear: both;

記事を縦方向に並べるときに、記事のサムネイル画像と記事のタイトルを横に並べます。

記事のサムネイル画像と記事のタイトルはそれぞれ div タグ内に記述されているので、ここでは記事のサムネイル画像を納めている div タグに下記で説明するように float: left; を適用して、それらが横に並ぶようにしています。

そのため、何も対策をとらずに、そのあとに要素を続けると、前の要素の意図しない箇所に次の要素が配置される可能性があります。

それを、1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）を並べるごとに、clear: both; を適用することで表示が崩れることを防いでいます。


詳しいことは、以下のページに分かりやすく記載されていました。

divボックスを横に並べる | スタンダード・デザインラボ
http://designlabolatory.blog16.fc2.com/blog-entry-37.html

CSSで要素を横並びにする方法まとめ | HALAWATA.NET
https://www.halawata.net/2011/10/css-float-display-box/

clear−スタイルシートリファレンス
http://www.htmq.com/style/clear.shtml

    height: 110px;

1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）の高さを指定しています。

LinkWithin の1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）のタグ構造は、1 つの関連記事へのリンク(a タグ) の内側に、記事のサムネイル画像と記事のタイトルが記載されている構造になっています。

LinkWithin の1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）のタグ構造

一部情報過多な部分をモザイクもかし処理しています

1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）のタグ構造:（概略）
<a> : 1 つの関連記事へのリンク
<div> : 記事のサムネイル画像と記事のタイトルの両方を囲む

<div> : 記事のサムネイル画像表示部
    <div></div>
</div>

<div> : 記事のタイトル表示部
    タイトル表示
</div>

</div>
</a>


LinkWithin は1 つの記事へのリンク(a タグ) の上にマウスカーソルが乗った時に、JavaScript によって 背景色を変更しているので、1 つの記事へのリンク(a タグ) に対して、1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）の高さを指定しないと、背景色の表示範囲がおかしなことになってしまいます。

height: 110px; を指定しなかった場合の、
1つの関連記事にマウスを乗せた時の背景色の変化

記事タイトルの背景部分しか色が変更されていない

そのため、1つの関連記事（記事のサムネイル画像と記事のタイトルのセット）の高さを指定して、背景色の表示範囲を1つの関連記事の高さと一致させています。


}

余談

clear: both; と  height: 110px; を指定しなかったところ、階段状の関連記事の表示を作り出すことが出来ました！

LinkWithinの関連記事一覧を階段状に表示できた！？偶然の産物です

.linkwithin_posts > a > div {

Linkwithin が表示する各関連記事の「記事のサムネイル画像と記事のタイトルのセット」へスタイルを適用します。

    width: 100% !important;

標準では、1 つの関連記事の表示領域の幅は、106px に固定されていました。

そのため、既に適用されている width: 106px; が有効になっていると関連記事の幅が制約されるため、記事を目いっぱい広げるために、width: 100% を !important によって強制的に適用しています。

    height: auto !important;

標準では、1 つの関連記事の表示領域の高さは、165px に固定されていました。

そのため、既に適用されている height: 165px が有効になっていると関連記事の高さが必要以上に高くなるため、記事のサムネイル画像が連続して並ぶように、height: auto を !important によって強制的に適用しています。


}

.linkwithin_posts > a > div > .linkwithin_img_0 {

Linkwithin が表示する各関連記事の記事のサムネイル画像（正確にはサムネイル画像を納める div タグ）へスタイルを適用します。

    float: left;

記事のサムネイル画像と記事のタイトルを横に並べるために、 float: left; を適用しています。

    margin-right: 10px !important;

記事のサムネイル画像と記事のタイトルの間に少し隙間が出来るようにしています。

既に適用されている margin: 0; の効果により上下左右すべてのマージンが 0 になっているため、記事のサムネイル画像の右側に 10px の隙間が出来るように、margin-right: 10px を !important によって強制的に適用しています。


}

結果

「LinkWithinの関連記事一覧を縦表示するためのスタイルシート」を反映させると、次のように、いままで横方向に表示されていたLinkWithinの関連記事の一覧を、縦方向に表示することができました！

LinkWithin の関連記事一覧
CSS を適用することによって、縦方向に表示されるようになった

関連記事が横方向に並んでいた時には、小さなスペースに関連記事のサムネイル画像とタイトルがおさめられていたため、その部分の情報密度が高くなっていましたが、関連記事を縦方向に並べることで、この部分の情報密度を下げることが出来ました。

また、記事を上から読んでいったときに、目線を上から下におろすだけで、関連記事の一覧に目を通すことが出来るようになったため、見やすくなったのではないかと思います。


これで、ブログ内の直帰率が下がるように改善されればうれしいのですが、どうなることやら。

しばらく様子を見てみたいと思います。

関連記事

LinkWithinの関連記事一覧を階段状に表示できた！？偶然の産物です - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-stepwise.html

LinkWithinのフォントを変える！cssのfont-familyを強制適用 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html

LinkWithinのフォントサイズを変える！cssのfont-sizeを強制適用 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font-size.html