*

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

空室管理画面の2回目。今回は空室状況の入力欄と月が変わった時の処理を加えてみます。今回は一覧表示なの

記事を読む

WordPress のドメインごとサーバー移転が完了

要はドメインもそのままでレンタルサーバーだけ違う会社に移転したってことです。思ったよりカナリ簡単にで

記事を読む

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

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

記事を読む

WordPressのオリジナルプラグインにショートコード機能を持たせる

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る連載で、ショートコード

記事を読む

FC2ブログからワードプレスへ引越し(記事データ移行)

なんかAdsenseで怒られたので、これを機会に古いブログ記事を移転させてみました。思ったほど簡単だ

記事を読む

Comment


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

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

GoPro HERO7 Black 〜 インフルの熱で異常行動か?

何故か記憶に無いのですが GoPro HERO7 Blackが届きまし

軽量レバーロック式三脚を物色する美少女

旅行用三脚として活躍しているのは GITZO GT1542T と KT

激安中華な Bluetooth 5.0 イヤホンを買ってみたけど便利ね

前から気になっていた Bluetooth 5.0 イヤホン。 耳

2018年に購入したもので最も良かったものはミニスライダー

あけまして おめでとうございます 2019年 第一発目にご紹介す

Final Cut Pro X 用の無料 Calloutsプラグイン13種&12種がいい感じ

すっかり Final Cut ネタが続きますが皆様いかがお過ごしでしょ

→もっと見る




  •  

PAGE TOP ↑