
STINGER3の「関連記事」表示を横並びにカスタマイズしてみた
2014/08/06
STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になったページは、訪問者のユーザビリティー的にも難があります。ブログデザインの差別化を図る意味でも、気になるところはどんどんカスタマイズしちゃいましょう!
大人気のWordPress無料テーマの「STINGER3」。わたしも愛用させて頂いていますが、デザイン的に気になっていたところのひとつに「関連記事」の表示があります。最初は特に気にならなかったのですが、関連記事が増えていくと、ここの表示がタテに長くなり過ぎちゃうんですよね。
けどまぁ、百歩譲ってPCサイトはまだいいとしても、スマホサイトになると「鬼フリック」しないと下まで表示できません。
こんな感じの関連記事の固まりが、長々と下に続きます……。これでは「もうええわ、長いっ!」ってな感じで、途中で離脱されてしまう要素になっちゃいますよね。あと、ほかのブロガーさんのサイトを見てみても、やっぱり皆さん「関連記事」の表示はスッキリと横並びにされてらっしゃる。
ということでわたしも、「関連記事」の表示をこんな感じで横並びにカスタマイズしてみましたよ!
今回は、このカスタマイズ方法をご紹介します。
スポンサーリンク
「関連記事」横並びカスタマイズでやったこと
- 「関連記事」表示数の変更
- dl、dt、ddタグを削除し、ul、li、divタグに変更
- スタイルシートの調整
以上が、今回のお品書きになります。3つとも、とても簡単な作業になりますのでご安心ください。では早速、順に見ていきましょう。
「関連記事」横並びカスタマイズ全手順
「関連記事」表示数の変更
先ず「single.php」に変更を加えます。(変更前のバックアップを忘れずに!)既存のコードの中に、下記のような関連記事の表示数が設定されている箇所があります。もし見つけるのが難しい場合は、「posts_per_page」でコード内を検索してみてください。
【変更前】
1 |
'posts_per_page'=> 10, |
これは、関連記事の表示数が10に設定されているという意味になります。今回わたしは、横4×縦2の8記事の表示にしたいと思いますので、
【変更後】
1 |
'posts_per_page'=> 8, |
このように、「10」を「8」に変更します。
dl、dt、ddタグを削除し、ul、li、divタグに変更
同じく「single.php」内に、以下のようなコードがあります。
【変更前】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<dl> <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" /> <?php endif; ?> </a> </dt> <dd> <h4 class="saisin"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h4> <p class="basui"> <?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p> <p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p> </dd> </dl> |
これを、以下の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タグで囲まれているところは削除しました。
すべて変更を終えると、以下のようなコードになります。
【変更後】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul> <li> <div class="related-article-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" /> <?php endif; ?> </a> </div> <div class="related-article-title"> <h4 class="saisin"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h4> </div> </li> </ul> |
スタイルシートの調整
最後は、スタイルシートの調整ですね。「style.css」の最下部に、以下のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*--------------------------------- 関連記事の表示調整 --------------------------------*/ #topnews ul{ width: 155px; height: 260px; float: left; padding: 0px; list-style: none; overflow:hidden; zoom:1; } .related-article-thumb, .related-article-title{ padding: 0px !important; } |
あ、幅(width)や高さ(height)は、適時調整してくださいね。あと個人的に、記事タイトル部分の設定(.post h4)が気に入らなかったので、以下のように変更しています。もし見つけるのが難しい場合は、「post h4」でコード内を検索してみてください。
【変更前】
1 2 3 4 5 6 7 8 |
.post h4 { font-size: 16px; font-weight: bold; padding: 10px; margin-bottom: 20px; background-color: #f3f3f3; line-height: 28px; } |
【変更後】
1 2 3 4 5 6 7 |
.post h4 { font-size: 14px; font-weight: bold; padding: 10px; margin-bottom: 20px; line-height: 20px; } |
変更点としては、font-sizeを14pxに落として、line-height:も2pxに落としました。あと、グレーのbackground-colorを削除しました。まぁ、このへんの調整はお好みでどうぞ。
あと、スマホサイト用の対応も必要なので、「smart.css」の最下部にも、以下のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*--------------------------------- 関連記事の表示調整 --------------------------------*/ #topnews ul{ width: 130px; height: 260px; float: left; padding: 0px; list-style: none; overflow:hidden; zoom:1; } .related-article-thumb, .related-article-title{ padding: 0px !important; } |
ちなみにスマホサイトは、style.cssの設定からwidthの設定などを調整し、横2×縦4の8記事の表示にしています。あともちろん、記事タイトル部分の設定(.post h4)も、style.cssと同様に変更しています。
変更前と変更後の比較
以上で、今回のカスタマイズ作業は終了です。おつかれさまでした!念のためもう一度、変更前と変更後のキャプチャーを貼っておきますね。
【変更前】
【変更後】
さいごに
如何でしょうか?必要以上に縦長になったページは、訪問者のユーザビリティー的にも難があります。あとは最近STIGER3を使っているブロガーさんも多いので、少しでもデザインの差別化が図れるように、気になるところはどんどんカスタマイズしちゃいましょう!
こちらの記事もいかがですか?
そのほか、STINGER3のカスタマイズについてまとめてみました。
スポンサーリンク
関連記事
-
-
WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】
当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …
-
-
WordPressのテーマをSTINGER3に変更してみた
ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …
-
-
CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた
CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …
-
-
CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法
最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …
-
-
STINGER3のフッターを3カラムにカスタマイズしてみた
個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …
-
-
気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた
スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …
-
-
WordPressでメディアを挿入のリンク先を最初からなしに設定する方法
WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …
-
-
わたしがSTINGER3でカスタマイズしたことをまとめてみた
STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …
-
-
WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた
WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …
-
-
STINGER3のtitleタグ先頭に入る改行とスペースを消してみた
photo credit: Huasonic via photopin cc 実はさっき気がついてし …