タベタのブログ

食べることとダイエットが趣味です

【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点の変更だけでも少し見栄えが良くなったのではないでしょうか?

さらに自分好みの色に変更すれば、もっと個性が出せそうですね。