はてなブログのパソコンのブログデザインをスマホに反映させた話(レスポンシブデザイン)
はてなブログを始めて20日と少しが経過しました。
実は、前々からずっと気になってた事がありました。
パソコンとスマホでブログのデザインが全然違うやん
ということ。
パソコンとスマホではブログのデザインが違う
はてなブログではないのですが、私が運営している別のサイトは、特に何も設定しなくても、パソコンから見ようが、スマホから見ようが、そこまで致命的にデザインが変わっていませんでした。
なので、パソコンの画面がそのままスマホに表示されるのなんて、当たり前だと思っていたのです。
そして、このはてなブログも特に設定をしたわけではないのですが、スマホでの表示が全く違うので、はてなブログはそういうものなんだろう、って全然深く考えずに今まで20日以上過ごしていました。
いや、グローバルメニュー作ったり、ツイッター連携させたりしているのに、パソコンにだけ表示されて、スマホでは一切の恩恵が受けれられないのか・・・って、一生懸命調べて作ったのに、非常に残念だなぁとは思っていました。
パソコンで見たブログ
ちなみに、これがパソコンで見た私のブログデザインです。(今朝、テーマ変えましたけど)
スマホで見たブログ
一方、スマホで見たブログです。
いや、シンプルな生活を目指していますが、シンプル過ぎじゃない?っていう。
そもそもトップの天の川の画像はどこへ行ったのか、という話です。
でも、こういうもんだと思っていました。
実はパソコンで表示されるデザインをスマホに反映できる
別に、調べてた訳じゃないんですが、たまたまブログデザインを変えようと思って、ブログの設定を色々触ってたんですね。そして、たまたま見つけてしまったのです。
ダッシュボードのデザインを開いて、スマホマークみたいなのをクリック、一番下の詳細設定をクリック、レスポンシブデザインにチェックを入れます(下記の赤丸個所です)
なんか注意書きに
レスポンシブデザインのテーマを設定しているときのみ使用してください。
と書かれているのが気になりましたが、私のブログテーマは大丈夫そうで、チェックを入れると、パソコンでのデザインがスマホに反映されました。
天の川の写真がトップに来ている!頑張って作ったグローバルメニューが追加されている!スクロールすればサイドバーのツイッター連携なども表示されていました。
やったね!
・・・まぁ、はてなブログユーザーどころか、ブログ運営している方からすると、当たり前の設定かもしれませんが、本当に見落としていたというか、そういうもんだと思い込んでいました・・・。
思い込みとは恐ろしいものです。
疑問に思った事はまず調べないといけないですね。
そして、今や、パソコンからより、スマホからブログを見られている方が多いですしね、もう少し、スマホ側の見栄えを考えて行かねばなぁと思ったのです。
以上!