読者です 読者をやめる 読者になる 読者になる

ひなかな

~陽だまりのなかで~

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

かなた ブログ-はてなブログ改造 雑記

はじめに

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

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

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


本題

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

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

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

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

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

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

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

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

スマホでSNSボタンちゃんと出んやん問題

私の場合は忍者おまとめボタン使ってます!
便利ですよー。
これで一発解決!(ぇ

アドセンス張り替え面倒問題

私の場合はですが、PC版でのサイドバーのアドセンスのみスマホ表示の時は別の場所に表示するようにしていますね。
記事の中のアドセンス等は上でも述べている通り、アドセンスガクガク問題で対応してます。
これで少しは楽になる…のかな??

Hタグがシンプルすぎるやん問題

これについては、結構ネットで調べるとサンプルなど落ちてますので、自分の好きなデザインを見つけてH3やらH4やらに適時変更してやる形で対応が可能かと♪


おわりに

非常に偉そうに書きましたが、基本的に最初に述べた通り私もど素人であります。
色白おばけ (id:lightgauge) さんからすれば、「こんなこと知ってるよ!」なんで内容もあったことでしょう。
いや、ありますね確実に!(キッパリ)
それについては大変失礼しました。

かくいう私もCSSで行き詰ることが多々あり、その時は私の信頼するお師匠様に助けていただいているわけであります。

基本的にできる範囲は自分で弄るんですけどね(笑)
試行錯誤して自分のブログが格好良くなると嬉しいじゃ無いですか♪
これも一つの醍醐味的な??
でも、どうしてもわからない時には師匠を頼ります。
本当に師匠さまさまです。

色白おばけ (id:lightgauge) さんもここでめげずに、是非あなたらしいブログデザインに仕上げてくださいね!

基礎から作るMovable Typeブログデザイン―オリジナルBlogをデザインすることからはじめよう

基礎から作るMovable Typeブログデザイン―オリジナルBlogをデザインすることからはじめよう