• 2014.5.15
• WordPressプラグイン
• 2 comments

Yet Another Related Posts Plugin(YARPP)を更新したらCSSが崩れたので修正した

WordPressで関連記事を表示させるプラグインといえば、「Yet Another Related Posts Plugin」が人気ですよね。使われてる方も多いと思います。

何日か前に、そのYet Another Related Posts Plugin（YARPP）の更新があったので、更新したら、関連記事のデザインが崩れてしまいました(泣)

自分でCSSをさわった記憶なんてなくて、なんでだ～(# ﾟДﾟ)と1人嘆いていましたが、よく見ると、原因は、YARPPに「yet-another-related-posts-plugin/style/related.css」というCSSが追加されていた事でした。

このCSSは、確認したところ、YARPPのVer.4.2以降に追加されているみたいで、元々テンプレートで設定されているCSSと、追加されたYARPPのCSSが重複して崩れてしまったみたいです(汗)

Before

After

少しわかりにくいのですが、関連記事の枠のmarginがなくなって、カラム幅いっぱいまで広がってしまっています。そして、「関連記事」という文字が大きく太字になっていました。記事タイトルは、大きさは変わらなかったのですが、太字になってしまっていました。

ということで、yet-another-related-posts-plugin/style/related.cssをさわって、元々設定していたデザインに修正しました。

yet-another-related-posts-plugin/style/related.cssを開く

まずは、プラグイン編集からYet Another Related Posts Pluginを選択してください。

すると、画面の右側にYARPPに関するファイルがズラーっと表示されますので、下の方にあるyet-another-related-posts-plugin/style/related.cssを選択してください。

このファイルを修正すればいいのですが、ここからは私のブログの場合で、リスト表示をしている場合になります。ご自分のブログで該当する箇所を修正してくださいね。

marginを指定する

関連記事の枠がカラム幅いっぱいまで広がったので、marginを指定しなおしました。上下が1em、左右が0となっていましたが、わかりやすく上下左右とも20pxとしました。

変更前

.yarpp-related {
    margin: 1em 0 !important;
}

変更後

.yarpp-related {
    margin: 20px !important;
}

記事タイトルの太字をやめる

.yarpp-related a がリンクの部分だとわかるので、font-weightをboldからnormalにしました。

変更前

.yarpp-related a{
    text-decoration: none !important;
    font-weight: bold !important;
}

変更後

.yarpp-related a{
    text-decoration: none !important;
    font-weight: normal !important;
}

関連記事という見出しタイトルを修正する

関連記事という見出しタイトルは<h3>にしているので、h3と書いてる部分を修正しました。font-weightをboldからnormalにして、font-sizeを125％から14pxと、自分がわかりやすい単位で設定しました。

paddingも左側が0になっているので、枠から少し離すように20pxとし、下の5pxは0でもいいと思ったので、0にしました。

変更前

.yarpp-related h3{
    font-weight: normal !important;
    padding: 0 0 5px 0 !important;
    font-size: 125% !important;
    text-transform: capitalize !important;
    margin: 0 !important;
}

変更後

.yarpp-related h3{
    font-weight: normal !important;
    padding: 0 0 0 20px !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    margin: 0 !important;
}

修正が上手くいかない場合は、コメントアウトすると大丈夫だと思います。始まりに「/*」と終わりに「*/」をつけると、このCSSでの設定が無効になるので、テンプレートでの設定に戻ってくれます。

.yarpp-related h3{
    font-weight: normal !important;
    /* padding: 0 0 5px 0 !important; */
    font-size: 14px !important;
    text-transform: capitalize !important;
    margin: 0 !important;
}

これで、無事に元のデザインに戻すことができました。

私は、プラグインの更新が出たらすぐさま更新しちゃうタイプなのですが、更新したあとのことなんてほとんど気にしたことがありませんでした(*ﾉ∀ﾉ)更新しっぱなしというのはよくないですね。反省です。

ちなみに、このブログで使っているTCDテンプレート「AN」では、プラグインを使わなくても元々関連記事が表示されるようになっていますので、普段はYARPPプラグインを使っていません。