2017-10-19

Vaster2のタイトルと各見出しの変更　Blogger·Vaster2カスタマイズ#14

どうも。

秋は無く、寒い日が続き、急遽冬物に衣替えとなりましたね。




さて、Vaster2も衣替えします。
タイトルや見出しのデザインを変更してみました。

cssの変更をするので、テンプレートのバックアップを取ってから作業をしましょう。

HTMLの編集画面で、「記事のフォント」を検索します。
タイトルから見出し、小見出しのスタイルが記述されています。

変更する元の記述は以下です。

/*   記事のフォント
----------------------------------------------- */
.main-outer h1{
font-size:25px;
line-height:1.6em;
margin-bottom:30px;
}
.entry-content h2{
padding: .5em .75em;
margin-bottom: 30px;
background:$(entryh2.background);
color:$(entryh2.color);
}
.entry-content h3{
font-size:20px;
padding:15px 0 15px 10px;
border-left: 8px solid $(entryh3.border);
color:$(entryh3.color);
}

タイトルの装飾

標準だとタイトルから唐突に記事が始まってしまう為、タイトルの下に点線を追加しました。
フォントも小さくしています。

.main-outer h1{
font-size:20px;
line-height:1.6em;
margin-bottom:30px;
border-bottom: 2px dotted;
}

こんな感じ。

点線でさりげなく。

タイトルにボトムライン(点線)を追加

見出し（h2）の変更

Vaster2の見出し(h2)は単色のボックスです。

ブログのテーマカラーによっては、目を引くと言うより圧を感じてしまう事もありそうです。

そこでスッキリとしながら、見出しの役割を果たせそうなスタイルを考えて見ました。

フォントも全体のバランスを見ながら小さくしたいので、font-sizeを追加しています。

以下に、幾つか見出しを検討用に備忘録しておきます。

#1 下線と左線の組合せ。

border-leftとborder-bottomを組合せました。

.entry-content h2{
font-size:18px;                /* add   2017.10.xx       */
padding:8px 0 3px 8px;
margin-bottom: 10px;
border-left: 7px solid $(entryh2.background);
border-bottom: 2px solid $(entryh3.border);
color:$(entryh2.color);
}

かなりスッキリしたデザインになります。
左線に比べ下線を細くしています。

レフトラインとボトムライン

#2 グラデーションのボックスにしてみる。

今回はこれを採用しました。
liner-gradientを使いテンプレートデザイナーで指定した色から白へグラデーションをかけています。

尚、当方の環境はPC/スマホ共にChromeですが、ベンダープレフィックス無しでも表示されました。
しかし、古いバージョンのブラウザ等だと上手く表示されないようなので、ベンダープレフィックス付（下記青字で表示）の方が良さそうです。

.entry-content h2{
font-size:18px;                /* add   2017.10.xx       */
padding:8px 0 3px 8px;
margin-bottom: 10px;
color:$(entryh2.color);
 background: -moz-linear-gradient(bottom, $(entryh2.background), #FFF);
 background: -webkit-linear-gradient(bottom, $(entryh2.background), #FFF);
 background: linear-gradient(to top, $(entryh2.background), #FFF);
}

グラデーション

開始位置を指定している為、bottom, $(entryh2.background), #FFFとする事で下から上へグラデーションします。topなら上から下、leftなら左から右へグラデーションします。

色の指定は、$(entryh2.background)とすると今まで通りテンプレートデザイナーで色を変更出来ます。不要なら直接カラーコードを入れればokです。

更にborder-top: 2px solid $(entryh2.background); を追加すると、こんな感じにグラデーション開始色の実線を上部に表示します。

グラデーション＋トップライン

グラデーションにする事で圧が無くなります。

#3 最初の文字を強調する。

疑似要素:first-letterを使いブロック要素の最初の文字に色やサイズを大きく変えてみます。

h2のfont-sizeサイズ自体を小さくした上で、最初の文字は1.5 から2倍位（1.5em〜2em）が良いと思います。
色は$(entryh2.background)としています。

以下のように.entry-content h2の直下に追加します。

.entry-content h2:first-letter{
font-size:2em;
color:$(entryh2.background);
}

今回は見送りましたが、意外と良さそうです。
タイトルに使っても良いかもしれません。

最初の文字を強調

準見出し（h4）の変更

続いて、準見出し（h4）です。
標準の左側ラインをアイコンフォントに変更しますが、cssでh4のスタイルが見当たりませんでした。

Vaster2の仕様では、サイドバーメニューの見出しのスタイルを引き継いでいる様で、サイドバーの左線の色を変更すると準見出し（h4）の左線の色も変更されています。

場合によっては、記事中の見出しや小見出しとカラーが統一性の無い物になる事もあるかも。

今回、アイコンフォントの「」に変更する為、新たに準見出し(h4)のスタイルをcssに追加して、サイドバーの影響を受けない様にしてみました。

.entry-content h3の直下に以下を追加しました。

/*style content h4   add 2017.xx.xx  */
.entry-content h4{
font-size:16px;
border-left: 0px solid;
padding:2px 0 2px 2px;
color:$(entryh3.color);
}
.entry-content h4:before{
 font-family: FontAwesome;
content: '\f00c';
color:$(entryh3.border);
}

疑似要素:beforeを使う事で、アイコンフォントのチェックマークが追加された準見出し(h4)となります。

アイコンフォントを使った準見出し

色は、小見出し(h3)と同じ色にしています。
テンプレートデザイナーで小見出し(h3)の色を変えるとアイコンフォントの色も連動して変更されます。

color:$(entryh3.border);の箇所をカラーコードを記述すれば準見出し(h4)単独で色を付けられます。

または、テンプレートデザイナーに追加しても良いかもしれません。

以上、少しだけブログの印象を変えてみましたがいかがでしょうか。
当ブログは、既に変更を適用しているので変更後のタイトル、各見出しの表示となっています。

Bloggerテンプレートカスタマイズ