はじめに
このテンプレートは無料配布です。デザイン的内容は以下です。
・トップ画像内にリボン風グローバルメニュー
・メニューオンマウスで立体的に前にでるアクション
・背景を２個使用による遠近間隔（スクロール有りと無し）
・記事タイトル部分及びサイドメニューリボン風
・各ヶ所に角丸
・サイドメニューオンマウスで拡大
※メインカラムなどの幅を変更しています。
◆コメント◆
秋冬をイメージしたのですが、冬イメージが強くなっていますw
イメージ画像
サンプルブログはこちら→アメブロテンプレート無料（冬イメージ）
注意事項
転載、転売などはご遠慮下さい。（私的には、そこまでの物ではありませんのでオススメしませんw）CSS３などでの表現箇所はIEでは表示が異なる場合があることがあります。
※若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。
テンプレートを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）
テンプレ利用の際のお願い
・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。・コメント欄にて利用報告をお願い致します。
・ブログにてご紹介していただけたら喜びます。（お任せですw）
設定準備
①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「２カラム・メニュー右」に設定。※他カラムは対応していません。
アメブロテンプレ無料（イメージ冬）設定
設置手順はコピペで①CSS編集画面にて「CSSの追記」と②フリースペースに「メニュー用HTML」のペーストの①②手順です。①下記HTMLをフリースペースにコピペ。
※メニューの文字数によって横幅が変わりますので、文字数調整かメニューの数を減らすなどで調整して下さい。（文字数によってはメニュが３～４になるかも・・）
※赤字の＃にリンク先URL、青字のメニュー(HOME)に任意のテキスト。
※最後の「このデザインを使う」はご自由に変更して構いません。
※改行がはいるとデザインが崩れるので改行は<!--ここ-->でして下さい。
<div class="ribbon"><!--
--><a href="#"><span>Home</span></a><!--
--><a href="#"><span>メニュー１</span></a><!--
--><a href="#"><span>メニュー２</span></a><!--
--><a href="#"><span>メニュー３</span></a><!--
--><a href="#"><span>メニュー４</span></a><!--
--><a href="#"><span>メニュー５</span></a><!--
--><a href="http://ameblo.jp/lucifer-d0v0b/"><span>このデザインを使う</span></a><!--
--></div>
--><a href="#"><span>Home</span></a><!--
--><a href="#"><span>メニュー１</span></a><!--
--><a href="#"><span>メニュー２</span></a><!--
--><a href="#"><span>メニュー３</span></a><!--
--><a href="#"><span>メニュー４</span></a><!--
--><a href="#"><span>メニュー５</span></a><!--
--><a href="http://ameblo.jp/lucifer-d0v0b/"><span>このデザインを使う</span></a><!--
--></div>
②下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※調整は説明を参考にしてみて下さい。
/*▼▼▼リボン風記事タイトルここから▼▼▼*/
/*▼▼▼リボン風記事タイトル装飾ここから▼▼▼*/
.skinArticleHeader{
padding:0px 10px 20px 10px;
margin:0px -30px 0 -30px;
background:transparent;
}
.skinArticleHeader2{
background: #001e43; /* Old browsers */
background: -moz-linear-gradient(left, #001e43 0%, #4753a2 50%, #001e43 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#001e43), color-stop(50%,#4753a2), color-stop(100%,#001e43)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* IE10+ */
background: linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* W3C */
color:#FFF;
text-shadow:1px 1px 2px #333;
box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);
position:relative;
border-radius: 10px 10px 0 0; /*リボン丸み*/
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0 0;
}
.skinArticleHeader2:before,
.skinArticleHeader2:after {
content: '';
position: absolute;
right: 0px;
bottom: -20px;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
border-right: 10px solid transparent;
}
.skinArticleHeader2:before {
left: 0px;
bottom: -20px;
right:auto;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid #333;
}
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
color:#ffffff;
font-size:18px;
font-weight:bold;
}
/*▲▲▲リボン風記事タイトル装飾ここまで▲▲▲*/
/* ▼▼▼リボン風記事タイトルにする設定ここから▼▼▼ */
/*記事横幅*/
.columnB .skinMainArea{
width:600px;
border-radius: 10px; /*丸み*/
margin-top:15px;}
/* skinMainArea 記事メインエリア左右余白 */
.skinMainArea{
padding-right:30px;
padding-left:30px;
}
/* skinArticle 記事エリア影 */
.skinArticle{
box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.8);
}
/* skinArticleHeader 記事タイトルエリアリボン調整 */
.skinArticleHeader{
border-left:none;
}
.skinArticleHeader2{
padding-top:15px;
padding-bottom:15px;
padding-left:0px;
text-align:center;
}
.skinArticle{
border-radius: 10px; /*丸み*/
}
.skinArticle {
border: 0px none;
background: url("http://stat.ameba.jp/user_images/20120826/11/tienoki1/90/9e/p/o0100010012155756988.png") repeat scroll 0% 0% transparent;
}
/* ▲▲▲リボン風記事タイトルにする設定ここまで▲▲▲ */
/* ▼▼▼サイドバーリボンにする設定ここから▼▼▼ */
/* skinMenu サイドバー メニューのエリア */
.skinMenu{
background:transparent;/* 透明 */
}
/* サイドバーエリア*/
.skinSubA{
margin-top:30px;
}
.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;
background: url("http://stat.ameba.jp/user_images/20120826/11/tienoki1/90/9e/p/o0100010012155756988.png") repeat scroll 0% 0% transparent;
border-radius: 0 0 10px 10px;
box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.8);
}
/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
font-size:15px; /* 文字大きさ */
font-weight: bold; /* 太字設定 */
}
/* ▲▲▲サイドバーリボンにする設定ここまで▲▲▲ */
/*▼▼▼リボン風サイドタイトル装飾ここから▼▼▼*/
.skinMenuHeader{
padding:10px 10px 10px 10px;
margin:0px -30px 0 -30px;
background:transparent;
}
.skinMenuHeader{
background: #001e43; /* Old browsers */
background: -moz-linear-gradient(left, #001e43 0%, #4753a2 50%, #001e43 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#001e43), color-stop(50%,#4753a2), color-stop(100%,#001e43)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* IE10+ */
background: linear-gradient(left, #001e43 0%,#4753a2 50%,#001e43 100%); /* W3C */
color:#FFF;
text-shadow:1px 1px 2px #333;
box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);
position:relative;
border-radius: 10px 10px 0 0; /*リボン丸み*/
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0 0;
}
.skinMenuHeader:before,
.skinMenuHeader:after {
content: '';
position: absolute;
right: 0px;
bottom: -20px;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
border-right: 10px solid transparent;
}
.skinMenuHeader:before {
left: 0px;
bottom: -20px;
right:auto;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid #333;
}
/*▲▲▲リボン風サイドタイトル装飾ここまで▲▲▲*/
/*▼▼▼プロフ内調整ここから▼▼▼*/
/*プロフ画像位置中央*/
.skinSubA .userProfileImageArea{margin-left:65px;}/*左からの位置調整*/
/*プロフネーム*/
.skinSubA .profileUserNicknameArea{margin-left:30px;}/*左からの位置調整*/
/*プロフ内ボタン位置中央*/
.skinSubArea ul, .skinSubArea li{margin-left:50px;}/*左からの位置調整*/
/*テーマ位置中央*/
.skinSubArea ul, .skinSubList li{margin-left:0px;}/*左からの位置調整*/
/*▲▲▲プロフ内調整ここまで▲▲▲*/
/* ▼▼ブログ画像一覧を見る削除設定ここから▼▼ */
p.imagelistLink{
display:none;
}
/* ▲▲ブログ画像一覧を見る削除設定ここまで▲▲ */
/* ▼▼▼ヘッダー画像設定ここから▼▼▼ */
.skinHeaderArea{
height:250px;
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20120826/12/27/19/j/o09800300tienoki11345951934947.jpg);
background-repeat:no-repeat;
background-position:center top;
margin-top:25px;
width:980px;}
/* ▲▲▲ヘッダー画像設定ここまで▲▲▲ */
/* ▼▼▼ブログタイトル文字、説明文字設定ここから▼▼▼ */
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#ffffff;
font-weight:bold;
font-size:2.11em;
margin:20px 0 0 350px;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#ffffff;
margin:20px 0 0 350px;
}
/* ▲▲▲ブログタイトル文字、説明文字設定ここまで▲▲▲ */
/* ▼▼▼背景設定ここから▼▼▼ */
body{
background-image: url("http://stat.blogskin.ameba.jp/blogskin_images/20120826/12/51/1b/p/o02600260tienoki11345952882972.png");
background-repeat: repeat;
background-attachment: fixed;
}
.skinBody{
background-image: url("http://stat.ameba.jp/user_images/20120827/19/tienoki1/48/3e/p/o0520052012158298220.png");
background-repeat: repeat;
/*background-attachment: fixed;*/
}
/* ▲▲▲背景設定ここまで▲▲▲ */
/* ▼▼▼メッセージボードリボンメニュー設定ここから▼▼▼ */
.skinHeaderArea{
position:relative;
}
.ribbon{
position:absolute;
top:320px; /* 上下位置調整 */
left:510px; /* 左右位置調整 */
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
/* ▲▲▲メッセージボードリボンメニュー設定ここまで▲▲▲ */
/* ▼▼▼メッセージ部分の枠を変更▼▼▼ */
.skinMessageBoard{
border:none;
background-color: transparent;
padding-bottom:30px;
position-top:100px;
}
/* ▲▲▲メッセージ部分の枠を変更▲▲▲ */
/* ▼▼サイドカラムリスト拡大ここから▼▼ */
/*最新の記事*/
.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; /*文字太字*/
}
/* ▲▲サイドカラムリスト拡大ここまで▲▲ */