Cafi Netつながる情報技術
  1. トップ>
  2. アメブロカスタマイズ>
  3. 無料テンプレート8

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

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

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

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

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

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

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

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

テンプレート8のダウンロード(zip形式)

ダウンロードしたテンプレート8のファイル

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

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

テンプレートの設置方法

テンプレートの設置方法「ステップ1~3」です。

テンプレートの設置方法は、テンプレート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 の値を設定してください。