どうも、ぽん吉です✋
私は目標としていた100記事を書いたあとに
もう少しかわいいデザインのブログにしたいな
と思いました。
「いやいや、ブログはデザインより中身っしょ！」
という方は必要ないので、そっと閉じてくださいね（笑）
確かにその通りです。
ブログなので記事を書かなくては読んでもらえないので。
でも、大学ノートに日記を書くよりお気に入りのかわいい日記帳に書きたいんですよ。
指定の無機質な鉛筆じゃなくて、キラキラのシャーペンで勉強したいんですよ。
そう…中身より見た目を意識してしまう私です😅
ママブロガーの中で話題になった月間アーカイブもそうですが、おそらく皆さん多忙なので時間がないと思うんです。
なので、SEでもなんでもない初心者の私でも簡単にはてなブログのデザインができた方法を紹介します✨
それは
レスポンシブデザイン対応のテーマに変えること！
はい、でたーー💦
横文字のカタカナー。
どうせ難しいんでしょ。
大丈夫👌
多くのママパパブロガーさんのブログをみると、PC上ではテーマを変えている方がとても多くいます。
そのテーマをスマホ上でも表示できるデザインに変えるだけです。
そうしたらPC上もスマホ上もデザイン一緒で、スマホ用にデザイン変える必要もなく、見た目もガラッと変わって、それっぽいブログにできますよ✨
(ポイントはそれっぽいってとこです🤭)
- 時間がなくてもデザインを変えたい人
- 簡単なやり方でデザインを変えたい人
- 月間アーカイブがPC上にでても、スマホ上に表示されない人
とにかく時間がないけど、簡単にデザインいじりたいって人にオススメです✨
今回は、少し長いので目次をタップし必要なところだけを読んでくれてもいいです。
レスポンシブデザインとは
レスポンシブデザインとは、PC上でもスマホ上でも良い感じに見えることです。
はてなブログのデザインは、このレスポンシブデザイン対応とそうでないものがあります。
そのため、対応テーマに変更するだけで、ガラッとスマホ上のデザインを変えることができます。
PCのサイドバーにあったものが、スマホの下の方に表示されるようになるので、月間アーカイブやカテゴリー表示もスマホで表示できるようになります！
Proとか無料とか関係なく設定できます！
レシポンシブデザイン対応ではないテーマの場合、スマホではPCのレイアウトのまま見えるようになるので、とっても文字が小さくなる可能性があります！
レシポンシブデザインのやり方
①デザインをクリック
②右端のスマホマークを選択
③スクロールして1番下の詳細設定を選択
④レスポンシブデザインにチェック
⑤必ず変更を保存する
公式テーマでレスポンシブデザインに対応しているもの
先ほどのデザイン画面から、パレット🎨のボタンを押すと、はてなブログの公式テーマが一覧で出てきます。
この中から、スマホでも見れるレスポンシブデザイン対応のテーマをいくつか紹介します。
Short
シンプルなデザインです。
Natural
シンプルなデザインです。
ねじまきねこさんは、このデザインかなと思っています。
Smooth
はてなブログの最初のデザインです。
そのままレスポンシブデザインチェックを入れるとスマホでもみれます。
Pushーup
黒のタイトル背景がインパクトあります。
Life
シンプルなデザインです。
Navy Blue
紺色のラインがおしゃれです。
Block Memo
タイトルが緑の文字になります。
Journal-pink
ピンクの文字が可愛いです。
寿司ゆき
お寿司がスマホ版でも可愛いです。
Arrow
矢がデザインされています。
モモさんはこのデザインだと思います。
B:kuma
ピンクのボーダーと白くまが目立って可愛いです。
はてなユーザーが作成したデザイン
公式テーマ以外にもデザインがたくさんあります。
下にスクロールしていくと、人気のテーマというものもあります。
気に入ったテーマがあれば、そこのテーマをクリックしてプレビューしてインストールをしたらオッケーです👌
「Minimalism」「Undershirt」「cappuccino」「Brooky」「Palette」「Neumorphism」
はレシポンシブデザインでした。
ちなみに、私やあらいくまたんさんは「Palette」のテーマを使っています。
「Cappuccino」はデザインがオシャレでサブブログにも使っています。
こちらは、デモサイトから色を選んでダウンロードできるので、色変更も簡単にできます✨
そのほかにもたくさんデザインがあるので、こちらの記事から調べることができます。
レスポンシブデザインは使わないよという場合
PCのみのデザイン表示は可愛いものが多いので、あえて、テーマを変更する必要ないよという方もいると思います☺️
そういった場合はShovemamaさんの記事が参考になります。
この手順でスマホ表示で記事下に月間アーカイブとカテゴリーを作ることができます。
PCのサイドバーにしか月間アーカイブ出ていない場合は、もしかすると設定をスマホマークではなく、真ん中のスペアマークで設定している可能性があるかなと思っています。
まとめ
今回の記事をまとめると3ステップです‼️
①レスポンシブデザインにチェックを入れる
②公式テーマかテーマストアからレシポンシブルデザイン対応のテーマを決める
③設定を保存する
もしいろいろすでにブログをいじっていて(CSSを書き込んでいて)、テーマ変更するとCSSの中身が破棄されるので必ずバックアップを取っておいてください。
バックアップの方法は、非公式のサブブログを作りそこにデザインCSSをコピーしておくことをオススメします。
CSSを書き込んでないし、バックアップめんどいよっていう方はそのまま実行しても構いませんが、自己責任でお願いします。
ちなみに、私はCSSを書き込んだりしていなかったのでバックアップせずにそのままどんどん実行しました。
忙しいけど、ちょっとでもブログのデザインをいじってみようかなと思う方の参考になればと思います。
レシポンシブデザインにして、トップページの記事がずらりと並ぶのに困る方はこちらも↓
最後までお読みくださりありがとうございました☺️
☟読んだよの印にポチッと押してくださったら嬉しいです
