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

2014/04/10 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タグに変更
スタイルシートの調整

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

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

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

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

【変更前】

'posts_per_page'=> 10,

1	'posts_per_page'=> 10,

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

【変更後】

'posts_per_page'=> 8,

1	'posts_per_page'=> 8,

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

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

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

【変更前】

<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>

<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>

<?php the_title(); ?>

</a></h4>

<?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>

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

まず、<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タグで囲まれているところは削除しました。

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

【変更後】

<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>

<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>

<?php the_title(); ?>

</a></h4>

</div>

</li>

</ul>

スタイルシートの調整

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

/*---------------------------------
関連記事の表示調整
--------------------------------*/
#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;
}

/*---------------------------------

変更前と変更後の比較

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

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

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

さいごに

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

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

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

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

いちばんやさしい WordPress の教本人気講師が教える本格Webサイトの作り方

posted with ヨメレバ

石川栄和,大串肇,星野邦敏インプレスジャパン 2013-10-25

Amazon

Kindle

楽天ブックス

現場でかならず使われているWordPressデザインのメソッド

posted with ヨメレバ

相原知栄子,石川栄和,土肥牧人,鳥山優子,服部久純,星野邦敏,松田千尋,吉澤富美,大串肇,大曲仁,北村崇,後藤賢司エムディエヌコーポレーション 2013-10-15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PREV: 「note」との出会いは、新しいおもちゃを与えられた子どものようなワクワク感！
NEXT: 消費税増税をポジティブに！小銭貯金で気持ちを豊かにしよう