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

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

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

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

ヘッダーは夏の花火です。

ヘッダーの文字には「Fireworks of summer」(夏の花火)と書かれています。

本文の背景色は、紫色と白色からお選び頂けます。

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

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

メモ帳が2枚梱包されていますが、本文の背景色を紫色にする場合は「ブログデザイン3-紫」の CSS をご利用ください。

本文の背景を白色にする場合は(下にサンプル画像があります)、「ブログデザイン3-白」の CSS をご利用ください。

どちらか一方のメモ帳(CSS)をご利用頂く形となります。

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

テンプレートの設置方法

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

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

背景色・文字色・リンク色の変更方法

設定では、本文背景が紫で文字色とリンク色がオレンジになっていますが、CSS のカラーコード(カラーナンバー)を設定することでご自由に変更可能です。

ブログを書く/デザインの変更/CSSの編集と進み、現在使用中のブログデザインCSS を表示します。

変更箇所が分かりやすいように、現在使用中のブログデザインCSS の上から順番に変更していきます。

変更箇所がわからない場合は、Ctrl + F からブラウザでコードの一部を検索すると便利です。

無料テンプレート3の別カラー

上の画像がカラーを変更したテンプレートです。

変更箇所は以下の通りです。(赤と緑が変更箇所です)

/*6)ページ全体の文字色を変更する*/
body{
color: #4e4e3e; /*-- 黒色 --*/
}
/*7)記事タイトルの背景色を変更する*/
.entry h3.title{
background-image:url(記事タイトルの画像のパス);
}
/*8)記事タイトルの文字色を変更する*/
.entry h3.title{
color: #ffffff; /*-- 白色 --*/
}
/*9)サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #ffffff; /*-- 白色 --*/
}

上の CSS コードは、ページ全体の文字色/記事タイトルの文字色/サイドバーの見出し文字色の設定です。

タイトルバーとサイドバーは背景が黒い画像なので、白の文字色を設定しました。

カラーコードを変更すると、色が変わります。

/*■フレーム - 基本設定 - ブログデザイン基本設定*/
#frame{
width:800px;
margin:0 auto;
text-align:left;
}
#wrap{
width:800px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#main{
overflow:hidden;
word-break:break-all;
background-color:#ffffec;
}

上の CSS コードは、ブログ本文部分の背景色です。

記事タイトル/ブログ本文/コメント/ペタなど、ブログの中心部分の背景色が設定されます。

/*■■■デザインカスタマイズ - ブログデザイン基本設定*/

/*■リンク*/
a{
text-decoration:none;
color:#9e7f3c;
}
/*■リンク:訪問済み*/
a:visited{
text-decoration:none;
color:#6d5729;
}
/*■リンク:マウスオーバー時*/
a:hover{
text-decoration:underline;
color:#d5ad58;
}
/*■コンテンツ全体*/ #frame{
background-color:#feffd0;
}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#4e4e3e;
background-color:#feffd0;
}
/*■サイドカラムB*/
#sub_b{
color:#4e4e3e;
background-color:#feffd0;
}

上の CSS コードは、リンク色などの設定です。

リンク色/訪問済みリンク色/マウスオーバー時のリンク色を、それぞれ別々に設定できます。

コンテンツ全体/サイドカラムA/サイドカラムB のカラーナンバーも、それぞれ設定可能です。

サイドカラムA とサイドカラムB の color(緑色の部分)では、サイドカラムの文字色を設定します。

画像の部分は決まっていますが、これらのカラーナンバーを変更することで、テンプレートの雰囲気を変更できるかと思います。