Jetpackの関連記事表示をCSSとかでいろいろと変えてみる

どうもgeradeausです。

SNSの共有ボタンを設置してくれたり、関連記事を表示してくれたりと何かと便利なJetpack。

ありがたく利用しているのですが、デフォルトだと

jetpack-kanren1こんなふうに表示されて非常に味気ない。。。

文字も「関連」ってちっちゃく書かれてるだけでみすぼらしいし。

みんながやってるみたいに画像付きで綺麗に表示したいってことで、いろいろやってみました。

 

スポンサーリンク

画像の追加方法

これは非常に簡単です。まずはダッシュボードを開き設定>表示設定へと進みます。

jetpack-kanren2

 

すると関連記事の項目に

視覚的インパクトがある大きめのレイアウトを使うと書いてあるので、チェックボックスにチェックを入れます。

jetpack-kanren3

 

画像の表示についてはこれだけで完了。jetpack-kanren4あんなに寂しかった関連記事が、画像があるだけでこんなに華やかになりました!

 

CSSで文字を変える

CSSを追加、書き換える前に現状のHTMLを理解しておきます。

Jetpackで関連記事の表示機能をオンにすると以下のHTMLコードが生成されます。

<div id="jp-relatedposts" class="jp-relatedposts" style="display: block;">
	<h3 class="jp-relatedposts-headline"><span id="i"><em>関連</em></span></h3>
	<div class="jp-relatedposts-items jp-relatedposts-items-visual">
		<div class="jp-relatedposts-post jp-relatedposts-post0 jp-relatedposts-post-thumbs" data-post-id="819" data-post-format="false">
			<a href="記事URL" title="記事タイトル" rel="nofollow"><img src="サムネイルURL"></a>
			<h4 class="jp-relatedposts-post-title"><a href="記事URL" title="記事タイトル" rel="nofollow">タイトル</a></h4>
			<p class="jp-relatedposts-post-excerpt">抜粋</p><p class="jp-relatedposts-post-context">ブログカテゴリー</p>
		</div>
	</div>
</div>

これをベースに修正を加えていきます。

関連の文字を変える

まずこれから取り掛かりましょう。上記のHTMLコードを見ると「関連」という文字がemタグで囲まれているのが分かります。emタグを非表示にし、代わりにその前にあるjp-relatedposts-headlineというクラスにafter要素を加えて任意の文字列を表示します。

まずemをdisplay: none;で非表示にします。

.jp-relatedposts em {
	display: none;
}

そしてafter要素で任意の文字列を表示。今回は”あなたにおすすめしたい関連記事”にしてみました。また文字サイズもデフォルトだと小さいので、ここで変更を加えておきます。

h3.jp-relatedposts-headline:after {
	font-size: 20px; /* 任意の大きさ*/
	line-height: 20px; /* 任意の大きさ*/
	color: #cd853f; /* 任意の色*/
	content: "あなたにおススメしたい関連記事";
}

 

カテゴリー表示を消す

カテゴリー名も記事タイトルの下に表示されていますが、かさばるだけなので消してしまいます。

消したい場合は以下のクラスを加えます。

.jp-relatedposts-post-context {
	display: none;
}

装飾を整える

さて今はこんな感じ。文字も大きくなり、カテゴリー表示も消えたことでスッキリしました。jetpack-kanren5

でも気になるのが文字と画像が微妙につまり過ぎている印象があること。なのでここから少し装飾していきます。

まずは「あなたにおススメしたい関連記事」の画像の間にボーダーを入れてデザインをすっきりさせます。

.jp-relatedposts-items-visual{
	border-top: 2px solid #f5deb3; /* ボーダーの指定*/
	padding-top: 7px; /* 文字と画像のスペース*/
}

このボーダーは微妙に荒業です。

 

次はサムネイル画像とその下に表示されるタイトルの間にスペースを作ります。

.jp-relatedposts-post h4{
	padding-top: 5px;
}

これで完成です。

最終的にこうなりました。

jetpack-kanren6だいぶ見やすくなったと思います。

まとめ

今回CSSで加えた修正は以下のようになりました。

.jp-relatedposts em {
	display: none;
}

h3.jp-relatedposts-headline:after {
	font-size: 20px; /* 任意の大きさ*/
	line-height: 20px; /* 任意の大きさ*/
	content: "あなたにおススメしたい関連記事";
	color: #cd853f; /* 任意の色*/	
}

.jp-relatedposts-post-context {
	display: none;
} 

.jp-relatedposts-items-visual{
	border-top: 2px solid #f5deb3;
	padding-top: 7px;
}

.jp-relatedposts-post h4{
	padding-top: 5px;
}

 

プラグイン自体じゃなくてCSSでデザイン変更するので、安全にデザインを変えられました。
ユーザーの方が記事を読み終わった後に目を移させる場所として、デザインを整えておいた方が、ユーザビリティが上がることでしょう。
参考にしていただけると幸いです。

投稿者: geradeaus

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA