はじめに
カスタマイズやテンプレートご利用の方へ！
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)
★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。
★ご質問などの返事が遅れる場合がありますがご了承下さい。
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)
★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。
★ご質問などの返事が遅れる場合がありますがご了承下さい。
アメブロテンプレート無料(オシャレブラック)について
今回はブラック系のテンプレの紹介です。以前にショップ用を作成した時に訪問者様にアピールなどをするスペースが多いのも良いのかな？と思い作成してみました。
このテンプレは自分には珍しく画像もボチボチ使い、色合いの相性を気にして作成しました。
イメージカラーがブラック系ならばショップでも個人でも良いかもしれません・・。
全体のイメージカラーがブラックなので、利用する場面を選ぶかもしれませんが･･･(･∀･i)ﾀﾗｰ･･･
ベーステンプレからの変更箇所
・ヘッダー画像上にグローバルメニュー
・ヘッダー下にお知らせなどのボード（リボン）設置
・ボード（リボン）の下に３ボックスボード設置
・その他
実際に見ていただいた方が早いと思うのでサンプル→「
注意事項
転載、転売などはご遠慮下さい。（私的には、そこまでの物ではありませんのでオススメしませんw）このテンプレートは画像も使用しています。
※ご自由に変更可能です。
CSS３での表現は若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。
テンプレートを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）
テンプレ利用の際のお願い
・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。・コメント欄にて利用報告をお願い致します。
・ブログにてご紹介していただけたら喜びます。（お任せですw）
設定準備
①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「２カラム・右ワイドメニュー」に設定。※他カラムは対応はテストしていません。
アメブロテンプレート無料（オシャレブラック）設定
設置手順は③手順手順①CSSをコピペでCSS編集画面にて「CSSの追記」です。
手順②フリースペースにコピペで「HTMLの追記」です。
手順③画像URLを追記です。
①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※赤字の部分が各画像URLです。
※調整は説明を参考にしてみて下さい。
.skinBody{
background:#1a1a1a;
}
/* ヘッダー画像設定 */
.skinHeaderArea{
height:550px;
background:#1A1A1A;
background-image:url(ヘッダー画像URL);
background-repeat:no-repeat;
background-position:380px;
border-top: 3px groove #808080;
border-right: 3px groove #808080;
border-bottom: 3px groove #808080;
border-left: 3px groove #808080;
width: 943px;
box-shadow: 2px 2px 10px 6px #000000;
}
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#ffffff;
font-weight:bold;
font-size:30px;
padding:5px;
border-top:groove 3px #808080;
border-bottom:groove 3px #808080;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#ffffff;
}
/* skinTitle ブログタイトル文字 */
.skinTitleArea {
padding: 90px 0 0 20px;
}
/* skinDescription ブログの説明文字 */
.skinDescriptionArea {
font-size:20px;
padding: 10px 0 0 20px;
}
/* ▼▼▼リボンBOX設定▼▼▼ */
.skinFrame{
width:1000px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
/* ▼▼リボンBOX設定▼▼ */#ribon{
position:absolute;
top:500px;/* 位置 */
left:-14px;/* 位置 */
z-index:201;
height:155px;/* 高さ */
width:1100px;/* 横 */
overflow:auto;/* スクロールバー */
padding:0px;/* 余白 */
font-size:12px;/* 文字の大きさ */
color:blue;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
}
#ribon1{
position:absolute;
top: 540px;
left: 15px;
z-index: 205;
height: 95px;
width: 970px;
overflow:auto;/* スクロールバー */
padding:0px;/* 余白 */
font-size:15px;/* 文字の大きさ */
color:#000000;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
}
/* ▼▼中断BOX設定▼▼ */
.skinContentsArea{
padding-top:430px; /* BOX設置用スペース */
}
#box{
position:absolute;
top: 670px;
left: -10px;
z-index: 206;
height: 212px;
width: 1018px;
overflow:auto;/* スクロールバー */
font-size:15px;/* 文字の大きさ */
padding:0px;/* 余白 */
color:#ffffff;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
border: 3px solid #000000;
background-image:url(BOX上部画像URL);
}
#box1{
position:absolute;
top: 882px;
left: -10px;
z-index: 207;
height: 216px;
width: 1018px;
overflow:auto;/* スクロールバー */
font-size:15px;/* 文字の大きさ */
padding:0px;/* 余白 */
color:#ffffff;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
border: 3px solid #000000;
background-image:url(BOX下部画像URL);
}
#box_text1{
position:absolute;
top: 712px;
left: 32px;
z-index: 208;
height: 340px;
width: 300px;
overflow:auto;/* スクロールバー */
font-size:15px;/* 文字の大きさ */
padding:0px;/* 余白 */
color:#ffffff;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
background-image:url();
}
#box_text2{
position:absolute;
top: 712px;
left: 348px;
z-index: 209;
height: 340px;
width: 300px;
overflow:auto;/* スクロールバー */
font-size:15px;/* 文字の大きさ */
padding:0px;/* 余白 */
color:#ffffff;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
background-image:url();
}
#box_text3{
position:absolute;
top: 712px;
left: 664px;
z-index: 210;
height: 340px;
width: 300px;
overflow:auto;/* スクロールバー */
font-size:15px;/* 文字の大きさ */
padding:0px;/* 余白 */
color:#ffffff;/* 文字の色 */
background-color:transparent;/* 背景色 */
background-repeat:repeat
background-image:url();
}
/* ▼▼画像一覧を見る非表示▼▼ */
div.userLinkArea {
display: none !important;
}
/* ▼▼ヘッダー下にグローバルメニュー設置ここから▼▼ */
/*▼▼ 位置の指定などここから(通常変更不要)▼▼*/
.skinFrame{
width:1000px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
box-shadow: 0px 3px 7px #a9a9a9;
-moz-box-shadow: 0px 3px 7px #a9a9a9; /* Firefox用 */
-webkit-box-shadow: 0px 3px 7px #a9a9a9; /* Safari,Google Chrome用 */
}
#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;
box-shadow: 0px 3px 7px #a9a9a9;
-moz-box-shadow: 0px 3px 7px #a9a9a9; /* Firefox用 */
-webkit-box-shadow: 0px 3px 7px #a9a9a9; /* Safari,Google Chrome用 */
}
/*▲▲▲ 位置の指定などここから(通常変更不要) ▲▲▲*/
/*▼▼▼ サイズ・位置など ▼▼▼*/
#headerMenu{
top:130px; /* 上下位置調整 */
left:26px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:158px; /* ボタンの幅 */
line-height:67px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}
/*▲▲▲ サイズ・位置など ▲▲▲*/
/*▼▼▼ ボタンの色・文字装飾・背景など ▼▼▼*/
#headerMenu ul.menu li a{ /* 通常時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#000000; /* 背景色(黒) */
background-image:url(メニューボタン画像URL); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
border-bottom: 1px solid #ffffff;
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#000000; /* 文字色(黒) */
font-weight:normal; /* 太字(なし) */
text-decoration:underline; /* 下線(あり) */
background-color:#ffffff; /* 背景色(白) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
box-shadow: 2px 2px 10px 10px #dcdcdc inset;
}
/* ▲▲ヘッダー下にグローバルメニュー設置ここまで▲▲ */
/*▼▼▼ グローバルメニュー左右画像位置 ▼▼▼*/
#menu1{
position:absolute;
top:130px;/* 位置 */
left:-175px;/* 位置 */
z-index:202;
height:67px;/* 高さ */
width:200px;/* 横 */
background-image:url(メニュー外左側画像URL); /* 背景画像 */
background-repeat:repeat-x;
border-bottom: 1px solid #ffffff;
box-shadow: 0px 3px 7px #a9a9a9;
-moz-box-shadow: 0px 3px 7px #a9a9a9; /* Firefox用 */
-webkit-box-shadow: 0px 3px 7px #a9a9a9; /* Safari,Google Chrome用 */
}
#menu2{
position:absolute;
top:130px;/* 位置 */
left:975px;/* 位置 */
z-index:203;
height:67px;/* 高さ */
width:200px;/* 横 */
background-image:url(メニュー外右側画像URL); /* 背景画像 */
background-repeat:repeat-x;
border-bottom: 1px solid #ffffff;
box-shadow: 0px 3px 7px #a9a9a9;
-moz-box-shadow: 0px 3px 7px #a9a9a9; /* Firefox用 */
-webkit-box-shadow: 0px 3px 7px #a9a9a9; /* Safari,Google Chrome用 */
}
/*▼▼▼ 記事タイトル設定 ▼▼▼*/
.skinArticleHeader{
background-image:url(記事タイトル画像URL);
background-repeat:no-repeat;/* 繰り返ししない */
width:665px;/*背景画像の横幅*/
height:63px;/*背景画像の縦幅*/
margin:0 0 0 -2px;
padding:0;
border-left:0px solid #e4e4e4; /*薄いグレーの線をなくす*/
}
.skinArticleHeader h1{
padding-top:18px;/*文字の上の隙間*/
padding-left:0px;/*文字の左の隙間*/
text-align:center;
}
.skinArticleTitle, .skinArticleTitle:hover, .skinArticleTitle:focus, .skinArticleTitle:visited {
font-size: 20px;
font-weight: bold;
color: #ffffff;
}
/*▼▼▼ 記事欄背景設定 ▼▼▼*/
.skinArticle {
background-image:url();
background-repeat:repeat;
border-top: 2px solid #c0c0c0;
border-right: 2px solid #c0c0c0;
border-bottom: 2px solid #c0c0c0;
border-left: 2px solid #c0c0c0;
box-shadow:inset 2px 2px 10px #036;
}
/* ▼▼▼skinMenu サイドバーメニューのエリア▼▼▼ */
.skinMenu{
border-top: 2px solid #c0c0c0;
border-right: 2px solid #c0c0c0;
border-bottom: 2px solid #c0c0c0;
border-left: 2px solid #c0c0c0;
box-shadow:inset 2px 2px 10px #036;
}
.skinMenu {
background-color:#ffffff;
}
.skinMenuHeader{
padding:5px 10px;
background:transparent;
}
/* ▼▼▼ サイドメニュータイトル文字▼▼▼ */
.skinMenuTitle{
color:#000000;
font-weight:bold;
font-size:20px;
}
div.skinMenuHeader{
text-align:center;
text-shadow: gray 2px 2px 5px;
}
②下記HTMLをフリースペースにコピペ。
※メニューの赤字の＃にリンク先URL、青字のメニューに任意のテキスト。
※緑字のリボン画像URLにリボン画像のURLを記入。
※改行がはいるとデザインが崩れるので改行は<!--ここ-->でして下さい。
<!--リボン画像-->
<div id="ribon">
<img border="0" src="リボン画像URL" />
</div>
<!--リボン画像内テキスト-->
<div id="ribon1" align="center">＊お知らせ＊
------------------------------------------ここに「お知らせ」なども記入できます！----------------------------------------------
上の点線の幅まで文字を入れられるので色々と利用方法があると思います。
文字数が多い(縦行)と自動でスクロールバーがでます！
</div>
<!--BOX画像-->
<div id="box"></div>
<!--BOX画像内テキスト（text1左、text2中、text3右）-->
<div id="box1"></div>
<div id="box_text1" align="center">-------------フリーエリア１-------------
画像を貼ったり色々できます！
縦行が背景の画像より長くなると
スクロールできます！</div>
<div id="box_text2" align="center">-------------フリーエリア２-------------
画像を貼ったり色々できます！
縦行が背景の画像より長くなると
スクロールできます！</div>
<div id="box_text3" align="center">-------------フリーエリア３-------------
画像を貼ったり色々できます！
縦行が背景の画像より長くなると
スクロールできます！</div>
<!--メニュー外側左右画像位置-->
<div id="menu1"></div><div id="menu2"></div>
<!--グローバルメニュー設定-->
<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>
③各画像をコピーして自分のアメブロ画像フォルダに登録して利用。
※画像コピーはブラウザにより違いますが画像上で右クリック→画像を保存などで可能です。
グローバルメニュー画像
グローバルメニュー外側左右画像
リボンBOX画像（フリースペースに追記）
中断BOX上部画像
中断BOX下部画像
記事タイトル画像
