*

関連記事プラグイン(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の最強無料セット BizVektorテーマでWelcartを搭載してみる

かなり高機能でレスポンシブな無料のWordpressテーマ「BizVektor」。こいつに無料なのに

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(9)空室管理画面を考える

前回までで基本的なプラグインの制作方法を簡単に学びました。今回からは空室管理の画面を作ってみます。柔

記事を読む

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

前回のソースがイマイチだったので若干書き直しました。しかし、これで正しいのかも疑問なんですが、取り敢

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(5)メニュー階層化

今回はオリジナルプラグインの管理画面でのメニュー作成について。かなりすんなりと出来てしまったので短め

記事を読む

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

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

記事を読む

Comment


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

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

ど素人がYARPPの表示がおかしいので修正してみた | 甲乙人生珍道中 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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 ↑