アメブロテンプレートグローバルメニュー付き各カラー（無料） | 知恵の樹・アメブロテンプレート
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

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

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

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

はじめに

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

グローバルメニューを付けたシンプルな感じのデザインを「ブルー、ブラック、ホワイト」の３カラーを用意しました。

※現在、CSSファイル・画像ファイルなどまとめてダウンロードできるサイトを作成中ですので完成の際は便利ですのでご利用下さい。

ノーマル状態から追加した内容は以下です。

・グローバルメニュー

・ブログタイトル、説明部分を角丸

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

・各ヶ所に角丸

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

注意事項

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

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

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

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

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

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

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

設定準備

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

アメブロテンプレートグローバルメニュー付き設定

設置手順は

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


①下記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: #000000; /*ヘッダー色*/


border-radius: 0 50px 0 50px;


}


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


    font-size: 30px;


    color: #fff;


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


    margin:5px 0 0 25px;


}


.skinDescription {


font-size: 15px;


color: #fff;


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


margin:5px 0 0 25px;


}


.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;


}*/





.skinMenu {


   border-radius: 15px;


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


}





.skinMenuHeader{


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


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:60px;             /* メニュー設置用スペース */


}


#headerMenu{


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


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


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


}


#headerMenu ul.menu li a{


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


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


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


}


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


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





