2012/05/13

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

follow us in feedly
follow us in RSS

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

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

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


変更前の状態

変更前は、LinkWithinは記事のすぐ下に、中央寄せで設置したかったので、
/* linkwithin */
.linkwithin_inner {
margin: -25px auto -30px auto !important;
}
このようなコードをカスタムCSSに追加していました。
これも、サムネイルを表示したけど、幅がうまく合わなくて、右側に余計な余白が出来ている場合などに設定するといい感じになります。

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

こんな風に、3つ目の記事で切れてしまいます。
手元の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での表示でまでサムネイル2つ表示に変わってしまいます。

結果!

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

元々の【LinkWithin】のコードと合わせて、
/* linkwithin */
.linkwithin_inner {
margin: -25px auto -30px auto !important;
}
.mobile div.linkwithin_outer{
width:237px;
overflow:hidden;
}
【LinkWithin】用として、カスタムCSSにこんな感じに書き込むことにしました。

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

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



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

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

それではまた・w・

2 件のコメント:

  1. いつも有用な記事をありがとうございます。
    二点ほど記事として教えてくださればと思い投稿させて頂きます。
    bodyに背景画像を配置しても外側だけに適用され、ヘッダ部分は content の背景色のままになってしまいます。すなふさんのようにするにはどうしたらよいのでしょうか。
     二点目は,フッターとヘッダ部分の画像のみ画面幅にしたい場合です。例:WEBクリエイターボックスさん。
    どちらともblogger以外の解説はあったのですが、いまいち要領がつかめません。
    bloggerテンプレートシンプルを使っています。よろしければ記事にてまとめてくださると幸いです。
    長文失礼しました。これからも頑張ってください。

    返信削除
  2. ありがとうございます。
    早速、なんとか調べて、思うような形にできるかな?と思ったので、記事にしてみました。
    ですが、bloggerの「テンプレートをデフォルトに戻す」がちょっと信用ならなくなってきたので、十分に気をつけながらにしてください。

    ちょっと、ほんとにこんな知識レベルで公表していいのかな?って思うところがありますので・・・。

    返信削除

Related Posts Plugin for WordPress, Blogger...