あきらWebいろいろなことを試しているレビューブログホーム問い合わせホーム問い合わせはみ出し回避!関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化WebTwitterFacebook0はてブ6Pocket2LINEコピー2012.07.02最近レスポンシブWebデザインにハマっている、あきら(@akrwnet)です(^v^)ブログなどで、記事の最後に関連記事を表示できるものって結構あるようですね。(YARPP)になるのではないでしょうか。簡単に導入できるLinkWithinカスタマイズが自由なYARPP両方導入してみるといい感じだが・・・CSSの横幅widthを100%に変えて対応LinkWithinのCSS置き換え方法LinkWithinとYARPPはどちらが良いのか?簡単に導入できるLinkWithinLinkWithinが一番簡単に導入できるのかな?記事の最後に、こんな感じに関連記事を出すことができます。(YARPP)は、自由にカスタマイズすることができるのでCSSをいじれる人には向いているのかもしれません。自分のブログでは、記事数が少ないせいなのか?関連記事が表示されないページも多々あります。その辺がデメリットなのかもしれませんが、しっかり表示されているところはこんな感じになります。LinkWithinと変わんないじゃん!と思うかもしれませんが、実は同じようにしてあるんです。)さんのブログを参考に関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする両方導入してみるといい感じだが・・・どんなもんか試しに両方導入してみました。おぉぉ~いいんでないのコレ!しかし、ここで問題発生です・・・このブログのテーマは、レスポンシブWebデザインのiTheme2を利用しているので、iPhoneやiPad、Androidなどのスマートフォンでも、観覧する端末に応じて横幅が自動対応してくれるものになります。試しに、ブラウザの横幅を変えてみると!?完全にはみ出してしまっています。touchで確認しても無理でした。CSSの横幅widthを100%に変えて対応とりあえず、カスタマイズの自由が効くYARPPのCSSを変更してみようかと思います。関連記事プラグインYARPPをカスタマイズしてLinkWithin風にするこの記事で表記されているCSSを使用していたので、width部分をを100%に変更するとすんなり、はみ出さずに下に落ちてくれました。何か方法はないかと検索してみると、いい記事を発見しました!簡単に「関連記事」が作成できる、レコメンドエンジン「Linkwithin」を導入しよう!この記事に解決策がありました。以下のように「!important」を使えば強制的にCSSファイルのスタイルを当てはめることができます。!important;}height:270px;の部分は無くてもいいので、これだけのものを自分のブログで利用しているWordPressテーマ内のCSSに追加するだけでOK。これで無事レスポンシブ対応が完了です♪LinkWithinとYARPPはどちらが良いのか?上にあるのがLinkWithin下にあるのがYARPPとりあえず、両方レスポンシブWebデザインに対応させることはできましたが、果たしてどちらのほうが良いのでしょうか?LinkWithinは自動で勝手に挿入されますが、必ず設定してある数の関連記事を表示してくれます。YARPPは表示させたい関連記事をある程度選ぶことができるので、自由度は高くなりますが、関連性の高い記事がなければ、ひとつも表示されないというデメリットもあります。後は好みの問題でしょうか?とりあえず、2つ設置してみて様子を見て見ることにしますかね。レスポンシブスポンサーリンクシェアするTwitterFacebook0はてブ6Pocket2LINEコピーあきらをフォローするスポンサーリンクあきらあきらWeb関連記事Web無料で使えるスターサーバープラスでWordPressをインストールしてみたスタードメインで新たにドメインを取得したので、無料で利用できるスターサーバープラスでワードプレスをインストールしてみます。Liv...Web謎の文字化けでWordPressのアクセスが激減!?原因はプラグインの更新WordPressで運用しているブログのアクセスが急に少なくなった。login」ならセキュリティ対策が簡単にできる!ロリポップレンタルサーバーで運営しているWordPressサイトが第三者から攻撃されたということもあり、各レンタルサーバー会社でもパーミッションを変更するなどのセキュリティ対策が行われるようになりました。サーバー側で対応してくれると...WebBizVektorの新テーマ「Calmly」がリリースされたのでカラー変更して使ってみたWordPressのテーマとして利用しているBizVektorから「Calmly」という新テーマを選択できるようになったようなので、早速試してみました。BizVektorでは、テー...イベントWordCamp前日の会場準備をしてきました。明日(もう日付は今日か)WordCampが行われます。サムネイル画像を表示させてみた。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Mobileが超便利!2013.01.02イーモバイルの1年契約で2年使ったらその差額がいくらになるか2012.07.23タイトルとURLをコピーしました。