息子と散歩

海外駐在中 >> 家購入 >> 学校決定 >> 帰国

MENU

【はてなブログ初心者】見出しのカスタマイズ(文字の背景に色付け)

f:id:Masouta:20211209062901p:plain

本日は文字の背景に色を付けるやり方についてです。

 

皆さん、どうやっているのかなぁ~と思い勉強してみました。
はてなブログでは見出しで簡単に設定出来ます。

 

設定方法は簡単ですが、デザインは無限にあるのでどんなデザインにするか、その後にどうプログラム言語を組むかはテクニックがいると思います。

 

あくまで初心者向けなので、ここではシンプルな2種類だけを記事にします。
でも、やり方が分かれば無限に作れると思いますよ!

 

それではまず結論から。

こんな感じ ↓ に出来ます!

f:id:Masouta:20211124072951p:plain



こんな程度ですが、有るか無いかで結構イメージが変わってくると思います。

 

 

ではやり方です。

 

 

まずいつも通りにダッシュボードに行きます。

>>「デザイン」をクリック

 >>「カスタマイズ」をクリック

  >>「{}デザインCSS」をクリック

   >>表示されたエリアに↓をコピペ!

.entry-content h3 {
  padding: 6px 10px;
  border-left: 8px solid #000000;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

h4 {
  border-bottom: dashed 2px #000000;
}

    >>最後に「設定を保存する」をクリック

f:id:Masouta:20211124075834p:plain

 

設定は以上で、次は実際に記事の中でどうするか。

>>いつも通りの記事作成モードでテキトーに「あいうえお・・・」を入力

 >>「あいうえお」のみを選択

  >>「大見出し」をクリック

f:id:Masouta:20211124080135p:plain

 

>>続いて「さしすせそ」のみを選択

 >>今度は「中見出し」をクリック

  >>最後に「プレビュー」モードに切り替え

f:id:Masouta:20211124080312p:plain

 

 

じゃじゃ~ん!!

 

f:id:Masouta:20211124080446p:plain

 

ね! 簡単ですよね!

 

後は先ほど入力したプログラム言語を色々イジって見て下さい。
どうしたら、デザインを変えられるか、どうしたら色を変えられるか。
分かってくると思いますよ!

 

ちなみに色は”原色大辞典”でググってみて下さい!
例えば、黒なら#000000、赤なら#ff0000と決まっていて好みの色コードに変えればOKです!

 

ではでは。