MENU

【松江塾】低学年から入塾って実際どうなの?小1で通っているリアルな口コミ!
【手作りかるた】かるたで三語短文を楽しもう
グッドノートに保存して塾のプリント管理
【子育ての柱】「社会で生きていく力を身につける」これが我が家の子育ての柱

【初心者でも簡単】はてなブログデザインを変えてカスタマイズ

 本ページはプロモーションが含まれています

どうも、ぽん吉です✋

 

私は目標としていた100記事を書いたあとに

もう少しかわいいデザインのブログにしたいな

と思いました。

 

「いやいや、ブログはデザインより中身っしょ!」

という方は必要ないので、そっと閉じてくださいね(笑)

 

確かにその通りです。

ブログなので記事を書かなくては読んでもらえないので。

 

でも、大学ノートに日記を書くよりお気に入りのかわいい日記帳に書きたいんですよ。

指定の無機質な鉛筆じゃなくて、キラキラのシャーペンで勉強したいんですよ。

そう…中身より見た目を意識してしまう私です😅

 

ママブロガーの中で話題になった月間アーカイブもそうですが、おそらく皆さん多忙なので時間がないと思うんです。

 

なので、SEでもなんでもない初心者の私でも簡単にはてなブログのデザインができた方法を紹介します✨

 

それは

レスポンシブデザイン対応のテーマに変えること!

 

はい、でたーー💦
横文字のカタカナー。
どうせ難しいんでしょ。

 

大丈夫👌

多くのママパパブロガーさんのブログをみると、PC上ではテーマを変えている方がとても多くいます。

そのテーマをスマホ上でも表示できるデザインに変えるだけです。

そうしたらPC上もスマホ上もデザイン一緒で、スマホ用にデザイン変える必要もなく、見た目もガラッと変わって、それっぽいブログにできますよ✨

(ポイントはそれっぽいってとこです🤭)

記事を読んでほしい人
  • 時間がなくてもデザインを変えたい人
  • 簡単なやり方でデザインを変えたい人
  • 月間アーカイブがPC上にでても、スマホ上に表示されない人

とにかく時間がないけど、簡単にデザインいじりたいって人にオススメです✨

今回は、少し長いので目次をタップし必要なところだけを読んでくれてもいいです。

 

 

レスポンシブデザインとは

レスポンシブデザインとは、PC上でもスマホ上でも良い感じに見えることです。

はてなブログのデザインは、このレスポンシブデザイン対応とそうでないものがあります。

そのため、対応テーマに変更するだけで、ガラッとスマホ上のデザインを変えることができます。

 

PCのサイドバーにあったものが、スマホの下の方に表示されるようになるので、月間アーカイブやカテゴリー表示もスマホで表示できるようになります!

Proとか無料とか関係なく設定できます!

注意

レシポンシブデザイン対応ではないテーマの場合、スマホではPCのレイアウトのまま見えるようになるので、とっても文字が小さくなる可能性があります!

 

レシポンシブデザインのやり方

PCかタブレットではてなブログを開きます

 

レスポンシブデザインのやり方

①デザインをクリック

②右端のスマホマークを選択

③スクロールして1番下の詳細設定を選択

④レスポンシブデザインにチェック

必ず変更を保存する

 

公式テーマでレスポンシブデザインに対応しているもの

先ほどのデザイン画面から、パレット🎨のボタンを押すと、はてなブログの公式テーマが一覧で出てきます。

 

この中から、スマホでも見れるレスポンシブデザイン対応のテーマをいくつか紹介します。

 

Short

シンプルなデザインです。

 

Natural

シンプルなデザインです。

ねじまきねこさんは、このデザインかなと思っています。

 

Smooth

はてなブログの最初のデザインです。

そのままレスポンシブデザインチェックを入れるとスマホでもみれます。

 

Pushーup

黒のタイトル背景がインパクトあります。

 

Life

シンプルなデザインです。

 

紺色のラインがおしゃれです。

 

Block Memo

タイトルが緑の文字になります。

 

Journal-pink

ピンクの文字が可愛いです。

 

寿司ゆき

お寿司がスマホ版でも可愛いです。

 

Arrow

矢がデザインされています。

モモさんはこのデザインだと思います。

 

B:kuma

ピンクのボーダーと白くまが目立って可愛いです。

 

はてなユーザーが作成したデザイン

公式テーマ以外にもデザインがたくさんあります。

 

下にスクロールしてテーマストアで探す

出典 https://blog.hatena.ne.jp/-/store/theme/ より

下にスクロールしていくと、人気のテーマというものもあります。

気に入ったテーマがあれば、そこのテーマをクリックしてプレビューしてインストールをしたらオッケーです👌

 

「Minimalism」「Undershirt」「cappuccino」「Brooky」「Palette」「Neumorphism」

はレシポンシブデザインでした。

 

ちなみに、私やあらいくまたんさんは「Palette」のテーマを使っています。

「Cappuccino」はデザインがオシャレでサブブログにも使っています。

こちらは、デモサイトから色を選んでダウンロードできるので、色変更も簡単にできます✨

 

そのほかにもたくさんデザインがあるので、こちらの記事から調べることができます。

www.fuji-blo.com

 

レスポンシブデザインは使わないよという場合

PCのみのデザイン表示は可愛いものが多いので、あえて、テーマを変更する必要ないよという方もいると思います☺️

 

そういった場合はShovemamaさんの記事が参考になります。

この手順でスマホ表示で記事下に月間アーカイブとカテゴリーを作ることができます。

shovelmama.hatenablog.com

 

PCのサイドバーにしか月間アーカイブ出ていない場合は、もしかすると設定をスマホマークではなく、真ん中のスペアマークで設定している可能性があるかなと思っています。

 

真ん中のスパナマークでも似たような設定ができますが、サイドバーに表示されます

 

まとめ

今回の記事をまとめると3ステップです‼️

①レスポンシブデザインにチェックを入れる

②公式テーマかテーマストアからレシポンシブルデザイン対応のテーマを決める

③設定を保存する

 

テーマ変更の注意点

もしいろいろすでにブログをいじっていて(CSSを書き込んでいて)、テーマ変更するとCSSの中身が破棄されるので必ずバックアップを取っておいてください。
バックアップの方法は、非公式のサブブログを作りそこにデザインCSSをコピーしておくことをオススメします。
CSSを書き込んでないし、バックアップめんどいよっていう方はそのまま実行しても構いませんが、自己責任でお願いします。
ちなみに、私はCSSを書き込んだりしていなかったのでバックアップせずにそのままどんどん実行しました。

 

忙しいけど、ちょっとでもブログのデザインをいじってみようかなと思う方の参考になればと思います。

 

レシポンシブデザインにして、トップページの記事がずらりと並ぶのに困る方はこちらも↓

 

 

最後までお読みくださりありがとうございました☺️

 

☟読んだよの印にポチッと押してくださったら嬉しいです

にほんブログ村 子育てブログへ