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

最近レスポンシブWebデザインにハマっている、あきら(@akrwnet)です(^v^)

 

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

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

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

 

スポンサーリンク

簡単に導入できるLinkWithin

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

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

2012-06-29_14h43_21

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

これとか
記事の終わりにサムネイル付きで関連記事を表示するブログパーツ「LinkWithin」を導入した

これとか
関連記事を表示するブログパーツ「LinkWithin」を任意の場所に入れる方法と「You might also like」を好きな文章に変える方法

 

カスタマイズが自由なYARPP

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

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

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

2012-06-29_15h27_46

 

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

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

関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする

 

両方導入してみるといい感じだが・・・

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

2012-06-29_16h11_16

おぉぉ~いいんでないのコレ!

 

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

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

 

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

2012-06-29_16h31_43

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

 

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

2012-06-29 16.30.21

 

CSSの横幅widthを100%に変えて対応

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

参考にしていた、goryugo( @goryugo )さんのブログ記事
関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする

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

2012-06-29_16h52_24

 

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

YARPP

 

LinkWithinのCSS置き換え方法

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

 

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

 

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

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

via: albatrus.com

 

 

2012-06-29_17h13_41

 

実はこれだけでOK!

 

.linkwithin_inner{

width:100% !important;

}

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

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

 

LinkWithinとYARPPはどちらが良いのか?

 

ブログエディターはWindows Live Writerが無難!?

上にあるのがLinkWithin

下にあるのがYARPP

 

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

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

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

 

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

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

ではまた(^‐^)ゝ

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] はみ出し回避!関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化 https://akrw.net/2012/07/432.html […]

  2. […] はみ出し回避!関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化 | Web | あきらWeb(スマホ&タブレット対応) […]