アメブロテンプレート無料（まんまるメニュー付き）

はじめに

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

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

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

アメブロテンプレート無料（まんまるメニュー）

今回は以前にもご紹介した、「前に出たがりまん丸メニュー」のテンプレの公開です。

以前は少々ゴリ押し的な作りでしたが今回は前回よりも多少よくなってると思います。

永遠のβ版なのでご了承下さい･･･(･∀･i)ﾀﾗｰ･･･

前回と見た目には殆ど変わっていないかもしれませんが・・・

前回同様、まん丸メニューはオンマウスでやんわり拡大します。

その他はサンプルブログを期間限定で公開しますのでご覧下さい。

まん丸メニューサンプルブログ→こちら

注意事項

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

使用している画像については、背景・ヘッダーのみになり、好きな画像に変更可能ですが、使用している画像は当方でアメブロの画像ファイルに保管していますが、削除の予定は特にありませんが心配な方はご自身の画像フォルダに保存することを勧めます。

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

※CSS3を使用している箇所ではIE（InternetExplorer）では表示が異なる場合があります。

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

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

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

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

設置準備

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

アメブロテンプレート無料（まんまるメニュー付き）設置

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

①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※赤字が画像URLになります。

/*▼▼▼リボン風記事タイトルここから▼▼▼*/


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


.skinArticleHeader{


padding:0px 10px 20px 10px;


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


background:transparent;


}





