nishi19 breaking news

スポーツでもっと楽しい未来を作る

LinkWithinをレスポンシブデザインに対応する方法

      2013/02/12

最近「dotinstall」の「レスポンシブなウェブサイトを作ろう」で勉強したことを活かして、nishi19 breaking newsでレスポンシブデザインに対応しきれていなかった箇所の修正を行いましたので、まとめておきます。

表示サイズを変えてもLinkWithinのエリアが回りこまない

nishi19 breaking newsでは関連記事を表示するためのプラグインとして「LinkWithin」を使っています。表示スピードが早いので今まで使っていたのですが、1つだけ問題がありました。nishi19 breaking newsはレスポンシブデザインに対応したWordPressのテーマを使用しているのですが、「LinkWithin」で表示させている記事は、レスポンシブデザインに対応していないため、スマホでみると、記事が回りこまずに途中で切れてしまいます。

画像とテキストが途中で切れてしまっている。

図1:画像とテキストが途中で切れてしまっている。

解決策

解決策として、横幅が可変になるように設定すればいいので、CSSに以下を追記します。

 
.linkwithin_inner{
 
width:100% !important;
 
}

※「!important」を設定しないと、なぜかCSSが効きませんでした。

LinkWithinは回りこむが、広告エリアが回り込まない

CSSを適用すると、以下のようになります。

図2:Google Adsenseを掲載したエリアが回りこまなくなってしまった。

ここで問題なのは、LinkWithinは回りこむようになりましたが、Google Adsenseを掲載した広告エリアが回りこまなくなってしまいました。Google Adsenseを掲載した広告エリアがきちんと回りこむように修正する必要があります。

解決策

Google Adsenceのエリアは、以下のように記述されていました。

<p>
<?php adsense_deluxe_ads('upper_comment_left'); ?>
<?php adsense_deluxe_ads('upper_comment_right'); ?>
</p>

pタグに横幅を指定していなかったので、以下のように修正する必要があります。

HTML

<p class=&quot;deluxe_ads&quot;>
<?php adsense_deluxe_ads('upper_comment_left'); ?>
<?php adsense_deluxe_ads('upper_comment_right'); ?>
</p>

CSS

 
.deluxe_ads{
 
width:100%;
 
}

修正を適用すると、以下のようになります。

LinkWithinエリアの下に、広告エリアが移動した。

図3:LinkWithinエリアの下に、広告エリアが移動した。

Zenbackの表示が変わってしまった。

これで一見落着かとおもいきや、よく見てみると「LinkWithin」の下のエリアに挿入していた「Zenback」の表示が崩れていました。
修正前は「画像(上)+リンクテキスト(下)」という作りになっていたのですが、「画像(左)+リンクテキスト(右)」に変わってしまいました。

修正前と修正後では表示が変わっている。

図4:修正前と修正後では表示が変わっている。

解決策

見た目が横並びになってしまったので、横並びではなく縦並びになるように、CSSに以下を追記します。

 
.zenback-module-item hasthumb{
display:block;
}

まとめ

プラグインや企業が提供しているツールを導入するととても便利なのですが、見た目を合わせようとするとカスタマイズが必要になることをあらためて実感しました。僕自身CSSはきちんと把握しているわけではないので、自分の知っている範囲で調整してみましたが、よりよい方法があれば、教えて頂けると嬉しいです。

おすすめ商品

今回の修正を機に、以下の様な本を買って、本格的に勉強しようかなぁと思った次第です。

 -