WordPress Related Posts カスタマイズ CSS

WordPress Related Postsはボタンをポチポチするだけで、

ある程度のカスタマイズができますよね。

 

でも、せっかくCSSカスタマイズする機能がありますし、

自分のブログの見栄えをもっと良くしたい人も多いハズ。

 

今回は、WordPress Related Postsの見出しをCSSでカスタマイズ!!

関連記事の見出しがダサいと・・・

WordPress Related Postsのプラグインを使う理由は、

アクセスしてきたユーザーにもう1記事追加で読んでもらいたいからですよね。

でも、『人は見た目が9割』なんて言葉が有名な通り、

ブログやサイトの見栄えがパッとしなければ訪問者は長居してくれません。

 

基本的には、WordPress Related Postsの設定画面でポチポチするだけで、

それなりにキレイな関連記事表示を実装できます。

しかしながら、『ブログ・サイトも見た目が9割』とは言い切れませんが、

細部までこだわってユーザーの心を掴んで離さないデザインに仕上げたい人も多いハズ。

 

もしも、

 

WordPress Related Posts カスタマイズ CSS

 

↑の画像のような関連記事のアピールですと、ちょっと物足りないですよね。

もう少しパンチの効いたデザインによって、関連記事が読者の目に止まるようにしたいところ。

 

そこで、次の小見出しでは当ブログの設定を例にして、

WordPress Related Postsの見出しをCSSでカスタマイズする方法を解説します。

WordPress Related PostsのCSSでカスタマイズ

ということで、WordPress Related Postsの見出しをCSSでカスタマイズしますが、

基本的には以下の説明をコピペしてくだけである程度はイジれるはずです。

 

まず、WordPress Related Postsの『Advanced Settings』をプラグインで開きましょう。

『▽』をクリックして開く。

WordPress Related Posts カスタマイズ CSS

 

最初のThemesやLayoutの設定はこんな感じにしています。

個人的には見出しが重要であり、関連記事のレイアウトなどは

あらかじめ用意されているモノを選べば十分だと思っています。

WordPress Related Posts カスタマイズ CSS

 

続いてのCustomize(カスタマイズ)では、以下のように設定。

今回のメインは、【1. Enable custom CSSにチェックを入れる】のと、

【2. CSSコードを貼り付ける】ことです。

WordPress Related Posts カスタマイズ CSS

 

ここで、当ブログが使用しているCSSコードはこんな感じです。

 

↑のコードを真似したり、カラーコードを変更したりすれば、

関連記事をアピールする見出しをカッコ良くデザインできますよ。

 

ここで、オススメのツールとして、

 


『カラーコードを探しやすい』

http://www.colordic.org/

 

『見出しのCSSコードがポチポチだけで書ける』

http://web-dou.com/tool/css_gen_h.php


 

の2つのリンク先を利用しましょう。

WordPress Related Postsのinit.phpも修正

以上までで、関連記事の見出しを綺麗にカスタマイズできるのですが、

デフォルト状態では見出しが<h3>~</h3>タグになっています。

 

SEO的に大きな影響は無いと思いますが、ちょっと気持ち悪いですよね。

・『関連記事はこちら。』

・『もう1記事どうぞ。』

・『こちらの記事も良く読まれています。』

なんていうワードがh3タグで検索エンジンにアピールしていたらイヤです。

 

Googleの技術も進化してきていて、

h3タグなんかそこまで関係ない可能性も無きにしも非ずですが、

念のためWordPress Related Postsの見出しコードを修正しておきましょう。

WordPress Related Postsの見出し修正

まず、【1. インストール済みプラグイン】 ⇒ 【2. WordPress Related Postsの編集】を選択。

WordPress Related Posts カスタマイズ CSS

 

次に、【init.php】をクリック。

『Ctrl+F』ですぐに見つかります。

WordPress Related Posts カスタマイズ CSS

 

続いては、【h3でCtrl+F検索】で以下の赤枠のコードを見つけます。

WordPress Related Posts カスタマイズ CSS

 

そして、

<h3> ⇒ <p>

</h3> ⇒ </p>

という変更をします(合計2箇所)。

WordPress Related Posts カスタマイズ CSS

 

以上まで完了したら、左下の【ファイルを更新】ボタンを押して終了です。

WordPress Related Posts カスタマイズ CSS

h3タグに対して、ここまで神経質になる必要はないと思いますが、

念のため今回説明したコード修正をしておくと良いでしょう。

 

正直なところ、こういったSEO対策は迷信染みていますが・・・