はじめに
このテンプレートは無料配布です。読者様からのご意見で以前作成したアメブロテンプレート(くま)をプチ改良しました。
変更ヶ所は全体的な色合いとヘッダー部分の顔のデザイン及び、オンマウス(カーソルをのせる)すると顔が変わる様にしました。
オンマウスで変わるので通常の顔→次の顔の2種類となります。
scriptを使い数種類の表情と思いましたが、私が作画の才能がなく断念(;^_^A
2種類となりました(^^ゞ
気に入りましたら、ご利用下さい。
イメージ画像
サンプルブログはこちら→
※サンプルは削除しました。
注意事項
転載、転売などはご遠慮下さい。(私的には、そこまでの物ではありませんのでオススメしませんw)使 用している画像については、「ヘッダー」「記事タイトル(肉球)」「サイドメニュー(肉球)」のみになり、好きな画像に変更可能ですが、使用している画像 は当方でアメブロの画像ファイルに保管していますが、削除の予定は特にありませんが心配な方はご自身の画像フォルダに保存することを勧めます。
テンプレートを利用しての如何なる損害、損失も保証致しかねます。(何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。)
テンプレ利用の際のお願い
・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。・コメント欄にて利用報告をお願い致します。
・ブログにてご紹介していただけたら喜びます。(お任せですw)
アメブロテンプレート無料(くま)設置準備
①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「2カラム・メニュー右」に設定。※他カラムは対応していません。
アメブロテンプレート無料(くま)設置
設置手順はコピペでCSS編集画面にて「CSSの追記」だけの①手順です。①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※調整は説明を参考にしてみて下さい。
赤字が画像のURLになります。
/* ▼▼**テンプレートくまここから**▼▼ */
/* ▼▼ヘッダー画像設定ここから▼▼ */
/*ヘッダー*/
.skinHeaderArea{
width:980px;/*画像の横*/
}
.skinHeaderArea{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20120815/19/e1/51/p/o09800500tienoki1345027518096.png);
width:980px;/*画像の横*/
height:250px;/*画像の縦*/
background-repeat:no-repeat;/*繰り返さない*/
background-position: center top;/*中央上に*/
display:block;
overflow:hidden;
outline:none;
}
.skinHeaderArea:hover{
background-position:center bottom;/*中央下に*/
}
/* ▲▲ヘッダー画像設定ここまで▲▲ */
/* ▼▼skinContentsAreaの背景色▼▼ */
.skinContentsArea {
background-color:#c4972f;
}
/* ▼▼メインカラム幅調整と位置調整▼▼ */
.columnB .skinMainArea {
width: 650px;
margin-left:10px;
}
/* ▼▼サイドカラム位置調整▼▼ */
.columnB .skinSubA {
margin-right:10px;
}
/* ▼▼ブログタイトル文字調節▼▼ */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
margin:20px 0 0 300px; /* ブログタイトル文字場所 */
}
/* ▼▼ブログの説明文字調節▼▼ */
.skinDescription{
margin:20px 0 0 300px; /* ブログの説明文字場所 */
}
/* ▼▼サイドタイトルエリア肉球画像▼▼ */
.skinSubArea .skinMenuHeader{
padding-left:25px;
background-image:url(http://stat.ameba.jp/user_images/20120803/17/tienoki/42/c5/g/o0022002212114085492.gif);
background-repeat:no-repeat;
background-position:left center;
background-color:#ffffff;
}
/* ▼▼記事タイトルエリア肉球画像▼▼ */
.skinArticleHeader{
padding-left:25px;
background-image:url(http://stat.ameba.jp/user_images/20120803/17/tienoki/42/c5/g/o0022002212114085492.gif);
background-repeat:no-repeat;
background-position:left center;
background-color:#ffffff;
border:none;
}
/* ▼▼サイドメニュー枠色▼▼ */
.skinMenu {
background: #c4972f;
}
/* ▲▲**テンプレートくまここまで**▲▲ */
/* ▼▼ヘッダー画像設定ここから▼▼ */
/*ヘッダー*/
.skinHeaderArea{
width:980px;/*画像の横*/
}
.skinHeaderArea{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20120815/19/e1/51/p/o09800500tienoki1345027518096.png);
width:980px;/*画像の横*/
height:250px;/*画像の縦*/
background-repeat:no-repeat;/*繰り返さない*/
background-position: center top;/*中央上に*/
display:block;
overflow:hidden;
outline:none;
}
.skinHeaderArea:hover{
background-position:center bottom;/*中央下に*/
}
/* ▲▲ヘッダー画像設定ここまで▲▲ */
/* ▼▼skinContentsAreaの背景色▼▼ */
.skinContentsArea {
background-color:#c4972f;
}
/* ▼▼メインカラム幅調整と位置調整▼▼ */
.columnB .skinMainArea {
width: 650px;
margin-left:10px;
}
/* ▼▼サイドカラム位置調整▼▼ */
.columnB .skinSubA {
margin-right:10px;
}
/* ▼▼ブログタイトル文字調節▼▼ */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
margin:20px 0 0 300px; /* ブログタイトル文字場所 */
}
/* ▼▼ブログの説明文字調節▼▼ */
.skinDescription{
margin:20px 0 0 300px; /* ブログの説明文字場所 */
}
/* ▼▼サイドタイトルエリア肉球画像▼▼ */
.skinSubArea .skinMenuHeader{
padding-left:25px;
background-image:url(http://stat.ameba.jp/user_images/20120803/17/tienoki/42/c5/g/o0022002212114085492.gif);
background-repeat:no-repeat;
background-position:left center;
background-color:#ffffff;
}
/* ▼▼記事タイトルエリア肉球画像▼▼ */
.skinArticleHeader{
padding-left:25px;
background-image:url(http://stat.ameba.jp/user_images/20120803/17/tienoki/42/c5/g/o0022002212114085492.gif);
background-repeat:no-repeat;
background-position:left center;
background-color:#ffffff;
border:none;
}
/* ▼▼サイドメニュー枠色▼▼ */
.skinMenu {
background: #c4972f;
}
/* ▲▲**テンプレートくまここまで**▲▲ */