アメブロテンプレートの設置方法

アメーバブログ用のテンプレートを設置する方法です。

設置方法 ステップ１ カスタム可能ベーシックの適用

「【カスタム可能】ベーシック」の利用は 2011年9月 に終了しました。アメブロの公式アナウンスはこちらです。【ブログ】CSS編集デザインについて｜スタッフブログ

当方で確認した内容は以下の通りです。※アメブロのシステムが変更されるケースもございますので、予めご了承下さい。（2011年9月確認）

現在適用している「【カスタム可能】ベーシック」は、別のデザインに変更しない限りそのまま使用出来ます。

現在「【カスタム可能】ベーシック」を適用している方は、CSS の編集も可能です。当サイトのテンプレートも設置することができます。

1. アメーバブログへログイン
2. ブログを書く
3. デザインの変更
4. カスタム可能
5. カスタム可能ベーシック
6. 3カラム・左右メニュー「適用する」
7. 「CSSの編集をする」へ進む

画像付きの解説はカスタム可能デザインを適用に掲載しています。

設置方法 ステップ２ CSS をコピー＆ペースト

1. 現在使用中のブログデザインCSS を「Ctrl + A」ですべて選択（右クリックからすべて選択でも構いません）
2. Delete キーで CSS をすべて削除
3. ダウンロードしたメモ帳（テキストファイル）を表示
4. Ctrl + A でメモ帳の内容（CSS）をすべてコピー
5. 現在使用中のブログデザインCSS へペースト（貼りつけ）

現在使用中のブログデザインCSS を、ダウンロードしたメモ帳に記載された CSS に入れ替えて頂く作業です。

コピー＆ペーストで、すべての CSS を入れ替えてください。

設置方法 ステップ３ 画像をアップロード

アメブロに画像を４枚アップロードして、画像のパス（URL）を CSS に貼りつけます。

CSS の編集のブログデザインヘッダ・背景用画像の追加で、ファイルを選択／アップロードを４回繰り返して４枚の画像をアップロードします。

この画像のパス（URL）を、現在使用中のブログデザインCSS の該当箇所へコピー＆ペーストします。

/*５）ページ背景に画像を入れる*/
body{
background-image:url(■■■背景画像の URL を貼り付けて下さい■■■);
}
/*６）ページ全体の文字色を変更する*/
body{
color: #47943f; /*-- 濃いグレー --*/
}
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-image:url(■■■記事タイトルの背景画像の URL を貼り付けて下さい■■■);
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #4d5000; /*-- 濃いグレー --*/
}
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #4d5000; /*-- 濃いグレー --*/
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-image:url(■■■サイドバーの背景画像の URL を貼り付けて下さい■■■);
}

上の赤字の部分を消して、この画像のパスをペースト（貼りつけ）します。

タイトルの背景画像とサイドバーの背景画像を間違いやすいので、注意してください。（420 px × 27px がタイトルの背景画像です）

CSS の一番下へ移動します。

#header {
background-image: url(■■■ヘッダー画像の URL を貼り付けて下さい■■■);
}

#header {
height: 300px;
}

#header {
background-repeat:repeat-x;
}

div#userNaviArea{
display:none;
}

上の赤字の部分を消して、ヘッダーのこの画像のパスをペースト（貼りつけ）します。

保存を選択して、テンプレートの設置完了です。

ブログを見るを選択すると、設置したブログのデザインを確認できます。

その他のアメーバブログカスタマイズ

こちらは必須の作業ではございません。

追加でアメーバブログをカスタマイズされたい方の、ご参考になれば幸いです。

/*６）ページ全体の文字色を変更する*/
body{
color: #ff49e3; /*-- 濃いグレー --*/
}
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-image:url(背景画像のパス);
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #d236ba; /*-- 濃いグレー --*/
}
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #d236ba; /*-- 濃いグレー --*/
}

ブログ本文などページ全体の文字色／記事タイトルの文字色／サイドバーの見出しの文字色を変更しました。webセーフカラーの一覧（色見本）

CSS の注訳（解説）は「濃いグレー」 のままですが、気になる場合は変更してください。

ブログ全体のフォント（書体）を変更する方法も掲載しております。

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

/*■リンク*/
a{
text-decoration:none;
color:#ff85d8;
}
/*■リンク：訪問済み*/
a:visited{
text-decoration:none;
color:#c72293;
}
/*■リンク：マウスオーバー時*/
a:hover{
text-decoration:underline;
color:#ffc3ec;
}

リンクカラー／訪問済みリンクカラー／マウスオーバー時のリンクカラーも、合わせて変更しました。

カラーコードを変更することで、各カラーは簡単に変更できます。編集状況は、変更を確認するから表示します。