CSS初心者がCSS初心者にアドバイスをしてみる記事

はじめに

こんばんわかなたです。
完全に風邪をひいてしまいダウン中です(^^;;
皆さんお体にお変わりありませんか？
最近冷えますので皆さんも気をつけてくださいね！

今日はブログ仲間(勝手に仲間にしてすいません(^^;;)である、色白おばけ (id:lightgauge) さんのこの記事
www.fair-skinned-monster.com
に勝手にアドバイス的なものをしてみたいと思います。
もちろん私のブログも人に見せられたようなCSSをしていませんし、仕事で出先ということでスマホからの閲覧しかできていませんのでCSSの解析などできていませんので予想の範疇で勝手に答えます。

色白おばけ (id:lightgauge) さんごめんなさい！（笑）
べ、別に出先でPC触れないから記事ネタが無い…とかの理由なんかで書いてるわけじゃ無いんだからねっ！！

本題

スマホブログカードダメじゃん問題

基本的に私の見解からすると、iframeに目をつけたのは素晴らしいと思うのです。
横幅の変更という点で言えば、ですけれども。
私もはてなブログをいじくり倒している身なので、同じようなことで悩んだことはあります。

たとえばアドセンスガクガク問題などですね。
hidamarinonakade.hatenablog.com

この問題の場合はスマホ表示の場合はスマホ用の広告に切り替えることで対応しました。
が、今回の問題の場合は元々の記事の横幅がブログカードの横幅に届いていないわけですよね？
じゃあどうやったら治るのか…。

ブログカードのiframeを変更するという形でも対応は可能ですが、レイアウトが崩れてしまう可能性があります。
そうなると他のところも変更して…と大変面倒くさい。
では発想を変えてみて、記事の横幅を広げてみてはいかがですか？
スマホの時だけ横幅を指定してやれば良いわけです。
ブログカードのiframeを調整できたのですから、記事の横幅を弄るのは簡単なはずです。
ちなみに私もいじっていますよ^ ^

たったこれだけできれいに表示できるのでは無いでしょうか。
実際に試せる環境に無いので本当に今までの経験上でしか物を言っていませんが…。

あと、私がそれ以上に気になったのは色白おばけ (id:lightgauge) さんのブログ記事は下に行くと表示が崩れます。
恐らく、「こんな記事も書いてます」って奴がイタズラしてますね。
サンタさんのところから下に行くと一気に崩れます。

私の場合PCで閲覧しているとサイドバーはかなり使います。
そのためスマホだとそれがなくて不便なのですよね…。
しかし、スマホでサイドバーを表示したままにすると、このように記事の下に表示されて非常に見辛い…。
ではどのように対処するか…。
私の場合はモーダルウィンドウを使って、そこにカテゴリ表示などをするようにしています。
参考になれば…と思います。
私の場合はそのボタンがわかりづらいのが問題なのですが…。
一応画面の右上と右下にありますので押してみてください。