【WP Popular Posts】レイアウト変更：サムネイルにタイトルを重ねて表示する方法

簡単に人気記事をランキング表示できるプラグインWordPress Popular Postsの表示を画像にしてタイトルを画像の上に重ねて表示する方法をご紹介します。

WordPress Popular Postsは、人気記事のランキング表示を簡単に設置できるWordPressの便利なプラグインです。

訪問者にサイトやブログ内を循環してもらうことはSEO的にも有利で、人目を惹きつける人気記事ランキングがそのために役立ちます。

今回は、アイキャッチ画像をサイドバーの横幅いっぱいに表示してその上にタイトルを重ねるソースと方法をご紹介しましょう。

注意点

テーマファイルのソースを改変しますので、失敗するとサイトが表示されなくなる可能性があります。

必ず、ファイルのバックアップを取っておきましょう。

▼バックアップに必要なファイル

style.css

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

▼この記事の環境

WordPress 4.4.2-ja
WordPress Popular Posts 3.3.3
STINGER 7
Google Chrom

サムネイルにタイトルを重ねる：CSS

下記のソースをWordPressの管理画面の［外観］-［テーマ編集］でstyle.cssに直接コピペするか、［外観］-［CSS編集］で、CSS スタイルシートエディターにコピペします。

/* WPPカスタム（画像にタイトルを重ねる） */
.wpp-img2 {
	position:relative;
	display:block;
	/* 画像と同じサイズを指定 */
	width:300px;
	height:169px;
	margin:5px;
	padding:0;
	background-color:#000;
}
.wpp-img2 img {
	z-index:0;
	margin:0;
	padding:0;
}

.wpp-img2 a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

.wpp-img2 a:hover {
	color: #b22222;
}
.wpp-img2 img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.img_title {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:1;
	margin:0;
	padding:5px;
	background-color:#000;
	width: 290px;
}
.img_title a:hover {
	color:#b22222;
}
.opa  {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

wpp-img2とimg_titleのクラス名は、重複するものがなければ何でもいいです。

画像と同じサイズを指定下にアイキャッチ画像のサイズと同じ縦横幅を指定します。

	/* 画像と同じサイズを指定 */
	width:300px;
	height:169px;

高さ169pxは、サイドバーの横幅300pxから16：9で考えた場合のサイズで、これはYouTubeの動画やアイキャッチのサイズと同じ比率です。

人気の巨大サイトが使う比率だから何か根拠があるんだろう...って感じで設定してるだけです。

あなたのサイトで使用しているアイキャッチのサイズを指定してください。

サムネイルにタイトルを重ねる：HTML

WordPressの管理画面の［外観］-［ウィジェット］で、WordPress Popular Postsのウィジェットを下記の設定にして［保存］します。※下記以外はお好みで。

Posts settings：Display post thumbnailにチェック
HTML Markup settings：Use custom HTML Markupにチェック

［保存］をクリックすると、Set size manuallyとUse custom HTML Markupの入力画面が表示されます。

Set size manuallyに、アイキャッチサイズと同じ数値を入力します。※先のCSSとも同じでなければ表示が崩れます。

Use custom HTML Markupの枠に各ソースをコピペします。

Before / after Popular Posts:左枠に下記のソース。※自分で変更していなければデフォルトで入力されています。

<ul class="wpp-list">

Before / after Popular Posts:右枠に下記のソース。 ※自分で変更していなければデフォルトで入力されています。

</ul>

Post HTML Markup:に下記のソースを入力して［保存］をクリック。

<div class="wpp-img2">{thumb}
<p class="img_title opa">{title}</p>
</div>

先に貼り付けたCSSでクラス名を変更した場合は、それぞれのclassを変更してください。

以上で終了！

アクセスアップにお役立てください。