関連記事プラグイン（YARPP）の表示がおかしいので修正してみる

こんにちはイケメンです。
高機能で便利なWordpressの関連記事表示プラグイン「YARPP」。サムネ付きの記事をクリックだけで表示してくれるので使っています。ところが表示がどうも怪しい。そこで表示の修正過程を追跡調査してみました。

インストールや設定方法は多くのブログで紹介されています。あらためて書いてもしょうがない気がするので、私は問題点と解決過程で進みます。

まずはがっかりな問題点の確認

これは見ていただければ一目瞭然。明らかにイランの選手を殴っています（以下略

ではなくて上下の間隔がズレています。上は均等配置。二段目は左寄せという感じ。美しくありませんよね？　均等配置が美しいように思えますが、数が足りない時の処理が疑問なので、最悪左寄せでも我慢します。

現状を確認するためにHTMLを見る

ソースを確認してみます。

<div class='yarpp-related'>
<h3>Related posts:</h3>
<div class="yarpp-thumbnails-horizontal">
<a class='yarpp-thumbnail' href='https://overfree.gunmaonline.com/archives/294' title='FL Studio サイドチェインでワウワウ言わせる（１）'>
<img width="120" height="120" src="https://overfree.gunmaonline.com/wp-content/uploads/2013/06/444444_20130527164128-120x120.png" class="attachment-yarpp-thumbnail wp-post-image" alt="444444_20130527164128" /><span class="yarpp-thumbnail-title">FL Studio サイドチェインでワウワウ言わせる（１）</span></a>
<a class='yarpp-thumbnail' href='https://overfree.gunmaonline.com/archives/420' title='FL Studio The Project Picker　かっこ良すぎる'>
<img width="120" height="120" src="https://overfree.gunmaonline.com/wp-content/uploads/2013/06/hhhhhhh-120x120.png" class="attachment-yarpp-thumbnail wp-post-image" alt="hhhhhhh" /><span class="yarpp-thumbnail-title">FL Studio The Project Picker　かっこ良すぎる</span></a>
<a class='yarpp-thumbnail' href='https://overfree.gunmaonline.com/archives/371' title='FL Studio の BassDrum を素人がいたずらしてみた'>
<img width="120" height="120" src="https://overfree.gunmaonline.com/wp-content/uploads/2013/06/1111222qww-120x120.png" class="attachment-yarpp-thumbnail wp-post-image" alt="1111222qww" /><span class="yarpp-thumbnail-title">FL Studio の BassDrum を素人がいたずらしてみた</span></a>
<a class='yarpp-thumbnail' href='https://overfree.gunmaonline.com/archives/598' title='FL Studio でオートメーションをまとめてみた'>
<img width="120" height="120" src="https://overfree.gunmaonline.com/wp-content/uploads/2013/06/12322-120x120.png" class="attachment-yarpp-thumbnail wp-post-image" alt="12322" /><span class="yarpp-thumbnail-title">FL Studio でオートメーションをまとめてみた</span></a>
<a class='yarpp-thumbnail' href='https://overfree.gunmaonline.com/archives/808' title='FL STUDIO &amp; KORG microKEY-25BKRDをツナグ'>
<img width="120" height="120" src="https://overfree.gunmaonline.com/wp-content/uploads/2013/06/20130222181149abf-120x120.png" class="attachment-yarpp-thumbnail wp-post-image" alt="20130222181149abf" /><span class="yarpp-thumbnail-title">FL STUDIO &#038; KORG microKEY-25BKRDをツナグ</span></a>
略

ぱっと見は yarpp-thumbnails-horizontal とか yarpp-thumbnail あたりが怪しい感じです。

そこでそれぞれのCSSを確認してみましょう。

.yarpp-thumbnails-horizontal .yarpp-thumbnail {
  border: 1px solid rgba(127,127,127,0.1);
  width: 130px;
  height: 170px;
  margin: 5px;
  margin-left: 0px;
  vertical-align: top;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail,
.yarpp-thumbnail-default, .yarpp-thumbnail-title {
  display: inline-block;
}

基本的にこの部分を修正していけば良さそうです。

配置のズレはテンプレートの仕業

上のCSSを見ると均等配置に指定されている部分は確認できません。どうやら別の指定が影響しているようです。chromeのデベロッパーツールで確認してみると、テンプレートの方で使っている text-align: justify; が影響しているようです。そこでテンプレートのCSSに以下を加えました。

.yarpp-thumbnails-horizontal {
	text-align: left;
}

これで各枠が左寄せに修正されることを確認しました。

ついでに、よく見ると画像のまわりに線があり、画像とタイトルを含んだ全体にも薄い線があります。若干くどい感じがしたのでスッキリさせてみました。

#content .yarpp-thumbnail img {
	padding: 0px;
	border: none;
}