【Vaster2】ヘッダーのブログタイトルと説明のカスタマイズ

2018/02/08

このページでは、Vaster2のブログタイトルとブログ説明のカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」はお約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら

ブログタイトルのカスタマイズ

ブログタイトル

ブログタイトルのCSS

ブログタイトル全体の設定

.header h1{
margin-top:0;　上外側の余白（0）
margin-bottom:0;　下外側の余白（0）
}

ブログタイトル（リンク）の設定

.header-title a{
font-size:40px !important;　文字サイズ（40px）
font-weight:700;　文字の太さ（700）
text-decoration:none;　文字の下線などの設定（なし）
color:$(header.title.color);　リンクの文字色（テーマデザイナー設定）
}

カーソル通過時のブログタイトル（リンク）の設定

.header-title a:hover{
text-decoration:none;
}

訪問済のブログタイトル（リンク）の設定

.header-title a:visited{
color:$(header.title.color);　訪問済リンクの文字色（テーマデザイナー設定）
}

※（）内は初期値

上記が Vaster2のブログタイトルのCSSに説明を加えたもの。

基本的には「/*　ヘッダー」で検索して、中身を書き変えれば好みに合わせて変更できる。

ブログタイトルの文字サイズを変更

[例] ブログタイトルの文字を小さく、細くして、下線をつけるCSS

変更前

変更後

.header-title a{
font-size:30px !important;　/* 文字を小さく（40 → 30pxに変更） */
font-weight:500;　/* 文字を細く（700 → 500に変更） */
text-decoration:underline;　/* 下線をつける（none → underlineに変更） */
color:$(header.title.color);
}

※赤字が書き換えたコード

［方法］

・「.header-title a」で検索
・文字のサイズを変えるには「.header-title a{}」の中の「font-size:数値px;」を変更
・文字の太さを変えるには「.header-title a{}」の中の「font-weight:数値;」を変更
・文字に線をつけるには「.header-title a{}」の中の「text-decoration:値;」を変更

備考：スタイルシートリファレンス（text-decoration）

ブログタイトルの文字色を変更

[例] ブログタイトルを青文字にするCSS

変更前

変更後

.header-title a{
font-size:40px !important;
font-weight:700;
text-decoration:none;
color:#0000FF;　/*　リンク色を青に設定　*/
}
.header-title a:hover{
text-decoration:none;
}
.header-title a:visited{
color:#0000FF;　/*　訪問済リンク色を青に設定　*/
}

※赤字が書き換えたコード

［方法］

・「.header-title a」で検索
・「.header-title a{}」の中の「color:色;」の色を変更
・「.header-title a:visited{}」の中の「color:色;」の色を変更
・「テーマデザイナー対応版」なら、テーマデザイナーから変更可能

備考：カラーコード一覧

ブログタイトルのフォントの種類を変更

[例] ブログタイトルのフォントを「ＭＳゴシック」に変える

変更前

変更後

.header h1{
margin-top:0;
margin-bottom:0;
font-family: "ＭＳゴシック",sans-serif;　/* ＭＳゴシックを指定 */
}

.header-title{
font-family: "ＭＳゴシック",sans-serif;　/* ＭＳゴシックを指定 */
}

※赤字が書き加えたコード

［方法］

・「.header h1」で検索
・「.header h1{}」の中に「font-family:フォントの種類;」を書き加える
・「.header h1{}」の下辺りに「.header-title{}」を書き加える　※すでに書き加えている場合は不要
・「.header-title{}」の中に「font-family:フォントの種類;」を書き加える

※「font-family:フォントの種類;」は、この2箇所に加えないと背景画像設定時に反映されない

参考：font-familyの書き方まとめ（サルワカ）
備考：Font-familyメーカー

ブログタイトルを中央揃えにする

[例] ブログタイトルを中央揃えにするCSS

変更前

変更後

.header h1{
margin-top:0;
margin-bottom:0;
text-align:center;　/* 中央揃え */
}

.header-title{
text-align:center;　/* 中央揃え */
}

※赤字が書き加えたコード

［方法］

・「.header h1」で検索
・「.header h1{}」の中に「text-align:center;」を書き加える
・「.header h1{}」の下辺りに「.header-title{}」を書き加える　※すでに書き加えている場合は不要
・「.header-title{}」の中に「text-align:center;」を書き加える

※「text-align:center;」は、この2箇所に加えないと背景画像設定時に反映されない

備考：スタイルシートリファレンス（text-align）

ブログ説明のカスタマイズ

ブログ説明

ブログ説明のCSS

ブログ説明の設定

.header-description p{
font-size:13px;　文字のサイズ（13px）
margin-top:5px;　ブログ説明の上外側の余白（5px）※タイトルとの間隔
color:$(header.description.color);　文字色（テーマデザイナー設定）
}

※（）内は初期値

上記がVaster2のブログの説明のCSSに説明を加えたもの。

変更の要領は、ブログタイトルと同じなので詳しい説明は割愛する。

ブログ説明の文字サイズを変更

［方法］

・「.header-description p」で検索
・「.header-description p{}」の中の「font-size:数値px」の数値を変更

ブログ説明の文字色を変更

［方法］

・「.header-description p」で検索
・「.header-description p{}」の中の「color:色;」の色を変更
・「テーマデザイナー対応版」ならテーマデザイナーからも変更可能

ブログ説明のフォントの種類を変更

［方法］

・「.header-description p」で検索
・「.header-description p{}」の中に「font-family:フォントの種類;」を書き加える

ブログ説明を中央揃えにする

［方法］

・「.header-description p」で検索
・「.header-description p{}」の中に「text-align:center;」を書き加える

Blogger Labo