*

関連記事プラグイン(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 プラグインを作る(10)空室管理画面 A

さっそく空室管理画面を作っていきます。今回は画面設計中心です。部屋タイプの選択と、空き情報を更新する

記事を読む

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

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

記事を読む

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

空室情報のデータベース処理を一気に終えました。ごちゃごちゃしてきたので、もっとスッキリ書く方法が無い

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室カレンダー表示」

前回ネットで検索して見つけた calendar($year = "", $month = "") 関

記事を読む

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

前回の物を若干変更しながら、どんどん進んでいきたいと思います。今回は管理画面の表示内容について行って

記事を読む

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 ↑