はじめに
このテンプレートは無料配布です。シンプルな３カラムデザインを透過色を使って作成しました。
※現在、CSSファイル・画像ファイルなどまとめてダウンロードできるサイトを作成中ですので完成の際は便利ですのでご利用下さい。
ノーマル状態から追加した内容は以下です。
・ブログタイトル、説明部分、記事スペース、サイドメニューを透過
・記事タイトル部分リボン風
・各ヶ所に角丸
※メインカラムなどの幅を変更しています。
注意事項
転載、転売などはご遠慮下さい。（私的には、そこまでの物ではありませんのでオススメしませんw）このテンプレートは使用している画像は背景のみです。
※ご自由に変更可能です。
CSS３での表現は若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。
テンプレートを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）
テンプレ利用の際のお願い
・テンプレート更新などブログにてお知らせしますので、読者登録をお願いします。・コメント欄にて利用報告をお願い致します。
・ブログにてご紹介していただけたら喜びます。（お任せですw）
設定準備
①アメブロのデザインをマイページから「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」にしてカラムを→「３カラム・右ワイドメニュー」に設定。※他カラムは対応はテストしていません。
アメブロテンプレ「シンプル・クリアデザイン」３カラム設定
設置手順は手順①CSSをコピペでCSS編集画面にて「CSSの追記」のです。
手順②画像URLを追記です。
①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※調整は説明を参考にしてみて下さい。
/* ＊:::知恵の樹テンプレ:::＊ */
/* 背景画像設定 */
body{
background-color:transparent;
background-image:url("この文字を消してここに画像URLを記入");
background-position:center center;
background-repeat:repeat;
background-attachment:fixed;
}
/* ヘッダー設定 */
.skinHeaderArea {
background: rgba(255, 255, 255, 0.8) ;
box-shadow: 0px 0px 5px rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
}
/* コンテンツエリア設定 */
.skinContentsFrame {
margin: 10px 0 0 0;
}
/* メッセージボード設定 */
.skinMessageBoard {
background: rgba(255, 255, 255, 0.8) ;
box-shadow: 0px 0px 5px rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
border:none;
}
/* 記事欄設定 */
.skinArticle {
background: rgba(255, 255, 255, 0.8) ;
box-shadow: 0px 0px 5px rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
}
/* サイドメニュー設定 */
.skinMenu {
background: rgba(255, 255, 255, 0.8) ;
box-shadow: 0px 0px 5px rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
}
/* サイドメニュー文字設定 */
.skinMenuTitle {
font-size:15px;
font-weight:bold;
}
/* ＊:::＊:::＊記事タイトルリボン設置ここから＊:::＊:::＊ */
.skinArticle {
width:430px;
margin:0 0 10px 20px;
}
.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: -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;
}
/* ＊:::＊:::＊記事タイトルリボン設置ここまで＊:::＊:::＊ */
/* ＊:::知恵の樹テンプレ:::＊ */②下記画像をご自分のアメブロ画像ファイルに登録後に、画像URLを上記赤字の場所にコピペ。
