たった３つの設定ではてなブログのデザインをいい感じにカスタマイズする方法
こんにちは！IT女子のちーさんです。
最近ブログのデザインをリニューアルしました。
今回、簡単な設定で、かなりいい感じになりましたので、この記事では、3つのデザイン変更の方法について解説します。
Before/After
PC画面
スマホ画面
スマホのBefore、イケてないですねー。広告でかっ。
それでは、方法についてご紹介します。無料会員でもできるのでご安心ください！
スマホ対応させる
はてなブログはデフォルトの設定だと、PCのデザインがスマホに反映されないというワナがあります！
これから紹介するロゴバナーや目次のデザイン変更は、スマホ対応をしないと反映されないのでご注意ください。
スマホ対応のテーマ（テンプレート）を選ぶ
はてなブログが提供しているテーマにはスマホに対応しているものとしていないものがあります。
現状のテーマが対応していなければ、スマホ対応のテーマを選びましょう。
私は「Minimal Green」というテーマを採用しています。
シンプルで色味もキレイなのでおすすめですよ。
ワードプレスのデザインにかなり近いと思います。
他にも色んなテーマがあるので探してみてください。
CSSに「/* Responsive: yes */」と記載する
CSSと聞くと難しそうですが、コピペするだけなので大丈夫です！
管理画面の「デザイン」→「カスタマイズ」→「デザインCSS」と開いてください。
デザインCSSの一番上に先ほど選んだテーマについての記述があるので、その下にでも「/* Responsive: yes */」と記載しましょう。
レスポンシブデザインにチェックする
管理画面の「デザイン」→「スマートフォン」→「詳細設定」を開きます。
「レスポンシブデザイン」というのが表示されるのでチェックしましょう。
これで、スマホ対応設定完了です！
自作ロゴバナーを設置する
サイトトップにサイト名のロゴがあるだけで、なんとなく信頼感アップしますよね！
ということで、今までただの文字だったブログ名をオリジナルの画像にすることにしました。
作成に使ったツールは「Canva」というツールです。
Amazingly Simple Graphic Design Software – Canva
記事のアイキャッチ画像もこのツールで作っています。
Canvaは、綺麗な写真が無料（一部有料）で手に入るのと、図形の透過が簡単にできるなどとても使いやすいです。
写真や字体のセンスもいいので、おすすめですよ！
次に、作った画像を設置する方法です。
管理画面の「デザイン」→「カスタマイズ」→「ヘッダ」を開きます。
「タイトル画像」で作った画像をアップロードして位置を調整します。
また、表示設定で「画像だけ表示」を選びましょう。
画像が設置できました！
目次のデザインを変更する
Minimal Greenテーマのデフォルトの目次はこんな感じでした。
これをもう少しかわいくカスタマイズしていきます！
まず、ネット上でCSSのコードを手に入れます。
「ブログ 目次 CSS」などで検索すると出てきます。
私はこちらのサイトを参考にしました。
お気に入りのデザインが見つかったら、コピーします。
「Responsive:yes」を入れたときと同様、デザインCSSを開きます。
「Responsive:yes」の下あたりに、コピーしたCSSコードをペーストします。
すると、目次が反映されます。
ちなみに、はてなブログで目次を入れるには、編集画面上の「ツールバー」の「目次」をクリックすればOKです！
この３つの設定変更をするだけで、サイトがだいぶ見やすくなります。
特に、スマホについては今まで閑散としたデザインだったので、これによりかわいいデザインにすることができました。
レスポンシブにすると、今までスマホはできなかった、サイドバーの編集やメニューの作成なども可能になるので、ぜひ試してみてください！
