ぴよこママのライフデザイン

コロナ禍に第一子を出産した新米ママ。家族がご機嫌に暮らすためのあれこれを模索中。すっきりした丁寧な暮らしを目指して、生活を少しずつアップデートしています。

【はてなブログ】最初にやっておきたい見出し大中小のカスタム(コピペで簡単)

新ブログ立ち上げ。見出しのカスタム設定


こんにちは。初めましてぴよこママです。

育児関連の内容を書いているぴよこママの徒然カンガルーとは別に、家計管理・資産管理などお金関係について発信するブログを立ち上げました。

 

はてなブログは1アカウントで複数ブログをぶら下げられるので便利ですね。

とはいえ、ブログのデザインはイチから設定が必要。

 

ということで、備忘も兼ねてブログ設定を残しておこうと思います。

もし、気に入った!という場合はまるっとコピペしてもらって大丈夫です^^

HTMLやCSSはちんぷんかんぷん・・・という方も、そのまま貼ればOKなので、よければ活用ください。

 

今回は見出しの設定です。育児ブログがピンク基調なので、こちらは青メインにしています。

 

 

見出しのデザイン(完成図)

 

こんな感じのデザイン&色になります。 

 

見出し大中小のデザイン

見出し大中小のデザイン

 

コード(コピペ可)

管理画面(記事の管理)から、デザイン>カスタマイズ(スパナマーク)>デザインCSS(一番下)に以下コードを貼り付けてもらえればOKです。

f:id:mminammi:20210607135817p:plain

設定画面

 

 

見出し大のコード 

見出し大

見出し大

 

/*見出し大*/
h3 {
padding: 0.4em 0.5em;
color: #494949;/*★文字の色*/
background: #f4f4f4;/*★背景の色*/
border-left: solid 5px #7db4e6;/*★左線の色*/
border-bottom: solid 3px #d7d7d7;/*★下線の色*/
}

 

見出し中のコード 

見出し中

見出し中



/* 見出し中 */
h4 {
  position: relative;
  padding: 0.6em;
  background: #b0e0e6;/*★吹き出しの色*/
}

h4:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #b0e0e6;/*★吹き出しの色*/
  width: 0;
  height: 0;
}

 

見出し小のコード 

見出し小

見出し小

 

/* 見出し小 */
h5 {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.4;
}

h5:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
  color: #5ab9ff; /*★チェックマークの色*/
  font-weight: 900;
}

 

見出しの色を変更したい場合

色を変更したい場合は、コードの「#」で始まる部分を好きな色のカラーコードに変更してください。ソースのコメントに★をつけている部分です。

 

私は色の設定をする際、下記サイトを参考にさせてもらいました。

WEB色見本 原色大辞典

 

注意:FontAwesomeの追加も忘れずに

小見出しのチェックマークはFontAwesomeの設定が必要です。

管理画面(記事の管理)>詳細設定>headに要素を追加に以下のコードを貼り付けてください。

 

  console.log("<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">");

 

 

 

以上、見出しのカスタム設定でした。

ご参考になれば嬉しいです^^

 

<デザイン、コードで参考にさせていただいたサイト>

ありがとうございます✨ 

見出し:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

 

合わせて運営している育児ブログはこちら。

ダブル育休の日々を綴っているのでよければ見てください。

mminammi.hatenablog.com