【Blogger/QooQ】記事中の各見出しデザインを考えてみる

今回はQooQ記事内の各見出しのデザインを変えてみます。
見出しのデザインについては、記事全体の読み易さが上がったり、個性が出たりします。

QooQの見出しを変えてみる

QooQの記事内ので表示される見出しは以下のスタイルが標準となっています。

見出し（h2）はもう少し主張しても良いかと。
小見出し（h3）と準見出し（h4）については、あまり関連性の無いデザインに見えてしまっているので統一感を出したいと思います。

*テーマ（テンプレート）を変更します。必ずバックアップを取りましょう。
変更は自己責任で行なって下さい。

*既に当ブログは変わっています。

見出し（h2）向けのデザイン

ちょっと変わった感じにしたいのでグラデーションを掛けてみました。
QooQは全体的にフラットデザインを採用している感じです。
グラデーションを付けるとフラットデザインとは違う感じなので正直迷いはありますが、とりあえずコレで。

対象箇所を探します。
テーマ>>HTML編集画面内でCtrl＋fで検索。入力フィールドに#single-content h2と入力して検索します。background:以降をコメントアウト又は削除して、青字の内容に変更又は追加します。

#single-content h2{
font-size: 110%;
font-weight: bold;
padding: .5em;
margin-bottom: .8em;
margin-top: 2em;
border-radius: 2px;
/*background: $(brand.color);
 color: $(brand.font);*/
background: linear-gradient(to bottom, #0ecdbf, #a3ccc9);
}

background:linear-gradient(to bottom,#0ecdbf,#a3ccc9); がグラデーション部分です。

to bottomとする事で次に続くカラーコードが上から下にグラデーションされます。#0ecdbfが開始地点（上）で#a3ccc9が終了地点（下）のカラーになります。

to topとすると#0ecdbfが開始地点（下）、#a3ccc9が終了地点（上）とグラデーションの方向が逆になります。

また、上記では、フォントの色を指定していない状態ですが、コメントアウトしているcolor:$(brand.font)や直接カラーコードを指定する事でフォントの色も指定可能です。

小見出し h3向けのデザイン

見出しより主張はしない感じで。
左端と下に線を引いた見出しにしています。

#single-content h3{
font-weight: bold;
 padding-left: .5em;
/* padding:.5em; */
margin-bottom: .5em;
margin-top: 2em;
border-bottom: solid 2px #0ecdbf;
 border-left: 8px solid #0ecdbf;
}

border-left: 8px solid #0ecdbf;で左端に線を追加。
border-bottomとborder-leftで指定している#0ecdbfは各線の色です。
直接カラーコードを指定していますが、$(brand.color)とする事でQooQの標準機能通り、テーマデザイナーで色を管理する事が可能です。

準見出し h4向けのデザイン

小見出しの中に付ける見出しなので、関連したデザインにしても良いかと考え、左端のみ線を置きました。

#single-content h4{
/* display: table;
    padding: .2em 1em .2em 1em;
border-radius: 2px;
background: $(brand.color);
color: $(brand.font); */
padding-left: .8em;
margin-bottom: .5em;
border-left: 4px solid #0ecdbf;
}

左端の線の色は小見出し同様に#0ecdbfを$(brand.color)とする事でQooQの標準機能通り、テーマデザイナーで色を管理する事が可能です。


尚、各見出しの上下間隔や文字の始まりはmarginやpadding等でお好みに調整して下さい。


当ブログでは上記の見出しデザインについて、再度変更する場合があります。
特に見出し（h2）については変更するかも。


以上