設定方法など

Wed, 26 Dec 2012 22:10:53 +0900

背景画像がパターン柄などを敷き詰めるのではなく、一枚の画像を固定にしています。

よって、モニターの大きさによっては背景画像の大きさより大きいモニターだと周りに空白スペースができてしまいます。

それを防ぐのにモニターの大きさに合わせて背景画像を自動で調整するようにCSSで設定しています。

そこで背景画像のＵＲＬはフリースペースに記入するようになっていますので間違えないようにして下さい。

背景用コードはフリースペースに記入
※何故かここに正確に反映されないので、この記事のコメントに記入してありますのでコピーしてフリースペースにペースト。

下記はＣＳＳ最下部に通常に追記です。

/* その他、拡張があれば記述 */

/*＊:::＊:::＊:::＊:::＊:::＊produce by ルシ知恵の樹:::＊:::＊:::＊:::＊:::＊:::＊:::＊*/
/*＊:::＊:::＊:::＊:::＊:::＊http://ameblo.jp/lucifer-d0v0b/:::＊:::＊:::＊:::＊:::＊:::＊:::＊*/
/*:::The produce is ルシ知恵の樹.As for this template, copying is prohibition without permission.:::*/
/*＊:::作成はルシ知恵の樹です。このテンプレートは無断でコピーは禁止です。:::＊*/
/* ▼▼ヘッダー画像設定ここから▼▼ */
.skinHeaderArea{
height:300px;
background-image:url();
background-repeat:no-repeat;
background-position:center top;
}
/* ☆～☆～☆～☆～☆～☆～☆ */
.skinFrame {
  background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20130820/00/76/bf/p/o09000900tienokitest1376925894963.png);
  background-repeat: no-repeat;
  background-position: center top;
}
/* ▲▲ヘッダー画像設定ここまで▲▲ */
/* アメババー透過処理 */
#amebaBar{
opacity: 0.40;
filter: alpha(opacity=40);
-ms-filter: alpha(opacity=40);
}
#amebaBar:hover{
opacity: 1.00;
filter: alpha(opacity=100);
-ms-filter: alpha(opacity=100);
}
/* 背景設定 
body{
background-color:#fef5ff;
background-image:url("");
width:1349px;
height:366px;
background-repeat:no-repeat;
background-attachment:scroll;
}*/
#back_image img{
position:fixed;/* 固定 */
top:0px;/* 上 */
left:0px;/* 下 */
z-index:-10;/* 優先度を下げる */
width:100%;/* 画面の大きさに合わせる */
min-width:100px;/* 最小幅 */
max-width:1700px;/* 最大幅 */
height:auto;/* 自動 */
}
body,.skinBody,html{/* 背景は指定しない */
background-image:none;
}

/* タイトル、説明文位置指定 */
.skinBlogHeadingGroupArea{
padding-top: 100px;/*余白（上）*/
padding-right: 0;/*余白（右）*/
padding-bottom: 0px;/*余白（下）*/
padding-left: 230px;/*余白（左）*/
}
.skinTitleArea {
width: 500px;
}

/*▼▼ブログ画像ボタン非表示▼▼*/
.imagelistLink {display:none!important;}

/* ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン*/
.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #dddddd;
background:#ffffff;
color:#000000 !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2), inset 0 3px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(0, 0, 0, .4);
}
/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#f7f7f7;
background-image:url(http://stat.ameba.jp/user_images/20121215/01/tienokitest/a0/c5/p/o0065006512330552332.png);
}
/*▼☆▼リボン風記事タイトルここから▼☆▼*/

/*▼▼▼リボン風記事タイトル装飾ここから▼▼▼*/

.skinArticleHeader{
padding:0px 10px 20px 10px;
margin:0px -30px 0 -30px;
background:transparent;
}

 /* ▽▽記事タイトルリボンのカラー設定（）内です▽▽ */

.skinArticleHeader2{
background: #d1a300;  /*Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.84, #d1a300), color-stop(0.00, #fefac8));
background: -webkit-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: -moz-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: -o-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: -ms-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: linear-gradient(top, #fefac8 0%, #d1a300 84%);
color:#FFF;
text-shadow:1px 1px 2px #333;
box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);
position:relative;
}

.skinArticleHeader2:before,
.skinArticleHeader2:after {
content: '';
position: absolute;
right: 0px;
bottom: -20px;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
border-right: 10px solid transparent;
}