#headerMenu ul.menu li a {


   border: 1px solid #707070;


   background: #000000;


   background: -webkit-gradient(linear, left top, left bottom, from(#707070), to(#000000));


   background: -webkit-linear-gradient(top, #707070, #000000);


   background: -moz-linear-gradient(top, #707070, #000000);


   background: -ms-linear-gradient(top, #707070, #000000);


   background: -o-linear-gradient(top, #707070, #000000);


   background-image: -ms-linear-gradient(top, #707070 0%, #000000 100%);


   padding: 12.5px 25px;


   -webkit-border-radius: 6px;


   -moz-border-radius: 6px;


   border-radius: 6px;


   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   text-shadow: #7ea4bd 0 1px 0;


   color: #ffffff;


   font-size: 25px;


   font-weight:bold;


   text-decoration: none;


   vertical-align: middle;


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


  }


#headerMenu ul.menu li a:hover {


   border: 1px solid #707070;


   text-shadow: #1e4158 0 1px 0;


   background: #000000;


   background: -webkit-gradient(linear, left top, left bottom, from(#707070), to(#000000));


   background: -webkit-linear-gradient(top, #707070, #000000);


   background: -moz-linear-gradient(top, #707070, #000000);


   background: -ms-linear-gradient(top, #707070, #000000);


   background: -o-linear-gradient(top, #707070, #000000);


   background-image: -ms-linear-gradient(top, #707070 0%, #000000 100%);


   color: #d6d6d6;


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


}


#headerMenu ul.menu li a:active {


   text-shadow: #1e4158 0 1px 0;


   border: 1px solid #707070;


   background: #65a9d7;


   background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));


   background: -webkit-linear-gradient(top, #000000, #707070);


   background: -moz-linear-gradient(top, #000000, #707070);


   background: -ms-linear-gradient(top, #000000, #707070);


   background: -o-linear-gradient(top, #000000, #707070);


   background-image: -ms-linear-gradient(top, #000000 0%, #707070 100%);


   color: #fff;


   }








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


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





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


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


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


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


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


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


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


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


        border-bottom: 20px solid #000;    


        border-left: 25px solid #000;  


        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;


  }


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

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


.skinBlogHeadingGroupArea {


padding: 20px 0px 30px 0px; 


width: 1000px; 


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


border-radius: 0 50px 0 50px;


border: 2px solid #0a3c59;


}


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


    font-size: 30px;


    color: #000;


    margin:5px 0 0 25px;


}


.skinDescription {


font-size: 15px;


color: #000;


margin:5px 0 0 25px;


}


.skinHeaderArea {


    width: 1005px;


}


.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;


}*/





.skinMenu {


   border-radius: 15px;


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


border: 1px solid #0a3c59;}





.skinMenuHeader{


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


text-align:center;


}





.skinMenuTitle{


  font-size:15px;  


  color:#000;                


  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:60px;             /* メニュー設置用スペース */


}


#headerMenu{


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


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


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


}


#headerMenu ul.menu li a{


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


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


}


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


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





#headerMenu ul.menu li a {


   border: 1px solid #0a3c59;


   background: #ebebeb;


   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ebebeb));


   background: -webkit-linear-gradient(top, #ffffff, #ebebeb);


   background: -moz-linear-gradient(top, #ffffff, #ebebeb);


   background: -ms-linear-gradient(top, #ffffff, #ebebeb);


   background: -o-linear-gradient(top, #ffffff, #ebebeb);


   background-image: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);


   padding: 12.5px 25px;


   -webkit-border-radius: 6px;


   -moz-border-radius: 6px;


   border-radius: 6px;


   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   text-shadow: #7ea4bd 0 1px 0;


   color: #000000;


   font-size: 20px;


   font-weight:bold;


   text-decoration: none;


   vertical-align: middle;


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


  }


#headerMenu ul.menu li a:hover {


   border: 1px solid #0a3c59;


   text-shadow: #1e4158 0 1px 0;


   background: #ebebeb;


   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ebebeb));


   background: -webkit-linear-gradient(top, #ffffff, #ebebeb);


   background: -moz-linear-gradient(top, #ffffff, #ebebeb);


   background: -ms-linear-gradient(top, #ffffff, #ebebeb);


   background: -o-linear-gradient(top, #ffffff, #ebebeb);


   background-image: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);


   color: #b8b8b8;


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


}


#headerMenu ul.menu li a:active {


   text-shadow: #1e4158 0 1px 0;


   border: 1px solid #0a3c59;


   background: #ffffff;


   background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ebebeb));


   background: -webkit-linear-gradient(top, #ebebeb, #ffffff);


   background: -moz-linear-gradient(top, #ebebeb, #ffffff);


   background: -ms-linear-gradient(top, #ebebeb, #ffffff);


   background: -o-linear-gradient(top, #ebebeb, #ffffff);


   background-image: -ms-linear-gradient(top, #ebebeb 0%, #ffffff 100%);


   color: #a6a6a6;


   }








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


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





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


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





.skinArticleHeader2{


background: #ebebeb; 


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


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


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


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


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


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


        border-bottom: 20px solid #ebebeb;    


        border-left: 25px solid #ebebeb;  


        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;


  }


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

ブルー↓
知恵の樹 
/* ＊:::＊:::＊全体の位置指定などここから＊:::＊:::＊ */


.skinBlogHeadingGroupArea {


padding: 20px 0px 30px 0px; 


width: 1000px; 


background: #0000ff; /*ヘッダー色*/


border-radius: 0 50px 0 50px;


}


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


    font-size: 30px;


    color: #fff;


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


    margin:5px 0 0 25px;


}


.skinDescription {


font-size: 15px;


color: #fff;


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


margin:5px 0 0 25px;


}


.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;


}*/





.skinMenu {


   border-radius: 15px;


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


}





.skinMenuHeader{


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


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:60px;             /* メニュー設置用スペース */


}


#headerMenu{


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


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


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


}


#headerMenu ul.menu li a{


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


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


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


}


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


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





#headerMenu ul.menu li a {


   border: 1px solid #0a3c59;


   background: #0000ff;


   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#0000ff));


   background: -webkit-linear-gradient(top, #65a9d7, #0000ff);


   background: -moz-linear-gradient(top, #65a9d7, #0000ff);


   background: -ms-linear-gradient(top, #65a9d7, #0000ff);


   background: -o-linear-gradient(top, #65a9d7, #0000ff);


   background-image: -ms-linear-gradient(top, #65a9d7 0%, #0000ff 100%);


   padding: 12.5px 25px;


   -webkit-border-radius: 6px;


   -moz-border-radius: 6px;


   border-radius: 6px;


   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;


   text-shadow: #7ea4bd 0 1px 0;


   color: #ffffff;


   font-size: 25px;


   font-weight:bold; 


   text-decoration: none;


   vertical-align: middle;


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


  }


#headerMenu ul.menu li a:hover {


   border: 1px solid #0a3c59;


   text-shadow: #1e4158 0 1px 0;


   background: #0000ff;


   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#0000ff));


   background: -webkit-linear-gradient(top, #65a9d7, #0000ff);


   background: -moz-linear-gradient(top, #65a9d7, #0000ff);


   background: -ms-linear-gradient(top, #65a9d7, #0000ff);


   background: -o-linear-gradient(top, #65a9d7, #0000ff);


   background-image: -ms-linear-gradient(top, #65a9d7 0%, #0000ff 100%);


   color: #fff;


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


}


#headerMenu ul.menu li a:active {


   text-shadow: #1e4158 0 1px 0;


   border: 1px solid #0a3c59;


   background: #0000ff;


   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#0000ff));


   background: -webkit-linear-gradient(top, #3e779d, #0000ff);


   background: -moz-linear-gradient(top, #3e779d, #0000ff);


   background: -ms-linear-gradient(top, #3e779d, #0000ff);


   background: -o-linear-gradient(top, #3e779d, #0000ff);


   background-image: -ms-linear-gradient(top, #3e779d 0%, #0000ff 100%);


   color: #fff;


   }








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


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





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


.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: #0000ff;  


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


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


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


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


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


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


        border-bottom: 20px solid #0000ff;    


        border-left: 25px solid #0000ff;  


        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;


  }


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

知恵の樹