.skinArticleHeader2{


background: #ff99cc; /* Old browsers */


background: -moz-linear-gradient(left, #ff99cc 0%, #ffccff 50%, #ff99cc 100%); /* FF3.6+ */


background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff99cc), color-stop(50%,#ffccff), color-stop(100%,#ff99cc)); /* Chrome,Safari4+ */


background: -webkit-linear-gradient(left, #ff99cc 0%,#ffccff 50%,#ff99cc 100%); /* Chrome10+,Safari5.1+ */


background: -o-linear-gradient(left, #ff99cc 0%,#ffccff 50%,##ff99cc 100%); /* Opera11.10+ */


background: -ms-linear-gradient(left, #ff99cc 0%,#ffccff 50%,#ff99cc 100%); /* IE10+ */


background: linear-gradient(left, #ff99cc 0%,#ffccff 50%,#ff99cc 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;


/*


	background:transparent;


        border-color: transparent transparent transparent #666;


	border-style:solid;


	border-width: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;


}





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


/* ▼▼▼リボン風記事タイトルにする設定ここから▼▼▼ */


/*記事横幅*/


.columnB .skinMainArea{


width:600px;


border-radius: 10px;  /*丸み*/


}





/* skinMainArea 記事メインエリア左右余白 */


.skinMainArea{


padding-right:30px;


padding-left:30px;


}


/* skinArticle 記事エリア影 */


.skinArticle{


box-shadow: 0px 0px 20px -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;  /*丸み*/


}


/* ▲▲▲リボン風記事タイトルにする設定ここまで▲▲▲ */








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


/* 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;


background:#ffffff;


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


box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.8);/* 影設定 */


border-radius: 0 0 10px 10px;  /*丸み*/


}





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


.skinMenuTitle{


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


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


}





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





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


.skinMenuHeader{


padding:10px 10px 10px 10px;


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


background:transparent;


}





.skinMenuHeader{


background: #ff99cc; /* Old browsers */


background: -moz-linear-gradient(left, #ff99cc 0%, #ffccff 50%, #ff99cc 100%); /* FF3.6+ */


background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff99cc), color-stop(50%,#ffccff), color-stop(100%,#ff99cc)); /* Chrome,Safari4+ */


background: -webkit-linear-gradient(left, #ff99cc 0%,#ffccff 50%,#ff99cc 100%); /* Chrome10+,Safari5.1+ */


background: -o-linear-gradient(left, #ff99cc 0%,#ffccff 50%,##ff99cc 100%); /* Opera11.10+ */


background: -ms-linear-gradient(left, #ff99cc 0%,#ffccff 50%,#ff99cc 100%); /* IE10+ */


background: linear-gradient(left, #ff99cc 0%,#ffccff 50%,#ff99cc 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;


/*


	background:transparent;


        border-color: transparent transparent transparent #666;


	border-style:solid;


	border-width: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;}/*左からの位置調整*/


/*▲▲▲プロフ内調整ここまで▲▲▲*/











/* ▼▼▼ヘッダー下にグローバルメニュー設置ここから▼▼▼ */


/*▼▼位置の指定などここから(通常変更不要) ▼▼*/


.skinContentsArea{


 position:relative;


}


#headerMenu{


 position:absolute;


}


#headerMenu ul.menu{


 margin:0px;


 padding:40px 60px 60px 60px;


 list-style: none;


 left:0px;


 width:890px;


}


#headerMenu ul.menu li{


 display:inline;


 margin:0px;


 padding:0px;


}


#headerMenu ul.menu li a{


 display:block;


 white-space:nowrap;


 overflow:hidden;


 text-align:center;


}





.skinContentsArea{


 padding-top:250px; /* ボタン設置用スペース */


}


#headerMenu{


 top:0px; /* 上下位置調整 */


 left:0px; /* 左右位置調整 */


}


#headerMenu ul.menu li a{


 width:145px; /* ボタンの幅 */


 line-height:145px; /* ボタンの高さ */


 font-size:14px; /* ボタンの文字サイズ */


 border:1px solid #000000;


 float:left;


}





/*▲▲位置の指定などここまで(通常変更不要) ▲▲ */








/* ▲▲▲ヘッダー下にグローバルメニュー設置ここまで▲▲▲ */


/*▼▼ ボタンの色・文字装飾・背景など ▼▼*/


#headerMenu ul.menu li a{ /* 通常時 */


 color:#ffffff; /* 文字色(白) */


 font-weight:bold; /* 太字(あり) */


 text-decoration:none; /* 下線(なし) */


 background-color:#ff99cc; /* 背景色(薄いピンク) */


 background-repeat:repeat; /* 背景画像繰り返し */





 border-radius: 80px;        /* CSS3草案 */  


 -webkit-border-radius: 80px;    /* Safari,Google Chrome用 */  


 -moz-border-radius: 80px;   /* Firefox用 */  





 -webkit-transition: all 1s ease;


 -moz-transition: all 1s ease;


box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);


}


#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */


 color:#ffffff; /* 文字色(白) */


 font-weight:bold; /* 太字(あり) */


 text-decoration:underline; /* 下線(あり) */


 background-color:#ff69b4; /* 背景色(濃いピンク) */


 background-repeat:repeat; /* 背景画像繰り返し */


 -webkit-transform: scale( 1.5 );


 -moz-transform: scale( 1.5 );


}


/* ▲▲▲ヘッダー下にグローバルメニュー設置ここまで▲▲▲ */





/*  ▼▼▼メッセージ部分の枠を変更▼▼▼ */


.skinMessageBoard{


width:98%;


margin-bottom:15px;


border-top:5px double #ff99cc;


border-bottom:5px double #ff99cc;


border-right:5px double #ff99cc;


border-left:5px double #ff99cc;


padding:5px;


box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);  /*影*/


border-radius: 10px;  /*丸み*/


}


/*  ▲▲▲メッセージ部分の枠を変更▲▲▲ */








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


body{


background-color:transparent;


background-image:url("http://stat.blogskin.ameba.jp/blogskin_images/20121023/22/13/a1/p/o02600260netangels1350997378533.png");


background-repeat:repeat;


background-attachment:fixed;


}





/* 背景画像透過処理 */


.skinBody{


background-color:#ffffff;


     filter:alpha(opacity=95);


     -moz-opacity:0.95;


     -khtml-opacity: 0.95;


     opacity:0.95;


}


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





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


.skinHeaderArea{


  height:250px;


  background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121023/22/e5/8e/p/o09800260netangels1350997351821.png);


  background-repeat:no-repeat;


  background-position:center top;


  margin-top:25px;


  box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);


width:980px;}


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

②下記HTMLをフリースペースにコピペ。
※赤字の＃にリンク先URL、青字のメニューに任意のテキスト。
※最後の「このデザインを使う」はご自由に変更して構いません。
※改行がはいるとデザインが崩れるので改行は<!--ここ-->でして下さい。

<!--▼▼まるメニュー設定ここから▼▼-->
<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー１</a></li><!--
--><li><a href="#" target="_blank">メニュー２</a></li><!--
--><li><a href="#" target="_blank">メニュー３</a></li><!--
--><li><a href="#" target="_blank">メニュー４</a></li><!--
--><li><a href="#" target="_blank">メニュー５</a></li><!--
--><li><a href="#" target="_blank">このデザインを使う</a></li><!--
--></ul><!--
--></div>
<!--▲▲まるメニュー設定ここまで▲▲-->