カメラと子供とおでかけ

栃木在住の二児のパパが日々の生活で気になっていることを分かりやすくまとめます

ブログ初心者向け!はてなブログで記事タイトルや見出しのデザインを自分好みに変更する方法

ブログのデザインは日々試行錯誤中です。こんにちは。まーとんです。

ブログ初心者の私は、ちょこちょこはてなブログのデザインをいじったりしてきましたが、メインテーマを不動の人気の『Minimalism』にして、記事タイトルなどをカスタマイズする現在の方法に落ち着いたので、その方法について紹介します。

 

 

 

ブログのテーマはどれが使いやすい?

ブログのテーマって悩みませんか?はてなブログでも『テーマストア』に見切れないほどたくさんのテーマが並んでいて、選びきれませんよね。。私もいくつかのテーマを渡り歩いてきましたけど、「背景はいいんだけど見出しがいまいち。。」とか、「見出しはいいんだけどフォントがいまいち。。」とか、なかなか自分に「どストライク」のテーマを見つけられずにいました。

 

私のオススメは『Minimalism』!

そんな数あるテーマの中でも不動の人気を誇るのが『Minimalism』というテーマ。私もブログをはじめたての頃からランキングの上位だったのでチェックしましたが、「なぜこんな味気ないテーマが人気なのか…。」とさっぱりわかりませんでした。

テーマを変えてみたのはいいものの、見出しはただの太字でちょっと文字サイズが大きくなるだけだし、これじゃ全然分かりにくいじゃん、と。

これがMinimalismを適用しただけの状態↓。目次も見出しもちょっと地味で味気ない。。

f:id:machapapa2929:20190613052330j:plain

 

確かにこのテーマ自体は非常にシンプルで味気ないのですが、スマホでもパソコンの設定を自動で応用してくれる「レスポンシブデザイン」にもしっかり対応しているし、ブログを構成する最低限の下地はしっかりしているため、実は自分でカスタマイズする分には最高に使い勝手がいいのです。

 

今回は、そんなMinimalism』にぴったりな、「ブログのタイトルや見出しのデザインの変更方法」を紹介します^^ もちろんそれ以外のテーマでも使えるので、ぜひチャレンジしてみてください!

f:id:machapapa2929:20190613053327j:plain

 

タイトルや見出しの変更方法

早速ですが、タイトルや見出しを変更する方法です!テーマ変更前にデザインCCSのバックアップを取っておくのをお忘れなく!!うまくいかなかったときに元に戻れなくなるし、テーマを変えるとデザインがリセットされてしまいます^^; 私もテーマ変更時にバックアップを忘れて絶望を味わいました。。

※具体的には、デザイン>カスタマイズ>デザインCCSを選択し、デザインCCSの枠内のコード全てをメモ帳なんかに貼り付けておけばOK!何かあったときには、メモ帳からコピーして再びデザインCCSに貼り付ければ復元できます^^b

 

それでははじめていきましょう!まずは、デザイン > カスタマイズ > デザインCCS を選択します。

f:id:machapapa2929:20190430143841p:plain

 

デザインCCSに以下のサイトから選んだデザインのコードをコピペすれば完了!たったそれだけです!以上!!!笑
 

今回は、こちらの二つの記事を参考にさせていただきました!ありがとうございました^^

これだけ豊富なデザインを揃えてくれているのが非常にありがたいですよね^^ これだけ種類があると、シンプルなMinimalismのテーマからはじめて、簡単に自分好みのタイトルと見出しのデザインにすることができます^^b

記事のタイトルのデザインはこちら↓

www.north-geek.com

見出しのデザインはこちら↓

saruwakakun.com

 

ちなみに私が選んだ見出しデザインは見ての通りのシンプルなやつです。具体的にはこのコードをデザインCCSにコピペしています! 

</* ==大見出しカスタマイズ== */
h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}>

</* ==中見出しカスタマイズ== */
h4 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}>

<h4:before {
font-family: "Font Awesome 5 Free";
content: "00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}>

中見出しにはチェックマークのアイコンを導入しましたが、こちらは別途ひと手間必要です。

設定> 詳細設定 > headに要素を追加 の枠内に下のコードを貼付けます。

f:id:machapapa2929:20190613061711j:plain

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

こちらはデザインCCSに貼り付けるのではないことに注意!!これでアイコンも導入できたはずです^^b

こちらを参考にさせてもらいました!↓

saruwakakun.com

各部分の色を変えたい場合は、「#〇〇〇〇〇〇」の部分を好みの色コードに書き換えましょう!このページも毎度本当にお世話になってます^^

www.colordic.org

まとめ

今回は、ブログの記事タイトルや見出しのデザインを自分好みに変更する方法を紹介しました!

一見地味なMinimalismというテーマですが、拡張性は非常に高いことがわかりました!タイトルや見出しをいろんなデザインから選ぶことができるので自分好みのブログを作り上げることも簡単にできます!ぜひチャレンジしてみてくださいね^^

 

↓クリックでぜひ応援お願いします^^

にほんブログ村 子育てブログ パパの育児へ
にほんブログ村


子育てパパランキング

 

最近おでかけができずに、残念ながらカメラや写真ネタが少なめです^^; 今週末こそはでかけたいなぁと思っていますが、見事に栃木の天気予報は雨ですね。。難しい季節ですが楽しんでいきましょう!!

 

関連記事

他にもブログのカスタマイズ方法を紹介しているので、チャレンジしてみてください!

www.ma-tonblog.com

www.ma-tonblog.com

www.ma-tonblog.com

www.ma-tonblog.com