はみ出し回避！関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化

最近レスポンシブWebデザインにハマっている、あきら（@akrwnet）です（＾ｖ＾）

ブログなどで、記事の最後に関連記事を表示できるものって結構あるようですね。

その中でも多く使われているのが、LinkWithinやYet Another Related Posts Plugin (YARPP)になるのではないでしょうか。

調査したわけではないけど、よく見かけるし、そうだと思い込んでます・・・

簡単に導入できるLinkWithin

LinkWithinが一番簡単に導入できるのかな？

記事の最後に、こんな感じに関連記事を出すことができます。

導入方法などは、おつぱ（ @OZPA ）さんのブログを参考にしてみてください♪

一方、Yet Another Related Posts Plugin (YARPP)は、自由にカスタマイズすることができるのでCSSをいじれる人には向いているのかもしれません。

ただ自分のブログでは、記事数が少ないせいなのか？関連記事が表示されないページも多々あります。

その辺がデメリットなのかもしれませんが、しっかり表示されているところはこんな感じになります。

LinkWithinと変わんないじゃん！と思うかもしれませんが、実は同じようにしてあるんです。

同じようにカスタマイズするのには、goryugo（ @goryugo ）さんのブログを参考に

どんなもんか試しに両方導入してみました。

おぉぉ～いいんでないのコレ！

しかし、ここで問題発生です・・・

このブログのテーマは、レスポンシブWebデザインのiTheme2を利用しているので、iPhoneやiPad、Androidなどのスマートフォンでも、観覧する端末に応じて横幅が自動対応してくれるものになります。

試しに、ブラウザの横幅を変えてみると！？

完全にはみ出してしまっています。

iPod touchで確認しても無理でした。

とりあえず、カスタマイズの自由が効くYARPPのCSSを変更してみようかと思います。

この記事で表記されているCSSを使用していたので、width部分をを１００％に変更

するとすんなり、はみ出さずに下に落ちてくれました。

YARPPでは思い通りに出来たので、今度はLinkWithinを編集しようと思ったのですが、linkwithin/linkwithin.phpをみても、どこをイジっていいのかさっぱりわからず・・・

何か方法はないかと検索してみると、いい記事を発見しました！

この記事に解決策がありました。

普通CSSの方で変更ができないのですが、
以下のように「!important」を使えば強制的にCSSファイルのスタイルを当てはめることができます。

via: albatrus.com

実はこれだけでOK！

.linkwithin_inner{

width:100% !important;

}

height:270px;の部分は無くてもいいので、これだけのものを自分のブログで利用しているWordPressテーマ内のCSSに追加するだけでOK。

これで無事レスポンシブ対応が完了です♪

上にあるのがLinkWithin

下にあるのがYARPP

とりあえず、両方レスポンシブWebデザインに対応させることはできましたが、果たしてどちらのほうが良いのでしょうか？

LinkWithinは自動で勝手に挿入されますが、必ず設定してある数の関連記事を表示してくれます。

YARPPは表示させたい関連記事をある程度選ぶことができるので、自由度は高くなりますが、関連性の高い記事がなければ、ひとつも表示されないというデメリットもあります。

後は好みの問題でしょうか？

とりあえず、２つ設置してみて様子を見て見ることにしますかね。

ではまた(＾‐＾)ゝ