QooQ 見出しのカスタマイズ 初心者なのでCSSの追加だけでやりました。

2020/07/21

Blogger初心者の🐇灰色うさぎが BloggerテンプレートQooQのカスタマズをやっちゃいました😵 第4弾 見出しのカスタマイズです。

デフォルト見出しは 見出し、小見出し、順見出しは こんな感じ
色指定の仕方も関係するけれど 改善の余地がありそう。

参考にしたまとめサイトは
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
いろいろな見出しのデザインがありましたが、3種まとまった雰囲気のデザインは載ってないので、まずは見出しについて考えてみました。
先頭の一文字だけを大きくして色を変えてみるが、テンション上がらない・・・・
色を大好きな黄色にして、下線も付けてみたら可愛くなった。💓



見出しのカスタマイズはHTML編集でやってもいい気もするけど、Blogger初心者としては CSSの追加でやる方が気持ち的に楽なので、CSSの追加だけで変更します。

見出し系には左端に黄色で統一 全部太字になるんだけど好みで太字は全部外してノーマルにしました。

見出し

見出しのカスタマイズ用 CSSの追加です。
#single-content h2{
font-size: 2rem;
border-bottom: solid 1px yellow;
border-left: solid 6px yellow;
font-weight: normal;
}
#single-content h2:first-letter{
font-size: 2.5rem;
font-weight: bold;
color: yellow;
}

小見出し

小見出しのカスタマイズ用 CSSの追加です。
#single-content h3{
font-size: 2rem;
font-weight: normal;
padding: .5em;
background: $(brand.color);
margin-top: 2em;
border-bottom: solid 1px yellow;
border-left: solid 6px yellow;
}


準小見出し

準小見出しのカスタマイズ用 CSSの追加です。
#single-content h4{
font-weight: normal;
padding: .5em .8em;
margin-bottom: .5em;
margin-top: .5em;
border-left: solid 6px yellow;
}


ラベル

うさぎ情報など まとめ記事

うさぎの御朱印帳、御朱印、絵馬、うさぎのお御籤、撫でうさぎ、リアルうさぎなど うさぎに関係する寺社情報をまとめました。

御朱印以外のうさぎ情報


以下は更新できなくなっているので一本化して削除予定です。

参拝した うさぎ関係の寺社情報 主に写真で紹介

リンクリスト

うさりん ごしゅりん らぶりん

ブログランキング参加中
お手数ですがお好きなボタンにポチおねがいします。
 にほんブログ村 コレクションブログ 御朱印へ
 にほんブログ村 うさぎブログ うさぎのいる暮らしへ

 

QooQ