facebookコメントの幅と下にできる余分な余白を調整スマホ&タブレット


公開日:2013年07月07日 日曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:208 | Leave a comment

昨日、なんだか急にやる気になってしまったため

寝不足です。

 

メインパソコンの電源も落とし、

就寝モードになってたのに

iPadでROSEのブログ見てたらFacebookコメントの下に

なんともバカひろい余白が!

 

iPadで見たところ改良前

 

 

iPhoneで見ても同様ヽ((◎д◎ ))ゝヒョエ~

 

今さらかもしれませんが

調整してみましょー!

 

iPhoneで見たところ改良前

 

今からFacebookコメント挿入される方は以下を参考に。

wordpressの各記事にfacebookのコメント欄を設置挿入する覚え

Facebookから貰ってきた”コメント挿入タグ”を

WordPress用にする↓

data-num-posts=”コメント表示数”

data-width=”幅” ココは後述しますが、

レスポンシブ対応にするのであまり気にしなくてもいいけど

とりあえず、ブログのコンテンツ部分の横幅よりは大き目に設定。

 

ここからが肝心!余白を消します!

検索して以下の素晴らしいエントリーを発見!

ブログに設置したFacebookコメントをスマホで見るとやたら余白が発生する問題に対応する方法

 

って、いうのを付けたすみたい。

ん?あれれ?iPadで確認するも変化なし、、、

iPhoneで見てみたら・・・

おーーー!余白無くなってる♪

iPhoneで見たところ改良後

ってことは・・・

タブレットができてないってことか。

 

ならば、これで↓どうだ!

iPadで見たところ改良後

 

できました~♪

これは、

モバイルやタブレットでの表示の際もパソコン用のスタイルを使用するということなんですね!

 

で、最後に、

レスポンシブに対応させるために

以下のCSSをコメント挿入タグの下あたりに加えます。

横幅をブログのコンテンツ部分いっぱいに表示する(100%)ようにしています。

 

さらに、

もしLikeBoxの幅もレスポンシブにするためには

以下のスタイルを書き足すとオッケーですね。

 

これで、スッキリしました!

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年07月07日 日曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:208 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA