アメブロテンプレート無料（クリスマスver）

はじめに

カスタマイズやテンプレートご利用の方へ！
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)

★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。

★ご質問などの返事が遅れる場合がありますがご了承下さい。

アメブロテンプレート無料（クリスマスver）について

今回はクリスマスverの紹介となります。

デザインとしてはシンプルな構造となっていますので、時期が過ぎたら配色を変えても使えると思います。

前フリ記事で説明しましたが、シンプルが故なぜか自分が納得いかず、オマケ付きですｗ

「ちょっと変わった動きのする〇〇〇〇」と表記していましたが、上のスクリーンショットを見てください。

前回の記事との差が解りましたか？

よく見るとヘッダー画像下に何か増えていますｗ

これがオマケです！ｗ

これは「ちょっと変わったメニュー」とでも言うのかな・・・。ｗ？

勿論、メニューなんか要らないって人もいると思うので、CSSをゴッチャにすると外すのができないって人の為に後付け的な感じにしてあります。

ベーステンプレからの変更箇所
・ガレージメニュー追加（ガレージの様に開閉するのでｗ）
　※Firefox・Chromeでは動作確認済み←スムーズに開閉します。
　※IE（InternetExplorer）←開閉速くて持ち味弱いかも・・。

・記事タイトル、サイドメニュータイトル部分リボン風

・テキストシャドウ（文字に影）

・サイドメニューの文字部分オンマウスで文字拡大

・各ボックスにボックスシャドウ（記事枠などの影です）

・最上部のアメーババー透過

・その他

実際に見ていただいた方が早いと思うのでサンプル→「~~クリスマスverサンプル~~」※一定期間後削除します

メニューについて

メニュー以外にもお遊び要素で「宝箱を探せ！」なんてできるかもしれませんね！
また、オマケと言うことでご了承ください。
メニューが開いた先は勿論フリースペースにURLを記入することでリンクにできます。
正直、画像を用意しないとご自分の利用価値のあるメニューになるかはお任せです。
画像の場所に参考にサイズも記入しときましたので、まずは試しに挑戦してみるのも良いかもしれません。
当面はサンプルの画像は削除する予定はありませんので、そのまま利用いただいても構いませんが、勿論ご自分の画像フォルダに保存して利用することをオススメします。

注意事項

転載、転売などはご遠慮下さい。（私的には、そこまでの物ではありませんのでオススメしませんw）

このテンプレートは画像も使用しています。
※ご自由に変更可能です。

テンプレートで使用している画像は知恵の樹の画像フォルダに保存してありますが、何らかの理由で削除する場合もあるかもしれませんので、ご自身のアメブロ画像フォルダに保存することをオススメします。

CSS３での表現は若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。

テンプレートを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）

テンプレ利用の際のお願い

・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。

・コメント欄にて利用報告をお願い致します。

・ブログにてご紹介していただけたら喜びます。（お任せですw）

設定準備

①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「２カラム・右ワイドメニュー」に設定。
※他カラムは対応はテストしていません。

アメブロテンプレート無料（クリスマスver）設定

設置手順は③手順
手順①CSSをコピペでCSS編集画面にて「CSSの追記」です。
手順②フリースペースにコピペで「HTMLの追記」です。
手順③画像URLを追記です。

①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※赤字の部分が各画像URLです。
※調整は説明を参考にしてみて下さい。
※メニューCSSはこの次にありますので更に追記

/* ▼▼背景画像設定ここから▼▼ */

/* skinBody ボディ */

body{

background-color:transparent;

background-image:url("http://stat.blogskin.ameba.jp/blogskin_images/20121102/18/8a/e5/p/o02200228angelgroup21351850060004.png");

background-repeat:repeat;

background-attachment:fixed;

}

/* ▲▲背景画像設定ここまで▲▲ */

/* ▼▼ヘッダー画像設定ここから▼▼ */

.skinHeaderArea{

height:300px;

width:981px;

background-color:#ff0000;

background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121103/10/0c/08/p/o09800300angelgroup21351906529512.png);

background-repeat:no-repeat;

background-position:center top;

}

/* ▲▲ヘッダー画像設定ここまで▲▲ */

/* ▼▼全体文字影設定ここから▼▼ */

.skinTextColor,.skinBaseTextColor,.skinBlock,body{

text-shadow: gray 2px 2px 5px;

}

/* ▲▲全体文字影設定ここまで▲▲ */

/* ▼▼リンク文字黒変更ここから▼▼ */

.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{

color:#000000;

}

/* ▲▲リンク文字黒変更ここまで▲▲ */

/* ▼▼ブログタイトル、説明文色、位置設定ここから▼▼ */

.skinTitle, .skinTitle:visited, .skinTitle:hover, .skinTitle:focus {

color: #fff;

 font-weight: bold;

 font-size: 25px;

}

.skinDescription {

color: #fff;

 font-size: 17px;

}

.skinBlogHeadingGroupArea{

padding-top: 80px;/*余白（上）*/

padding-right: 0;/*余白（右）*/	

padding-bottom: 0px;/*余白（下）*/

padding-left: 425px;/*余白（左）*/

}

/* ▲▲ブログタイトル、説明文色、位置設定ここまで▲▲ */

/* ▼▼背景の影　ここから▼▼ */

div.skinFrame{

width:1100px; /*フレーム横幅*/

background: #ffffff;

border-left:solid 1px #d3d3d3; /*左縦線*/

border-right:solid 1px #d3d3d3; /*右縦線*/

margin:auto;

padding:auto;

-webkit-box-shadow: 0px 0px 20px 5px #757575;

-moz-box-shadow: 0px 0px 20px 5px #757575;

box-shadow: 0px 0px 20px 5px #757575;

}

/* ▲▲背景の影　ここまで▲▲ */

/* ＊:::＊:::＊記事タイトルリボン設置ここから＊:::＊:::＊ */

.skinArticle {

width:625px;

margin:0 0 10px 20px;

box-shadow: gray 2px 1px 10px;

}

.skinArticleHeader{

padding:0px 30px 20px 10px;

margin:0px -20px 0 -35px;

background:transparent;

}

.skinArticleHeader h1 {

font-size: 1em;

font-weight: normal;

margin: 0px;

padding: 10px;

text-align:center;

box-shadow: gray 20px 1px 7px;

}

.skinArticleTitle, .skinArticleTitle:hover, .skinArticleTitle:focus, .skinArticleTitle:visited {

color:#fff;

 font-size: 18px;}

