【30分で最低限】無料はてなブログのデフォルトテーマカスタマイズ
今日ブログを始めたあなた、こんな風に思っていませんか?
・ブログを始めたけど、デフォルトのままだといかにも無料っぽくて気になる…
・最低限でいいから、手早く簡単に見栄えを良くしたい。
・パソコンだけじゃなくて、スマホで見た時の見栄えも良くしたい。
ブログの見栄えは記事を書くモチベーションアップにつながりますよね。
実は私も今日ブログを始めたのですが…
以下の手順で、お手軽にブログの見た目を整えられました!
デフォルトの簡素な感じから、少しブログっぽくなってうれしいので、備忘録も兼ねて手順を残しておきます。
●使用するデザインテーマは?
デザインテーマはデフォルトの「Smooth」(レスポンシブ対応)を使用。
他のデザインテーマを使ってもよかったのですが、好みのテーマはレスポンシブ非対応のものが多く…。レスポンシブ非対応だとパソコンにしかテーマが反映されず、スマホはデフォルトのままになってしまうようです。
好みのテーマを探すのは時間がかかりそうだったので、まずはデフォルトテーマを簡単にカスタマイズしてみました。
目次
【完成図】
・パソコン表示
・スマホ表示
【手順】
・最初に…
「レスポンシブデザイン」にチェックを入れましょう。
→管理画面>デザイン>スマートフォン(スマホのアイコンをクリック)>詳細設定
※レスポンシブ対応のテーマを使用していても、「レスポンシブデザイン」にチェックを入れないと、スマホの時にテーマが反映されないので注意。
①Gナビ設置(カテゴリーにリンクするメニュー)
本当に簡単…!コードをコピペするだけでGナビが設置できます。
・GナビのHTMLコードを以下の場所にコピペ。
→管理画面>デザイン>カスタマイズ>ヘッダ>タイトル下
・CSSを以下の場所にコピペ。
→管理画面>デザイン>カスタマイズ>デザインCSS
「Jquery」の参照コードが最新になってないことが原因。
「ダッシュボード」→「設定」→「詳細設定」→「head要素にメタデータを追加」に以下のコード(<script~)を追記して下さい。
※<link~>はFontAwesomeを使うためのコードです。<script~>より上の行に書かないと効かないため注意。
②サイドバーを整える(右側に表示される、プロフィールやカテゴリーなどの部分)
・サイドバー用のCSSを以下の場所にコピペ。
→管理画面>デザイン>カスタマイズ>デザインCSS
・FontAwesomeを使うためのコード<link~>を以下にコピペ。
「ダッシュボード」>「設定」>「詳細設定」>「head要素にメタデータを追加」
※<link~>は<script~>より上の行に書かないと効かないため注意。
※FontAwesomeについて
そのままコピペしただけだと、アイコンが表示されない箇所がありました。
→【解決方法】
FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。
Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。
(検索と最新記事のアイコンはSolidタイプだったため、font-weightの記述がないと表示されなかったようです)
③背景変更(一気に雰囲気が変わる!)
管理画面→デザイン→カスタマイズ→背景画像(色だけ変更したい場合は「背景色」)
あとは好みの画像を選べばOKです。
【まとめ】
・Gナビ設置(カテゴリーにリンクするメニュー)
・サイドバー編集(右側に表示される、プロフィールやカテゴリーなどの部分)
・背景画像の変更
以上、この3点の変更だけでも少し見栄えが良くなったのではないでしょうか?
さらに自分好みの色に変更すれば、もっと個性が出せそうですね。