STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

      2014/08/06

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になったページは、訪問者のユーザビリティー的にも難があります。ブログデザインの差別化を図る意味でも、気になるところはどんどんカスタマイズしちゃいましょう!

related-article-sidebyside-catch

大人気のWordPress無料テーマの「STINGER3」。わたしも愛用させて頂いていますが、デザイン的に気になっていたところのひとつに「関連記事」の表示があります。最初は特に気にならなかったのですが、関連記事が増えていくと、ここの表示がタテに長くなり過ぎちゃうんですよね。

related-article-sidebyside-before

けどまぁ、百歩譲ってPCサイトはまだいいとしても、スマホサイトになると「鬼フリック」しないと下まで表示できません。

related-article-sidebyside-smp

こんな感じの関連記事の固まりが、長々と下に続きます……。これでは「もうええわ、長いっ!」ってな感じで、途中で離脱されてしまう要素になっちゃいますよね。あと、ほかのブロガーさんのサイトを見てみても、やっぱり皆さん「関連記事」の表示はスッキリと横並びにされてらっしゃる。

ということでわたしも、「関連記事」の表示をこんな感じで横並びにカスタマイズしてみましたよ!

related-article-sidebyside-after

今回は、このカスタマイズ方法をご紹介します。

スポンサーリンク

「関連記事」横並びカスタマイズでやったこと

  • 「関連記事」表示数の変更
  • dl、dt、ddタグを削除し、ul、li、divタグに変更
  • スタイルシートの調整

以上が、今回のお品書きになります。3つとも、とても簡単な作業になりますのでご安心ください。では早速、順に見ていきましょう。

「関連記事」横並びカスタマイズ全手順

「関連記事」表示数の変更

先ず「single.php」に変更を加えます。(変更前のバックアップを忘れずに!)既存のコードの中に、下記のような関連記事の表示数が設定されている箇所があります。もし見つけるのが難しい場合は、「posts_per_page」でコード内を検索してみてください。

【変更前】

これは、関連記事の表示数が10に設定されているという意味になります。今回わたしは、横4×縦2の8記事の表示にしたいと思いますので、

【変更後】

このように、「10」を「8」に変更します。

dl、dt、ddタグを削除し、ul、li、divタグに変更

同じく「single.php」内に、以下のようなコードがあります。

【変更前】

これを、以下の4つの変更を行います。

  • まず、<dl>タグを削除し、<ul>と<li>のタグに変更します。
  • 次に、<dt>タグを削除し、<div class=”related-article-thumb”>のタグに変更します。</dt>も</div>に変更することをお忘れなく!
  • さらに、<dd>タグを削除し、<div class=”related-article-title”>のタグに変更します。こちらも</dd>を</div>に変更することをお忘れなく!
  • 最後に、<p class=”basui”>と、<p class=”motto”>の、pタグで囲まれているところは削除しました。

すべて変更を終えると、以下のようなコードになります。

【変更後】

スタイルシートの調整

最後は、スタイルシートの調整ですね。「style.css」の最下部に、以下のコードを追加します。

あ、幅(width)や高さ(height)は、適時調整してくださいね。あと個人的に、記事タイトル部分の設定(.post h4)が気に入らなかったので、以下のように変更しています。もし見つけるのが難しい場合は、「post h4」でコード内を検索してみてください。

【変更前】

【変更後】

変更点としては、font-sizeを14pxに落として、line-height:も2pxに落としました。あと、グレーのbackground-colorを削除しました。まぁ、このへんの調整はお好みでどうぞ。

あと、スマホサイト用の対応も必要なので、「smart.css」の最下部にも、以下のコードを追加します。

ちなみにスマホサイトは、style.cssの設定からwidthの設定などを調整し、横2×縦4の8記事の表示にしています。あともちろん、記事タイトル部分の設定(.post h4)も、style.cssと同様に変更しています。

変更前と変更後の比較

以上で、今回のカスタマイズ作業は終了です。おつかれさまでした!念のためもう一度、変更前と変更後のキャプチャーを貼っておきますね。

【変更前】
related-article-sidebyside-before

【変更後】
related-article-sidebyside-after

さいごに

如何でしょうか?必要以上に縦長になったページは、訪問者のユーザビリティー的にも難があります。あとは最近STIGER3を使っているブロガーさんも多いので、少しでもデザインの差別化が図れるように、気になるところはどんどんカスタマイズしちゃいましょう!

こちらの記事もいかがですか?

そのほか、STINGER3のカスタマイズについてまとめてみました。

わたしがSTINGERでカスタマイズしたことをまとめてみた

 - ブログカスタマイズ

スポンサーリンク

  関連記事

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …