[blogger]モバイルでもLinkWithinは出しておく！画面からはみ出さないようにするCSS設定。

元々のLinkWithinの設置についての記事を書いていないんですが、設置後のことについて。
LinkiWithinは、bloggerでも気軽に設置できて、サムネイルも表示されてありがとうって感じの物なんですが、記事を3つ以上表示する設定で取得設置すると、スマートフォンなどの、いわゆるモバイルテンプレートで見た時に、思いっきり横にはみ出してしまって、ん・・・ちょっと・・・となります。

今回は、カスタムCSSにモバイル表示時の設定を追加して、それをなんとかしようというお話です。

LinkWithin自体の基本的な設置については、ググってもらうか・・・また、そのうちに自分がした方法は書くかもしれませんが、ちょっと今回は置いておくとして。

変更前の状態

変更前は、LinkWithinは記事のすぐ下に、中央寄せで設置したかったので、

/* linkwithin */
.linkwithin_inner {
margin: -25px auto -30px auto !important;
}

このようなコードをカスタムCSSに追加していました。
これも、サムネイルを表示したけど、幅がうまく合わなくて、右側に余計な余白が出来ている場合などに設定するといい感じになります。

それで、これだけだと、モバイルテンプレートで見た時に、

こんな風に、３つ目の記事で切れてしまいます。
手元のiPod Touthだと、一応横に動かして見る事は出来るんですが、ちょっとあれな気持ちになるのは確かです。

なんとかしてる人発見！

そこでまたGoogleさんに聞いてみたところ、

やよこぶろぐ » LinkWithinのスマートフォンビュー(WPtouch)がはみ出るので直してみました！

こんな記事を見つけました。
記事の中で、さらにリンクしているところを見ると、

How to fix LinkWithin display problem on a WPtouch mobile WordPress site

1. If you haven't done so already, install LinkWithin as normal - either by installing the WordPress.org plugin or by going to www.linkwithin.com and following the instructions.
2. If you haven't done so already, install the WPtouch plugin as normal.
3. The file we will be editing within your WordPress installation is wp-content/plugins/wptouch/themes/default/style.css so you might want to take a backup of it now.
4. Open the file in a text editor such as Notepad++ and paste in the following four lines of CSS (at the bottom is fine):

div.linkwithin_outer {
width:237px;
overflow:hidden;
}

とのこと。

これは、WordPressを前提にした対処方のようですが、これでいけそうだなぁと思って、早速カスタムCSSの【LinkWithin】用のコードの下に追加。

・・・うまくいきません。モバイルどころか、PCでの表示でまでサムネイル２つ表示に変わってしまいます。

結果！

きっと、何かが足りないんだと思って、自分のHTMLを見ていると、モバイル用のCSSって大体『.mobile』から始まることに気付いて・・・コードの前に『.mobile』を追加。

元々の【LinkWithin】のコードと合わせて、

/* linkwithin */
.linkwithin_inner {
margin: -25px auto -30px auto !important;
}
.mobile div.linkwithin_outer{
width:237px;
overflow:hidden;
}

【LinkWithin】用として、カスタムCSSにこんな感じに書き込むことにしました。

結果がこれです。
記事は２つだけになって、はみ出しはなくなりました。もちろん、PCでみれば５つ表示。

また、【やよこぶろぐ » LinkWithinがWPtouchで見るとはみ出るその後☆scroll&タイトル☆】(Click New Tab)こちらの記事で、【overflow:hidden;】を【overflow:scroll;】にすると、はみ出した分に関して、スクロールで表示させることが出来るようになるみたいです。
私は、とりあえず隠すだけでいいかと思ったので、scroll設定にはしてませんが、２つだけじゃ・・・って人は、こういう方法も試してみるといいんじゃないでしょうか。

---

んで、今見たら「こんな記事もあります」の部分が上に行きすぎて崩れてますね・・・。
これも、追加したmobile用コードの調整でなんとか出来そうな気がするので、marginの調整を今度しておきたいと思います。
あんまり自分でスマートフォンでみることないから、どうしても直すのが遅れがちですが。

LinkWithinいいんだけど、スマートフォンの時の対処が考えられてないからなぁ・・・って思って、導入したものの、どうにかならないかな？って思ってる人に是非と思います！

それではまた・ｗ・