.skinArticleHeader2:before {
left: 0px;
bottom: -20px;
right:auto;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid #333;
}
.skinArticleTitle, .skinArticleTitle:hover, .skinArticleTitle:focus, .skinArticleTitle:visited {
font-size: 20px;
font-weight: bold;
color: #000;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
}
/*▲▲▲リボン風記事タイトル装飾ここまで▲▲▲*/

/* ▼▼▼リボン風記事タイトルにする設定ここから▼▼▼ */
/*記事横幅*/
.columnB .skinMainArea{
width:600px;
}

/* skinMainArea 記事メインエリア左右余白 */

.skinMainArea{
padding-right:30px;
padding-left:30px;
}

/* skinArticle 記事エリア影 */
.skinArticle{
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

/* skinArticleHeader 記事タイトルエリアリボン調整 */

.skinArticleHeader{
border-left:none;
}

.skinArticleHeader2{
padding-top:15px;
padding-bottom:15px;
padding-left:0px;
text-align:center;
}

/* ▲▲▲リボン風記事タイトルにする設定ここまで▲▲▲ */

/* ▼▼▼サイドバーリボンにする設定ここから▼▼▼ */
/* 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;
background:#ffffff;
border: 1px solid #dddddd;/*Ｉ*/
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
font-size:15px;      /* 文字大きさ */
font-weight: bold; /* 太字設定 */
}

/* ▲▲▲サイドバーリボンにする設定ここまで▲▲▲ */

/*▼▼▼リボン風サイドタイトル装飾ここから▼▼▼*/

.skinMenuHeader{
padding:10px 10px 10px 10px;
margin:0px -30px 0 -30px;
background:transparent;
}

 /* ▽▽サイドタイトルリボンのカラー設定（）内です▽▽ */

