WordPress Related Postsは、記事下に関連記事を表示するWordPressのプラインです。デザインもいくつか用意されていて、設定もかんたん。私はその中のVertical (Large)をずっと使用してきました。
ところがGoogle AdSenseの関連コンテンツユニットの利用が許可されたことで、関連記事だらけになってもどうかと思い、このプラグイン自体を引き続き使うかどうかを考えるようになりました。
その答えはまだ保留中です。（5/19 追記:現在は表示していません）
でも今後も使うなら、今までのデザインではなく、このサイトで使用しているテーマ・ハミングバードに馴染むようなデザインにしたいと思い、「Advanced settings」に用意されている「Enable custom CSS」を利用して、カスタマイズしました。
無事完成したので、その手順をご紹介していきます。
お手本にしたのはコメント下のRECOMMNDの部分です。
なおハミングバードとは、「誰もが簡単に美しいデザインのサイトを」で知られるWordPressでも特に人気が高い有料テーマです。
完成図
以下が完成図です。現在8記事を表示しています。
Vertical (Large)のサムネイルサイズは150×150の正方形です。Vertical (Large)以外を見ても、サイズが違うだけで全てが正方形。しかしハミングバードのサムネイルは横長の長方形。そこを中心にカスタマイズ作業を進めていきました。
PC
※ IE,charm,safari,firefoxで確認済み
iPhone 縦
スマホでの表示はちょっと手こずりましたが、以下のとおり。iPhone7Plus、iPhone5s、Android Oneで確認しています。
iPhone 横向き
PC用のカスタマイズ
「Enable custom CSS」にチェックを入れると以下のように記述された、非常にこざっぱりとした画面が表示されます。
related_post_title {
}
ul.related_post {
}
ul.related_post li {
}
ul.related_post li a {
}
ul.related_post li img {
}
}
ul.related_post {
}
ul.related_post li {
}
ul.related_post li a {
}
ul.related_post li img {
}
サムネイル
1.サムネイルサイズを変えるのは「ul.related_post li img」の部分。
ul.related_post li img {
width: 174px ;
height: 97px ;
}
width: 174px ;
height: 97px ;
}
2.その横幅に合わせて「ul.related_post li」も以下のように変更します。
ul.related_post li {
width: 174px ;
}
width: 174px ;
}
3.サムネイルと記事タイトルをきれいに揃えたい場合は「a.wp_rp_title」に以下を記述。
a.wp_rp_title {
display: block ;
}
display: block ;
}
4.画像間に空間を増やしたい場合は、さきほど（2.）の「ul.related_post li」に以下を追加。フォントサイズの指定をする場合もここに記述します。お使いのテーマに合わせて数字を変えてみてください。
ul.related_post li{
width: 174px ;
margin: 10px 7px 10px 0px ;
font-size: 13px ;
font-weight: bold;
}
width: 174px ;
margin: 10px 7px 10px 0px ;
font-size: 13px ;
font-weight: bold;
}
5.これは使用するテーマにもよりますが、もし記事の最後とこのプラグインとの間に空白を設けたい場合は以下を記述。
.wp_rp_content {
display: inline-block ;
margin-top: ○○px ;
}
display: inline-block ;
margin-top: ○○px ;
}
あとは微調整!
サポートフォーラムでも圧倒的にサムネイルに関する質問が多かったのでキモだけをご紹介しました。
このあたりまでやっていけば、だいたいの骨格ができてきます。あとは使用しているテーマに合わせて、フォントサイズやカラー、リンクのスタイルなどを変更していきます。
なお「あなたにおすすめの記事」と書かれたタイトル部分のカスタマイズはこちらを参考にしました。
またあらかじめ用意されているcssファイルを見たい場合は「wp-content/plugins/wordpress-23-related-posts-plugin/static/themes」の中に各cssファイルが格納されています。それをヒントに作業を進めるのが一番手っ取り早いかも。
スマホ用のカスタマイズ
スマホ用は以下を記述しました。
/* スマホ表示 480以下*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
ul.related_post li {
display: block ;
width: auto ;
clear: both ;
}
ul.related_post li a:nth-child(1) {
float: left ;
margin-right: 5px ;
}
ul.related_post li a:nth-child(2) {
font-size: 13px ;
padding: 2px 0 10px 110px ;
display: block ;
height: 90px ;
}
ul.related_post li img {
width: 145px ;
height: 81px ;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
ul.related_post li {
display: block ;
width: auto ;
clear: both ;
}
ul.related_post li a:nth-child(1) {
float: left ;
margin-right: 5px ;
}
ul.related_post li a:nth-child(2) {
font-size: 13px ;
padding: 2px 0 10px 110px ;
display: block ;
height: 90px ;
}
ul.related_post li img {
width: 145px ;
height: 81px ;
}
}
「max-wdth:480px」とは指定したサイズの最大値で、これより小さければ上記のスタイルが適用され、これを超えるとPC用のスタイルが適用されます。
もっと細かく指定するなら
スマホ・タブレットのサイズ指定
- 480px以上に「@media screen and (min-width:480px) 」を
- 768px〜1024pxは「@media screen and (min-width:768px) and ( max-width:1024px) 」を
- 1024px以上は「@media screen and (min-width:1024px)」を
- 縦なら「@media screen and (orientation:portrait)」を
- 横なら「@media screen and (orientation:landscape)」を
という具合に、それぞれスタイルを指定します。
そこまでやれば完璧かもしれませんが、このサイトの閲覧者はスマホユーザーが圧倒的に多かったため、私はそこまでは指定せず、スマホのみに留めました。よってタブレットではPCと同じ表示になります。
最後に
「ハミングバードに馴染むように」というのが今回のカスタマイズの目的でしたから、「Wordpress Related Posts,カスタマイズ,ハミングバード」という具合に、いくつかキーワードを入れて調べてみたのですが、どこにもありませんでした。
まぁ、関連記事を表示する機能がもともと備わっているからハミングバードユーザーはあまり使用してないのか、あるいはプラグイン元々のデザインで満足しているのか、そのあたりはよくわかりません。
でも今回のカスタマイズは、他のテーマを使用している方にもきっと役立つのではないかと思い記事にしてみました。以上です。
参考サイト
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitter でvioletをフォローしよう！
Follow @violet2005About The Author
