*

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

公開日: : WordPress

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

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

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

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

スクリーンショット 2013-06-19 21.29.21

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

現状を確認するために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 サイドチェインでワウワウ言わせる(1)'>
<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 サイドチェインでワウワウ言わせる(1)</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;
}

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

スクリーンショット 2013-06-19 22.06.01

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

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

スクリーンショット 2013-06-19 22.18.00


Sponsored Link


 
 

関連記事

WordPress用プラグインで使う宿泊予約用カレンダーをPHPで書くぜ

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作るシリーズで使う、空き部

記事を読む

WordPressのプラグイン開発を効率的にするフレームワークたち

Wordpressでプラグインを作っていて「フレームワーク使えないのかな?」と疑問を持ちました。そこ

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(8)セキュリティ対策

前回紹介したホームページを参考にソースを書き換えてみました。特に標準の option テーブルにレコ

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(6)初期設定画面

ここまでで、ひと通りの仕組みというか流れは理解できたような気がします。まずは初期設定画面から制作して

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(1)

初心者が、あらためて WordPress のプラグインを一から作る経過報告。たぶん連載記事ですね。途

記事を読む

Comment


  1. […] すればいいかわからず調べること30分。 この記事に出会う。 関連記事プラグイン(YARPP)の表示がおかしいので修正してみる 出会ったものの基本知識がないために、 どこを修正したら […]

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