アメブロテンプレート無料グローバルメニュー付き（シンプル版）

はじめに

このテンプレートは無料配布です。

デザイン的にグローバルメニューを付けたシンプルな感じです。

追加した内容は以下です。

・グローバルメニュー

・記事タイトル部分リボン風

・各ヶ所に角丸

※メインカラムなどの幅を変更しています。

イメージ画像

サンプルブログはこちら→~~アメブロテンプレート無料グローバルメニュー付き（シンプル版）~~　サンプルページは終了しました

注意事項

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

このテンプレートは使用している画像はありません。
全てCSSで表現しています。
※若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。

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

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

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

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

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

設定準備

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

アメブロテンプレ無料メニュー付き設定

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

①下記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></ul></div>

②下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。

※調整は説明を参考にしてみて下さい。

/* ＊:::＊:::＊全体の位置指定などここから＊:::＊:::＊ */


.skinBlogHeadingGroupArea {


padding: 20px 0px 30px 0px; 


width: 1000px; 


background: #474747; /*ヘッダー色*/


border-radius: 15px 15px 0 0;


}


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


    font-size: 30px;


    color: #fff;


    text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;


}


.skinDescription {


font-size: 15px;


color: #fff;


  text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;


}


.skinHeaderArea {


    width: 1000px;


}


.skinContentsArea {


    width: 1050px;


}


.layoutContentsA {


  width:1000px; 


  background:#fff;


  border-radius: 15px;


  margin:5px 0 0 25px;


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


}


.columnB .skinMainArea {


    width: 650px;


}


.skinArticle {


  border-radius: 15px;


  width:600px; 


  margin:0 0 0 25px;


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


}


.columnB .skinSubA {


  border-radius: 15px;


  margin:15px 25px 0 0 ;


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


}





.skinMenuHeader{


background:#474747;/* ←サイドメニューのタイトル色 */


text-align:center;


}





.skinMenuTitle{


  font-size:15px;  


  color:#ffffff;                


  font-weight:bold;           


}





.skinMessageBoard {    /*メッセージボード*/


  border-radius: 15px;


 margin:15px 15px 0 25px ;


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


 width:600px; 


 border-style:none;


}


/* ＊:::＊:::＊全体の位置指定などここまで＊:::＊:::＊ */


/* ＊:::＊:::＊ヘッダー下にグローバルメニューを設置するここから＊:::＊:::＊ */


/* ▼▼▼ 変更しない▼▼▼ */


.skinContentsArea{


  position:relative;


}


#headerMenu{


  position:absolute;


  margin:0;


  padding:0;


}


#headerMenu ul.menu{


  margin:0;


  padding:0;


  list-style: none;


}


#headerMenu ul.menu li{


  display:inline;


}


#headerMenu ul.menu li a{


  display:block;


  float:left;


  margin:0;


  padding:0;


  white-space:nowrap;


  overflow:hidden;


  text-align:center;


}


/* ▲▲▲ 変更しない▲▲▲ */


/* ▼▼▼ 位置・サイズ調整▼▼▼ */


.skinContentsArea{


  padding-top:50px;             /* メニュー設置用スペース */


}


#headerMenu{


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


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


  width:1000px;                  /* メニュー全体の幅 */


}


#headerMenu ul.menu li a{


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


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


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


}


/*▲▲▲ 位置・サイズ調整▲▲▲ */


/*▼▼▼ 色・文字装飾・背景など▼▼▼ */


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


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


  border:1px solid #646464; 


  -webkit-border-radius: 3px; 


  -moz-border-radius: 3px;


  border-radius: 3px;


  text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;


  font-weight:bold; 


  color: #FFFFFF;  


  background-color: #7d7e7d;


  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));


 background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);


 background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);


 background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);


 background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);


 background-image: linear-gradient(top, #7d7e7d, #0e0e0e);


filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);


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


}


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


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


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


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


 border:1px solid #646464; 


 background-color: #646464;


 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646464), color-stop(100%, #282828));


 background-image: -webkit-linear-gradient(top, #646464, #282828);


 background-image: -moz-linear-gradient(top, #646464, #282828);


 background-image: -ms-linear-gradient(top, #646464, #282828);


 background-image: -o-linear-gradient(top, #646464, #282828);


 background-image: linear-gradient(top, #646464, #282828);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#646464, endColorstr=#282828);


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


}


/*▲▲▲ 色・文字装飾・背景など▲▲▲ */


/* ＊:::＊:::＊ヘッダー下にグローバルメニューを設置するここまで＊:::＊:::＊ */





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


.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:#ffffff;}





.skinArticleHeader2{


background: #444;  


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


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


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


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


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


background:linear-gradient(left, #222 0%,#444 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 #444;  


        border-bottom: 20px solid #444;    


        border-left: 25px solid #444;  


        border-right: 10px solid transparent;  


        margin: 0 -30px 0 0;


        padding: 0px;	


}





.skinArticleHeader2:before {


	left: 0px;


        bottom: -20px;


	right:auto;


        width: 0;


        height: 0;


        border-top: 10px solid #696969;


        border-bottom: 10px solid transparent;


        border-left: 10px solid transparent;


        border-right: 10px solid #696969;


  }


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

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