はじめに
カスタマイズやテンプレートご利用の方へ！
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)
★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。
★ご質問などの返事が遅れる場合がありますがご了承下さい。
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)
★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。
★ご質問などの返事が遅れる場合がありますがご了承下さい。
アメブロテンプレート無料（サイト風）について
今回はこんなのどうかな・・？て感じで作ってみました。一見サイト風に見えるテンプレートです。
画像はヘッダー画像と背景の２ヶ所です。
何気にシンプルに作ってありますので、これをベースにカスタムするのも良いかもしれません。
ノーマルからの変更箇所は
・メニュー２ヶ所設置（縦横）
・記事タイトル、サイドカラムタイトル部分リボン風
・その他
また、各メニュー、各タイトル部分リボンのカラーはお好きな色に変更できますのでお好みの色に変更して下さい。
参考にどうぞ→WEBカラーコード216色
簡略説明
メニューやリボンのカラーを変えたい場合はCSS内説明を参考にその箇所の
「background-color: #★★★★★★;」の★６個の場所の記述を↑のWEBカラーコードを参考に変更して下さい。
（もしくはbackground: #★★★★★★;）
実際に見ていただいた方が早いと思うのでサンプル→「サイト風テンプレ 」※一定期間後削除します。
注意事項
転載、転売などはご遠慮下さい。（私的には、そこまでの物ではありませんのでオススメしませんw）このテンプレートは画像も使用しています。
※ご自由に変更可能です。
テンプレートで使用している画像は知恵の樹の画像フォルダに保存してありますが、何らかの理由で削除する場合もあるかもしれませんので、ご自身のアメブロ画像フォルダに保存することをオススメします。
CSS３での表現は若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。
テンプレートを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）
テンプレ利用の際のお願い
・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。・コメント欄にて利用報告をお願い致します。
・ブログにてご紹介していただけたら喜びます。（お任せですw）
設定準備
①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「２カラム・右ワイドメニュー」に設定。※他カラムは対応はテストしていません。
アメブロテンプレート無料（サイト風）設定
設置手順は③手順手順①CSSをコピペでCSS編集画面にて「CSSの追記」です。
手順②フリースペースにコピペで「HTMLの追記」です。
手順③画像URLを追記です。
①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※赤字の部分が各画像URLです。
※調整は説明を参考にしてみて下さい。
/* ＊:::＊:::＊知恵の樹サイト風テンプレ＊:::＊:::＊ */
/*ヘッダー上部下部メニュー余白設定 */
.skinHeaderFrame {
padding-bottom: 30px;
padding-top: 40px;
}
.skinHeaderArea{
width:1100px;
}
.skinHeaderFrame {
position:relative;
width:1100px;
margin:0 auto;
}
/*ヘッダー上部下部メニュー位置設定 */
.menubar ul {
position:absolute;
top:0px;
left:0px;
margin:0;
padding-left: 50px;
list-style-type:none;
}
.menubar ul li {
width:198px;
float:left;
height:36px;
line-height:36px;
text-align:center;
font-weight:bold;
margin-right:1px;
}
.menubar ul li a { /*メニュー*/
display:block;
text-decoration:none;
color:#ffffff; /*文字色*/
background-color:#a9a9a9; /*背景色*/
font-size:14px;
}
.menubar ul li a:hover { /*マウスカーソルを合わせたとき*/
color:#ffffff; /*文字色*/
background-color:#c0c0c0; /*背景色*/
}
/* ▼ブログタイトル、説明文位置設定ここから▼ */
.skinTitleArea {
padding-bottom: 4px;
margin-top:60px;
margin-left: 10px;
}
.skinDescriptionArea {
margin-top:0px;
margin-left: 10px;
}
/* ▲ブログタイトル、説明文位置設定ここまで▲ */
/* ▼縦メニュー設定ここから▼ */
.skinFrame2{
position:relative;
}
/* 縦メニュー */
#nave {
position:absolute;
top:42px;
left:50px;
}
#nave{
width: 198px;
height: 36px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #cccccc;
}
#nave li {
margin: 0;
padding: 0;
border-bottom: 1px solid #cccccc;
}
#nave a {
background-color:#a9a9a9;
display: block;
width: 198px ;
height: 36px;
color: #FFFFFF;
font-size:14px;
line-height:36px;
text-align:center;
}
#nave a:hover {
background-color:#c0c0c0;
color: #FFFFFF;
width: 198px ;
height: 36px;
}
/* ▲縦メニュー設定ここまで▲ */
/* ▼アメブロヘッダー画像設定ここから▼ */
.skinHeaderArea {
height: 300px;
background-image: url(http://stat.ameba.jp/user_images/20121111/19/tienoki1/af/00/j/o0790030012281240076.jpg);
background-repeat: no-repeat;
background-position: center bottom;
width: 790px;
margin-left: 253px;
padding-top: 1px;
}
/* ▲アメブロヘッダー画像設定ここまで▲ */
/*▼▼ブログ画像ボタン非表示ここから▼▼*/
.imagelistLink {
display:none!important;
}
/* ▲▲ブログ画像ボタン非表示ここまで▲▲ */
/*▼▼body背景ここから▼▼*/
body{
background-color:transparent;
background-image:url("http://stat.ameba.jp/user_images/20121111/00/tienoki1/2c/1f/j/o0390039012280069559.jpg");
background-position:center top;
background-repeat:repeat;
background-attachment:scroll;
}
/* ▲▲body背景ここまで▲▲ */
/* ＊:::＊:::＊記事タイトルリボン設置ここから＊:::＊:::＊ */
.skinArticle {
width:600px;
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: #cccccc;
background: -moz-linear-gradient(left, #cccccc 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(100%,#cccccc));
background:-webkit-linear-gradient(left, #cccccc 0%,#cccccc 100%);
background:-o-linear-gradient(left, #cccccc 0%,#cccccc 100%);
background:-ms-linear-gradient(left, #cccccc 0%,#cccccc 100%);
background:linear-gradient(left, #cccccc 0%,#cccccc 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 #cccccc;
border-bottom: 20px solid #cccccc;
border-left: 25px solid #cccccc;
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;
}
/* ＊:::＊:::＊記事タイトルリボン設置ここまで＊:::＊:::＊ */
/* ▼▼▼サイドバーリボンにする設定ここから▼▼▼ */
/* 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: #cccccc;
background: -moz-linear-gradient(left, #cccccc 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(100%,#cccccc));
background:-webkit-linear-gradient(left, #cccccc 0%,#cccccc 100%);
background:-o-linear-gradient(left, #cccccc 0%,#cccccc 100%);
background:-ms-linear-gradient(left, #cccccc 0%,#cccccc 100%);
background:linear-gradient(left, #cccccc 0%,#cccccc 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 #cccccc;
border-bottom: 20px solid #cccccc;
border-left: 25px solid #cccccc;
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;
}
/*▲▲▲リボン風サイドタイトル装飾ここまで▲▲▲*/
/* ▼▼サイドカラム下ずらし▼▼ */
.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;
}
/* ▼▼フレーム背景設定ここから▼▼ */
div.skinFrame {
width: 1100px;
background: white;
border-left: solid 1px lightGrey;
border-right: solid 1px lightGrey;
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;
}
/* ▲▲フレーム背景設定ここまで▲▲ */
/* ＊:::＊:::＊知恵の樹サイト風テンプレ＊:::＊:::＊ */
②下記HTMLをフリースペースにコピペ。
※赤字の＃にリンク先URL、青字のメニューに任意のテキスト。
※改行がはいるとデザインが崩れるので改行は<!--ここ-->でして下さい。
<div class="menubar"><ul><!--
--><li><a href="#">横メニュー1</a></li><!--
--><li><a href="#">横メニュー2</a></li><!--
--><li><a href="#">横メニュー3</a></li><!--
--><li><a href="#">横メニュー4</a></li><!--
--><li><a href="#">横メニュー5</a></li><!--
--></ul></div>
<div id="nave"><!--
--><ul><!--
--><li><a href="#">HOME</a></li><!--
--><li><a href="#">メニュー１</a></li><!--
--><li><a href="#">メニュー２</a></li><!--
--><li><a href="#">メニュー３</a></li><!--
--><li><a href="#">メニュー４</a></li><!--
--><li><a href="#">メニュー５</a></li><!--
--><li><a href="#">メニュー６</a></li><!--
--><li><a href="#">問い合わせ</a></li><!--
--></ul><!--
--></div>③各画像をコピーして自分のアメブロ画像フォルダに登録して利用。
※一応のサンプル画像です、お好きな画像に変更できます。
※画像コピーはブラウザにより違いますが画像上で右クリック→画像を保存などで可能です。
ヘッダー画像↓サイズ790×300
全体背景画像↓
