初心者でも簡単!WPでSEO対策

無料で利用できるWordPressを使って、SEO初心者でも簡単に検索エンジン上位表示できる情報をお届けします。

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

 

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

 

スポンサードリンク

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

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

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

WPP画像にタイトルを重ねるカスタマイズ

注意点

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

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

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

  • 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-img2img_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にチェック
WPPアイキャチ画像にタイトルを重ねる/ウィジェット設定
 

[保存]をクリックすると、Set size manuallyUse custom HTML Markupの入力画面が表示されます。

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

WPPアイキャッチ画像にタイトルを重ねる/アイキャッチサイズ設定
 

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

  WPPアイキャッチ画像にタイトルを重ねる/HTML設定
 

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を変更してください。

以上で終了!

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

   
 

 - SEO対策プラグイン, WordPressカスタマイズ, 便利なプラグイン , , , , , , , , , , , , , , , , , , , , , , , ,