.skinArticleHeader2{

background: #ff1414; 

background: -moz-linear-gradient(left, #ff1414 0%, #ff1414 100%);  

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff1414), color-stop(100%,#ff1414));  

background:-webkit-linear-gradient(left, #ff1414 0%,#ff1414 100%);  

background:-o-linear-gradient(left, #ff1414 0%,#ff1414 100%);  

background:-ms-linear-gradient(left, #ff1414 0%,#ff1414 100%);  

background:linear-gradient(left, #ff1414 0%,#ff1414 100%);  

color:#FFF;

text-shadow:1px 1px 2px #333;

position:relative;

}

.skinArticleHeader2:before,

.skinArticleHeader2:after {

content: '';

position: absolute;

right: 0px;

bottom: 0px;

border-top: 25px solid #ff1414; 

border-bottom: 20px solid #ff1414;    

border-left: 25px solid #ff1414;  

border-right: 10px solid transparent;  

margin: 0 -30px 0 0;

padding: 0px;	

}

.skinArticleHeader2:before {

left: 0px;

bottom: -15px;

right:auto;

width: 0;

height: 0;

border-top: 6px solid #696969;

border-bottom: 9px solid transparent;

border-left: 10px solid transparent;

border-right: 10px solid #696969;

}

/* ＊:::＊:::＊記事タイトルリボン設置ここまで＊:::＊:::＊ */

/*▼▼ブログ画像ボタン非表示▼▼*/

.imagelistLink {display:none!important;

}

/* ▼▼サイドカラム下ずらし▼▼ */

.columnB .skinSubA {

    float: right;

    width: 340px;

padding:10px 80px 0 0;}

/* ▲▲▲▲▲▲ */

/* ▼★▼各レイアウト共通の設定▼★▼ */

.skinContentsArea { /* 各レイアウト共通の設定 */

width:1100px;

/* ↑（※1）サイドバーの幅＋（※2）コンテンツエリアの幅＋15（カラム間隔） */

margin:0 0 0 40px;

padding-bottom:30px;

overflow:hidden;

zoom:1;

}

/*  ▲★▲各レイアウト共通の設定 ▲★▲ */

/* ▼▼▼サイドバーリボンにする設定ここから▼▼▼ */

/* skinMenu サイドバー　メニューのエリア */

.skinMenu{

background:transparent;/* 透明 */

}

/* サイドバーエリア*/

.skinSubA{

margin-top:45px;

}

.skinMenu2{

padding-right:40px;/* サイドバー右余白 */

padding-left:40px;  /* サイドバー左余白 */

text-align:center;

margin-bottom:10px;

}

/* skinMenuBody サイドメニュー本文エリア */

.skinMenuBody{

margin:-10px;

margin-top:0px;

margin-bottom:0px;

padding: 10px 0 10px 10px;

background:#ffffff;

border: 1px solid #dddddd;/*Ｉ*/

box-shadow: gray 2px 1px 10px;

}

/* skinMenuTitle サイドメニュータイトル文字 */

.skinMenuTitle{

font-size:17px;      /* 文字大きさ */

font-weight: bold; /* 太字設定 */

}

/* ▲▲▲サイドバーリボンにする設定ここまで▲▲▲ */

/*▼▼▼リボン風サイドタイトル装飾ここから▼▼▼*/

.skinMenuHeader{

padding:10px 10px 10px 10px;

margin:0px -30px 0 -30px;

background:transparent;

width:280px;}

.skinMenuHeader{

background: #ff1414; 

background: -moz-linear-gradient(left, #ff1414 0%, #ff1414 100%);  

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff1414), color-stop(100%,#ff1414));  

background:-webkit-linear-gradient(left, #ff1414 0%,#ff1414 100%);  

background:-o-linear-gradient(left, #ff1414 0%,#ff1414 100%);  

background:-ms-linear-gradient(left, #ff1414 0%,#ff1414 100%);  

background:linear-gradient(left, #ff1414 0%,#ff1414 100%);  

color:#FFF;

text-shadow:1px 1px 2px #333;

position:relative;

}

.skinMenuHeader:before,

.skinMenuHeader:after {

content: '';

position: absolute;

right: 0px;

bottom: 0px;

border-top: 25px solid #ff1414; 

border-bottom: 20px solid #ff1414;    

border-left: 25px solid #ff1414;  

border-right: 10px solid transparent;  

margin: 0 -30px 0 0;

padding: 0px;		

}

.skinMenuHeader:before {

left: 0px;

bottom: -15px;

right:auto;

width: 0;

height: 0;

border-top: 6px solid #696969;

border-bottom: 9px solid transparent;

border-left: 10px solid transparent;

border-right: 10px solid #696969;

}

/*▲▲▲リボン風サイドタイトル装飾ここまで▲▲▲*/

/* ▼▼サイドカラムリスト拡大ここから▼▼ */



/*最新の記事*/

.recentEntriesMenu li a:hover{ 

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/*コメント*/

.recentCommentMenu li a:hover{

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/*テーマ*/

.themeMenu li a:hover{

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/*月別*/

.archiveMenu li a:hover{

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/*ブログ読者*/

.readerMenu li a:hover{

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/*お気に入りブログ*/

.favoriteMenu li a:hover{

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/*ブックマーク*/

.bookmarkMenu li a:hover{

font-size:160%;　　/*拡大時の文字大きさ*/

font-weight:bold;　/*文字太字*/

}

/* ▲▲サイドカラムリスト拡大ここまで▲▲ */

/* ▼▼アメーババー透過ここから▼▼ */

ul#amebaBar{

border:0;

background-color:transparent;/*背景透過*/

}

/* ▲▲アメーババー透過ここまで▲▲ */

メニュー追加用CSS
上のCSSの下にメニューを使う方は追記して下さい。
※赤字の部分が各画像URLです。
※調整は説明を参考にしてみて下さい。

 /* ▼★▼おまけメニュー設置ここから▼★▼ */

 .skinContentsArea{

 padding-top:120px;            

 position:relative;

} 

#garagedoor {

 position:absolute;

 list-style: none;

 background: url(http://stat.ameba.jp/user_images/20121103/16/angelgroup2/da/8c/j/o0800010112268307183.jpg);

 width: 800px;

 overflow: auto;

 margin:0;

 padding:0;

 top:20px;

 left:95px;

}

#garagedoor li {

    width: 200px;

    height: 100px;

    display: block;

    float: left;

}

#garagedoor li#shutter1 {

    background: url(http://stat.ameba.jp/user_images/20121103/15/angelgroup2/ec/be/p/o0200010012268199830.png) no-repeat;

}

#garagedoor li#shutter2 {

    background: url(http://stat.ameba.jp/user_images/20121103/15/angelgroup2/d5/da/p/o0200010012268199829.png) no-repeat;

}

#garagedoor li#shutter3 {

    background: url(http://stat.ameba.jp/user_images/20121103/15/angelgroup2/b8/8d/p/o0200010012268199828.png) no-repeat;

}

#garagedoor li#shutter4 {

    background: url(http://stat.ameba.jp/user_images/20121103/15/angelgroup2/8a/b8/p/o0200010012268199827.png) no-repeat;

}

#garagedoor a {

   width: 200px;

   height: 100px;

   display: block;

   background: url(http://stat.ameba.jp/user_images/20121103/13/angelgroup2/7b/d1/p/o0200010312268059446.png) no-repeat bottom center;

   text-indent: -9999px;

}

#garagedoor li {

    width: 200px;

    height: 100px;

    display: block;

    float: left;

    -webkit-transition: background-position 0.6s ease;

    -moz-transition: background-position 0.6s ease;

}

#garagedoor li:hover {

    background-position: 0 -100px !important;

}

②メニューを使う方は下記HTMLをフリースペースにコピペ。
※メニューの赤字の＃にリンク先URL、青字のメニューに任意のテキスト。
※改行がはいるとデザインが崩れるので改行はでして下さい。

<!--ガレージメニュー-->

<ul id="garagedoor"><!--

--><li id="shutter1"><a href="#1">メニュー1</a></li><!--

--><li id="shutter2"><a href="#2">メニュー2</a></li><!--

--><li id="shutter3"><a href="#3">メニュー3</a></li><!--

--><li id="shutter4"><a href="#4">メニュー4</a></li><!--

--></ul>

③各画像をコピーして自分のアメブロ画像フォルダに登録して利用。
※画像コピーはブラウザにより違いますが画像上で右クリック→画像を保存などで可能です。

ヘッダー画像↓





背景画像↓





メニュー下地/size800×101↓





shutter1(スライドする板)/size200×100↓





shutter2(スライドする板)↓





shutter3(スライドする板)↓





shutter4(スライドする板)↓





メニュー枠/size200×103↓

知恵の樹・アメブロテンプレート

アメブロテンプレート・カスタマイズ