アメーバブログ用の無料テンプレート８

アメーバブログ用の無料テンプレート８です。

ヘッダーはガマズミの花です。

ヘッダー中央上には「Love is mightier」と書かれています。

これはガマズミの花言葉「愛は強し」を、翻訳サイトで翻訳した文章です。

右下には、Viburnum（ガマズミ）と書かれています。

ご利用頂けたら嬉しいです。

テンプレート８のダウンロード（zip形式）

画像形式は PNG（ピーエヌジー）（.png）です。

この無料テンプレートは、再配布以外の目的でしたらご自由にご利用頂けます。著作権表記やリンクの必要はありません。（著作権は Cafi Net に帰属します）お役立て頂けたら大変嬉しく思います。

テンプレートの設置方法

テンプレートの設置方法「ステップ１～３」です。

テンプレートの設置方法は、テンプレート１の設置方法と同じです。

タイトルバーとサイドバーの文字の余白を調整

テンプレート８ のタイトルバーとサイドバーの左横には、四つ葉のクローバーの画像が配置されています。

そのため単に背景画像を設置しただけだと、上の画像のように文字とクローバーが重なってしまいます。

クローバーと重ならないようにするには、padding（パディング）（内側の余白）を設定します。

アメーバブログの「現在使用中のブログデザインCSS」（ブログを書く／デザインの変更／CSSの編集）を表示します。

変更前の CSS コード

/*■記事 - デザインカスタマイズ - メインカラム*/
/*記事テーマ*/
.entry .theme{
border-bottom:1px dotted #7E8984;
}
/*記事編集者名*/
.entry .name{
color:#666666;
font-size:0.85em;
}
/*記事タイトル*/ .entry h3.title{
font-size:1.5em;
font-weight:bold;
line-height:1.1;
}

変更後の CSS コード（赤字が追加部分です）

/*■記事 - デザインカスタマイズ - メインカラム*/
/*記事テーマ*/
.entry .theme{
border-bottom:1px dotted #7E8984;
}
/*記事編集者名*/
.entry .name{
color:#ec9046;
font-size:0.85em;
}
/*記事タイトル*/
.entry h3.title{
font-size:1.5em;
font-weight:bold;
line-height:1.1;
padding-left: 35px;
}

「padding-left: 35px;」を追加すると、上の画像のように記事タイトルの左側に余白が追加されます。

数値を大きくすると、その分余白も大きくなります。

続いて、サイドバー見出しの余白を調整します。

変更前の CSS コード

*■■■デザインカスタマイズ - サイド*/
/*■モジュールタイトル - デザインカスタマイズ - サイド*/
h4.menu_title{
font-size:1.17em;
font-weight:bold;
}

変更後の CSS コード（赤字が追加部分です）

/*■■■デザインカスタマイズ - サイド*/
/*■モジュールタイトル - デザインカスタマイズ - サイド*/
h4.menu_title{
font-size:1.17em;
font-weight:bold;
padding-left: 25px;
}

「padding-left: 25px;」を追加すると、上の画像のようにサイドバー見出しの左側に余白が追加されます。

余白のサイズは画像に合わせて調整してください。

padding と似た設定に「margin（マージン）」がありますが、margin は外側の余白の設定です。

今回のテンプレートでは margin は設定していませんが、タイトルバーとサイドバーの位置を調整したい方は margin の値を設定してください。