- トップ>
- アメブロカスタマイズ>
- 無料テンプレート8
アメーバブログ用の無料テンプレート8
アメーバブログ用の無料テンプレート8です。
ヘッダーはガマズミの花です。
ヘッダー中央上には「Love is mightier」と書かれています。
これはガマズミの花言葉「愛は強し」を、翻訳サイトで翻訳した文章です。
右下には、Viburnum(ガマズミ)と書かれています。
ご利用頂けたら嬉しいです。
画像形式は PNG(ピーエヌジー)(.png)です。
この無料テンプレートは、再配布以外の目的でしたらご自由にご利用頂けます。著作権表記やリンクの必要はありません。(著作権は Cafi Net に帰属します)お役立て頂けたら大変嬉しく思います。
テンプレートの設置方法
テンプレートの設置方法は、テンプレート1の設置方法と同じです。
スポンサーリンク
タイトルバーとサイドバーの文字の余白を調整
テンプレート8 のタイトルバーとサイドバーの左横には、四つ葉のクローバーの画像が配置されています。
そのため単に背景画像を設置しただけだと、上の画像のように文字とクローバーが重なってしまいます。
クローバーと重ならないようにするには、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 の値を設定してください。
スポンサーリンク