.skinMenuHeader{
background: #d1a300;  /*Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.84, #d1a300), color-stop(0.00, #fefac8));
background: -webkit-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: -moz-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: -o-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: -ms-linear-gradient(top, #fefac8 0%, #d1a300 84%);
background: linear-gradient(top, #fefac8 0%, #d1a300 84%);
color:#FFF;
text-shadow:1px 1px 2px #333;
box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);
position:relative;
}

.skinMenuHeader:before,
.skinMenuHeader:after {
content: '';
position: absolute;
right: 0px;
bottom: -20px;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
border-right: 10px solid transparent;
}

.skinMenuHeader:before {
left: 0px;
bottom: -20px;
right:auto;
width: 0;
height: 0;
border-top: 10px solid #333;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid #333;
}

/*▲▲▲リボン風サイドタイトル装飾ここまで▲▲▲*/

/*▼▼▼プロフ内調整ここから▼▼▼*/
/*プロフ画像位置中央*/
.skinSubA .userProfileImageArea{
margin-left:65px;
}
/*プロフネーム*/
.skinSubA .profileUserNicknameArea{
margin-left:30px;
}
/*プロフデータエリア*/
.profileDetailArea {
margin-left: -45px;
}
/*プロフ内ボタン位置中央*/
.skinSubArea ul, .skinSubArea li{
margin-left:50px;
}
/*テーマ位置中央*/
.skinSubArea ul, .skinSubList li{
margin-left:0px;
}
/*▲▲▲プロフ内調整ここまで▲▲▲*/
/*▼▼プロフボタン▼▼*/
.skinImgBtnS {
background:#ffffff;
border:1px solid #dddddd;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2), inset 0 3px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(0, 0, 0, .4);
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius-topright: 20px; 
border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-khtml-border-radius-bottomleft: 20px; 
border-bottom-left-radius: 20px;

-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-khtml-border-radius-topleft: 20px; 
border-top-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius-bottomright: 20px; 
border-bottom-right-radius: 20px;
}
/*プロフ内ボタン設定*/
.skinImgBtnS:hover,.skinImgBtnS:focus{
background:#fff;
background-image:url(http://stat.ameba.jp/user_images/20121214/20/tienokitest/eb/b4/p/o0004000412330044030.png);
}
/* ▲▲▲▲▲▲ */

/*記事内数字フォント*/
.articleTime {
    font-family: Georgia,'Palatino Linotype','Monotype Corsiva',Verdana;
    font-size: 15px;
    color: rgb(78, 69, 74);
    font-weight: bold;
    text-shadow: 1px 1px 1px rgb(221, 221, 221);
}
/* ▼▼記事下同じテーマの最新記事▼▼ */
.articleThemeListArea {
background: #ffffff; 
background-image:url(http://stat.ameba.jp/user_images/20121215/01/tienokitest/a0/c5/p/o0065006512330552332.png);
margin:52px 0 12px 0px;
padding:10px 8px;
color:#4d4d4d;
text-shadow: #ffffff 0 1px 0;
font-variant: small-caps;
text-align:center;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-left:1px solid #036;
border-top:1px solid #036;
box-shadow:inset 1px 1px 4px #036;
border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
-moz-border-radius: 10px 10px 10px 10px;
}
/* ▲▲▲▲▲▲ */

/*フッター*/
.footerNav {
background-image:url(http://stat.ameba.jp/user_images/20121214/22/tienokitest/be/b3/p/o0800009312330322793.png);
background-repeat:repeat-x;
background-position:bottom ;
width:100%;
height:120px;
bottom:0;
right:0;
position:fixed; 
}
/*フッターナビ*/
.footerNav li{
margin-left:20px;
}

/*コメント欄を枠線と背景画像で*/
.commentArea{
padding:0;
border:none;
}
.commentArea .skinBorderHr{
border:none;
}
.skinBorderList li {
margin-bottom:5px;/*コメントとコメントのスキマ*/
border:none;
}
.blogComment{/*ゲスト*/
border:3px solid #EAFFDA;/*枠　太さ 線種 線色*/
background-image:url(http://stat.ameba.jp/user_images/20121215/01/tienokitest/31/75/p/o0065006512330552433.png);/*枠内の背景画像*/
color:#000;/*文字色*/
border-radius:15px;
}
.ownerComment{/*管理人*/
border:3px solid #EDDAFF;/*枠　太さ 線種 線色*/
background-image:url(http://stat.ameba.jp/user_images/20121215/01/tienokitest/a0/c5/p/o0065006512330552332.png);/*枠内の背景画像*/
color:#000;/*文字色*/
}
.commentArea.skinBlock {
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

/* ▼▼記事下コメ画像▼▼ */
.commentLink, .petaLink{
background:#ffffff;
border:1px solid #dddddd;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2), inset 0 3px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(0, 0, 0, .4);
-webkit-border-radius:5px;
   -moz-border-radius:5px;
     -o-border-radius:5px;
        border-radius:5px;
}
.commentLink:hover,.commentLink:focus,.petaLink:hover,.petaLink:focus{
background:#f7f7f7;
background-image:url(http://stat.ameba.jp/user_images/20121215/01/tienokitest/a0/c5/p/o0065006512330552332.png);
}
/*コメントスボタンペース拡大*/
.articleLinkArea {
margin: 15px 0 0;
}
.articleLinkArea a {
margin: 0 0px 0 0;
text-shadow: white 0 1px 0;
background: #fff;
box-shadow: inset 1px 1px 4px #036;
}
.commentLink {
padding: 10px 210px;
}
.petaLink {
padding:10px 10px;
}
.articleLinkArea {
color: #fff;
}
/*コメントデザイン構成サイズ*/
.commentArea.skinBlock {
-webkit-border-radius:10px;
   -moz-border-radius:10px;
     -o-border-radius:10px;
        border-radius:10px;
}
.commentArea .skinBorderHr{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.commentList.skinBorderList {
padding: 0 10px 0 10px;
}

/*メッセージボードの枠の設定*/
.skinMessageBoard{
border-top:1px solid #000000; /*上側*/
border-bottom:1px solid #000000; /*下側*/
border-right:1px solid #000000; /*右側*/
border-left:1px solid #000000; /*左側*/
background-image:url(http://stat.ameba.jp/user_images/20121215/01/tienokitest/5a/6c/g/o0150015012330533852.gif);
background-repeat:no-repeat;
background-position:top right;
}

ヘッダー画像サンプル

Wed, 19 Dec 2012 22:06:23 +0900

ヘッダー画像のサンプルです。
※実際使用する場合は加工の段階で若干変更される場合があります。
①

②

③

④

⑤

⑥

⑦

⑧

⑨

⑩

⑪

⑫

⑬

⑭

⑮

⑯

⑰

⑱

⑲

⑳

テスト記事２

Sat, 15 Dec 2012 16:09:04 +0900

テスト記事です。
テスト記事です。
テスト記事です。
テスト記事です。

テスト

Sat, 24 Nov 2012 21:10:10 +0900

テストテスト
テストテスト
テストテスト
テストテスト
テストテスト
テストテスト
テストテスト
テストテスト

★ファッションとＪＫの生態？から世の中を語る☆女子高生とオトナの育て方★

設定方法など

ヘッダー画像サンプル

テスト記事２

テスト