編集

Blogger『Contempo』でFont Awesomeと見出し設定

｜2022/05/03

見出しの設定をしてみる前に


見出しを見直していたら、新しく『主見出し』が増えていた。これは<h1>なので、今までのものとは被らないが、私はそもそもそんなに見出しを使ってないので使わないだろうなと思いながら設定してみようと思った。
でも、スマホでは見出し装飾は一切反映されない。仕様なのかな。


とりあえず、テーマ→モバイルの設定→モバイルを選択。
モバイルテーマを設定『カスタム』にしてあります。

※HTML編集の前にテーマ→バックアップは忘れずに。

Font Awesomeを設定


こちらのブログを参考にしています。


テーマ→HTMLの設定から　</head>　の手前に
<script defer='defer' src='https://use.fontawesome.com/releases/v5.6.1/js/all.js'/>

を入れる。（<head>~</head>内ならどこでもOKっぽい？）
バージョンは変わっていく。使えないと思ってたアイコンが、このバージョンの数字を変えたら使える様になったけど、この先はどうなるのか分からない。


これで、使える様になる。
このままでもいいけれども、色も変えてみたかった。色の設定もスマホでは一切反映されない。


テーマ→カスタマイズ→詳細設定→CSSを追加。
もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。
色の設定。

/*見出し３アイコン色。上からダークオレンジ・ライトグリーン・ダークグレイ*/
.post-body .my-Darkorange {
    color: darkorange
}
.post-body .my-Lightgreen{
    color: lightgreen
}
.post-body .my-Darkgray{
    color: darkgray
}
このアイコンは記事内で付けてます。
記事の編集『HTMLビュー』を選んで
<i class="fas fa-pen-alt my-Darkorange"></i>を追加するのです。

fas fa-pen-altはアイコンのコードです。

見出しの設定

次は、テーマ→カスタマイズ→詳細設定→CSSを追加。
もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。
↓これにしてみる。

主見出し

二本線で囲ってみました。記事で中央揃えの設定をしているので、真ん中に文字があります。

/* 見出し１ */
.post-body  h1 {
padding: 0.5em;
border: 4px double  #ff8c00;/* 線 */
border-radius: 15px;/* 角丸 */
}

線の色は #ff8c00 で変える事が出来る。

見出し

丸い玉二つと線。これ、出来なかったから画像で設定してたのに、なぜか出来るようになっていた。

/* 見出し２ */
.post-body  h2 {
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 2px solid #ff8c00;
}
.post-body  h2::before,
.post-body  h2::after {
position: absolute;
content: '';
border-radius: 100%
}
.post-body  h2::before {
top: .2em;
left: .2em;
width: 18px;
height: 18px;
background-color: rgba(255,153,0,.5);
z-index: 2;
}
.post-body  h2::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background-color: rgba(255,153,0,.2);
}

色付き数字の　255,153,0,　は、上の玉の色。　　255,153,0,　は下の玉の色。どちらもカラーのRGBの数値で設定。
色付き数字の後ろの.5や.2は色の濃さ。同じ色を設定しても、濃さが変わります。
線の色は #ff8c00 で変える事が出来る。

小見出し

アイコンは記事内で設定してるので、下記はラインの設定のみ。
/* 見出し３ */
.post-body h3 {
  position: relative;
  border-radius: 4px;
line-height: 1.4;
  color: #444;
  background: linear-gradient(transparent 80%, #ff8c00 80%);
}
/*見出し３アイコン色*/
（上記に書いたので略します）
線の色は #ff8c00 で変える事が出来る。

順見出し

文字の前にラインが付く。
/* 見出し４ */
.post-body  h4 {
  padding: 0px 10px;
  color: #666;
  border-left: 6px solid #ffcc00;
}
線の色は #ffcc00 で変える事が出来る。

段落


段落も追加されていた。けど、連絡フォームページで使うので装飾しない事にしたのです。
使わなさそうなので、そのまま。