人生戦略ノート

Enjoy the Life

「はてなブログのスマホデザインを簡単おしゃれにする方法【保存版】」


スポンサーリンク

先週はてなブログをProにしました。

www.xn--fdkl2l313jkkuvhzboa.com
はてなproにしてまずしたいと思ったのがヘッダーとフッターの表示を消したいと思った事です。邪魔で邪魔で消したいとずっと思っていたのをやっと消せるようになったので非常に嬉しいです。 Proにするとブログを10個作れるそうなので、いつかブログを10個自分一人でか共同で作るかもしれないので、備忘録を作っておきます。

はてなブログのスマホデザインの変更,スマホデザインを勉強

スマホデザインをおしゃれかつシンプルにしたい

はてなブログのスマホデザインをおしゃれにするためにはProになるが必須でした。Proになってようやくデザインを設定出来るので非常にワクワクしました。HTMLやCSSなどある程度は理解しているので「さあやるぞー」と思った矢先・・・・CSSの設定はスマデザインの項目になかった。1秒ほど真っ暗になりましたが、すぐさま調べると参考になりすぎるサイトがヒットしまくりました。

はてなブログのスマホデザインにCSSを設定する方法

tsukuruiroiro.hatenablog.com

html編集ボックス内で<style>タグで囲んだ部分にはCSSが記述できるようになる。 そのため「<style>タグで囲んだ部分を作っておき、スマホデザインのcssを変更したくなったらそこにどんどんと記述していく」という方法を用いれば良い。

これで、CSSの設定が出来るのでスマホ表示のh1タグなどの見せ方を変更できる。

LITERALLYで出来ること

  • 「CSSの設定方法」
  • 「フォントをおしゃれにする方法」
  • 「記事の見出しをおしゃれにする方法」
  • 「ヘッダーを変える」
    ここのデフォルトのヘッターが機能しなかったのは何でだろう。ここで全部消えてくれたらありがったけど消えないので項目毎にdisplay:noneを設定しました。 とりあえずヘッダーの画像設定は、後にしておこう。
  • 「記事一覧のデザインを見やすくする」
    これだけでかなりおしゃれになりました。自分で見ていても素晴らしいと思えます。後は色の変更と文字の大きさなどでオリジナル感を出そうと思います。

スマホデザインのヘッダーにあるHatena Blogを消す方法

bulldra.hatenablog.com
この人文章とブログが非常に見やすいですね。勉強になるブログです。

はてなブログのスマートフォン表示は、ランキング表示といい、追尾ヘッダーといい、改悪にも思えるような変更を勝手に加えておいて、設定で簡単に戻せるようにしないので困ってしまう事が多いのです。

その通りですね。WEB素人だと検索してやっと理解できる範囲なので、知識は大事です。

ランキングやプロフィールなど不要な部分を非表示にする

mataro.hatenablog.jp
下になるプロフィールから人気の記事から全て非表示に出来ます。必要のない情報がありすぎて調べるのに苦労しました。断片的な情報のブログはありますが、この「家電とプリンと会話の錯綜ブログ」さんのはほとんど記載されているので助かりました。

家電とプリンと会話の錯綜ブログでできること

  • 「ブログタイトル上の丸いアイコンの非表示」
  • 「ブログタイトル下のブログ説明の非表示」
  • 「はてなブログの勧誘、記事を書くなどを非表示」
  • 「はてなブログ開発はどへのリンクを非表示」
  • 「プロフィールの非表示」
  • 「注目記事の非表示」
  • 「最下部ダッシュボードなどの非表示」

    スマホデザインを変更した感想

    非表示にしたいと思っていた項目を消せたのが嬉しいです。あと無駄な表示が多かったのを消したおかげで表示スピードがかなり上がりました。 少しずつ勉強していき、自分でデザインを変更していけるよう日々勉強していきたいと思います。