はじめに
カスタマイズやテンプレートご利用の方へ！
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)
★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。
★ご質問などの返事が遅れる場合がありますがご了承下さい。
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)
★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。
★ご質問などの返事が遅れる場合がありますがご了承下さい。
アメブロテンプレート無料（女子向き）について
今回はこんなのどうかな・・？て感じで女子向き風？に作ってみました。
デザインのベースはシンプルで画像をボチボチ使用しました。
普段は画像をあまり使わずにCSSで表現しようと努力していますが、たまに使うとまた違う雰囲気ですね。
テンプレのネームが決まらずに女子向きにしましたｗ
実際に見ていただいた方が早いと思うのでサンプル→「
注意事項
転載、転売などはご遠慮下さい。（私的には、そこまでの物ではありませんのでオススメしませんw）
このテンプレートは画像も使用しています。
※ご自由に変更可能です。
テンプレートで使用している画像は知恵の樹の画像フォルダに保存してありますが、何らかの理由で削除する場合もあるかもしれませんので、ご自身のアメブロ画像フォルダに保存することをオススメします。
CSS３での表現は若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。
テンプレートを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）
テンプレ利用の際のお願い
・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。
・コメント欄にて利用報告をお願い致します。
・ブログにてご紹介していただけたら喜びます。（お任せですw）
設定準備
①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「２カラム・右ワイドメニュー」に設定。
※他カラムは対応はテストしていません。
アメブロテンプレート無料（女子向き）設定
設置手順は③手順
手順①CSSをコピペでCSS編集画面にて「CSSの追記」です。
手順②フリースペースにコピペで「HTMLの追記」です。
手順③画像URLを追記です。
①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※赤字の部分が各画像URLです。
※調整は説明を参考にしてみて下さい。
/*▼知恵の樹テンプレここから▼*/
.skinHeaderArea{
background-color:transparent;
height:232px;
width:1100px;
background-image:url();
background-repeat:no-repeat;
background-position:center top;
}
.skinHeaderArea2 {
height:232px;
width:1100px;
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121108/17/ae/78/p/o11000232military-ag1352363312352.png);
background-repeat:no-repeat;
background-position:center top;
background-color:transparent;
}
/* ▼ContentsFrame枠背景設定▼ */
.skinContentsFrame{
background-color:transparent;
background-image:url("http://stat.blogskin.ameba.jp/blogskin_images/20121108/17/6c/67/p/o11000129military-ag1352365167902.png");
background-position:center top;
background-repeat:repeat-y;
background-attachment:scroll;
}
/* ▼body背景設定▼ */
body{
background-color:transparent;
background-image:url("http://stat.blogskin.ameba.jp/blogskin_images/20121108/19/b1/41/g/o01500170military-ag1352369988638.gif");
background-position:center top;
background-repeat:repeat;
background-attachment:scroll;
}
/* ▼サイドメニュー設定▼ */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#fff;/* ←サイドメニューに背景を敷きたいとき */
border-radius: 20px;}
.skinMenu2{}
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#fff;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
.skinMenuHeader {
text-align:center;
}
.skinMenuTitle{
color:#b5a642;
font-size:18px;
font-weight:bold;
}
.columnB .skinSubA {
float: right;
width: 300px;
margin-right: 7px;
}
/* ▼skinTitle ブログタイトル文字▼ */
.skinTitleArea {
margin: 100px 0 0 420px; /* 左から上右下左 */
}
.skinTitle, .skinTitle:visited, .skinTitle:hover, .skinTitle:focus {
padding: 10px;
border-radius: 20px;
color: #b5a642;
background-image:url(http://stat.ameba.jp/user_images/20121109/17/military-ag/8d/8f/p/o0100010012277779068.png);
}
/* ▼skinDescription ブログの説明文字▼ */
.skinDescriptionArea {
margin: 10px 0 0 420px; /* 左から上右下左 */
}
.skinDescription {
padding: 10px;
border-radius: 20px;
color: #b5a642;
background-image:url(http://stat.ameba.jp/user_images/20121109/17/military-ag/8d/8f/p/o0100010012277779068.png);
}
/* 記事エリア幅位置調整 */
.columnB .skinMainArea {
width:655px;
margin-left:7px;
}
/*記事タイトルを中央寄せ*/
.skinArticleHeader{
text-align:center;
}
/*記事タイトル装飾*/
.skinArticleHeader h1 {
margin: 0px;
padding: 0px;
font-size: 1em;
font-weight:normal;
}
/*▼記事エリア枠画像▼*/
.skinArticle{
padding:0;
border:none;
}
.skinArticleHeader{ /* タイトル部 */
margin:0;
padding:7px 30px 0px 30px; /*タイトル周辺の余白(↑→↓←の順) */
border:none;
background-image:url(http://stat.ameba.jp/user_images/20121108/20/military-ag/73/39/p/o0655003012276563381.png);
background-position: bottom;}
.skinArticleTitle,.skinArticleTitle:visited,.skinArticleTitle:hover,.skinArticleTitle:focus{
color:#b5a642;
font-size:18px;
}
.skinArticleBody2{ /* ボディ部 */
margin:0;
padding:0 30px 10px 30px; /* 記事周辺の余白(↑→↓←の順) */
border:none;
background-image:url(http://stat.ameba.jp/user_images/20121108/20/military-ag/88/2b/p/o0655019312276578016.png);
background-repeat:no-repeat;}
.articleThemeListArea,.articleImageListArea{
margin-bottom:0;
padding-bottom:20px;
}
.skinArticleFooter{ /* フッタ部 */
margin:0;
padding:0 30px 10px 30px; /* フッタ部の余白(↑→↓←の順) */
background-image:url(http://stat.ameba.jp/user_images/20121108/20/military-ag/3e/fa/p/o0655006912276627400.png);
background-position:left bottom;
}
/* ▼メニュー設定▼ */
.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{
width: 982px;
padding-top:68px; /* メニュー設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:3px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:68px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}
/*▲▲▲ 位置・サイズ調整 */
/*▼▼▼ 色・文字装飾・背景など */
#headerMenu ul.menu li a{ /* 通常時 */
color:#b5a642; /* 文字色 */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-image:url(http://stat.ameba.jp/user_images/20121109/16/military-ag/f2/bf/j/o0748006812277680413.jpg); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#b5a642; /* 文字色 */
font-weight:normal; /* 太字(なし) */
text-decoration:underline; /* 下線(あり) */
background-image:url(http://stat.ameba.jp/user_images/20121109/17/military-ag/5d/9c/p/o0196006812277762818.png); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
②メニュー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>
③各画像をコピーして自分のアメブロ画像フォルダに登録して利用。
※画像コピーはブラウザにより違いますが画像上で右クリック→画像を保存などで可能です。
ヘッダー画像↓
全体背景画像↓
メインカラム背景画像↓
記事枠タイトル画像↓
記事枠サイド画像↓
メニュー画像↓
メニューボタン画像↓
ブログタイトル、説明背景画像↓（透過白なので見えないかも・・）
