素材屋さん風改造＆ヘッダーに画像をしくとき

Tue, 20 Dec 2011 15:13:28 +0900

デザインは3カラムのＣＳＳ編集ﾊﾞｰｼﾞｮﾝにしてください。

フリースペース　フリープラグラインは左サイドバーに設置してください。

素材屋さん風改造

素材屋さん風とは？

↓こちらのようなﾌﾞﾛｸﾞのことです。↓
http://ameblo.jp/51223319/entry-11111611744.html

まず下記をフリースペースかフリープラグラインに追記する

画像のＵＲＬ" id="skn01">

画像ＵＲＬを入れて保存

画像ＵＲＬは画像の上で右クリック→プロパティ→画像ＵＲＬをコピる　でできます。

新ＣＳＳの場合

下記をＣＳＳの最後に追記する

/* ------------------------------------------------------- */
/* 絶対配置起点を設定　画面の大きさを変えて同じ位置に　　　*/
/* ------------------------------------------------------- */
.skinFrame2{
width:1000px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
/* ------------------------------------------------------- */
/* ヘッダーエリア削除　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinHeaderArea{
display:none;
}
/* ------------------------------------------------------- */
/* 背景スキンの設定　　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
#skn01{/* 背景スキン　位置調整 */
position:absolute;/* 絶対配置 */
left:150px;/* 左からの位置 */
top:0px;/* 上からの位置 */
z-index:50;/* 画像が重なった場合の優先順位を下げる */
}
/* ------------------------------------------------------- */
/* 記事全体を絶対配置　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinMainArea{/* 記事メイン */
position:absolute;/* 絶対配置 */
left:400px;/* 左からの位置 */
top:240px;/* 上からの位置 */
width:300px !important;/* 幅 */
height:300px;/* 高さ */
overflow:auto;/* スクロール */
background-color:#ffffff;/* 背景色 */
z-index:100;
}
/* ------------------------------------------------------- */
/* メッセージボード・記事・コメント・記事一覧幅　　　　　　*/
/* ------------------------------------------------------- */
.skinMessageBoard,.skinArticle,.commentArea,.listPageArea {
width:260px;/* 幅 */
margin-left:auto;
margin-right:auto;
border:none;/* 枠 */
}
/* ------------------------------------------------------- */
/* サイドバー（右）　　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinSubA {
position:absolute;/* 絶対配置 */
left:980px;/* 左からの位置 */
top:0px;/* 上からの位置 */
width:350px !important;/* 幅 */
background-color:#ffffff;/* 背景色 */
height:480px;/* 高さ */
overflow:auto;/* スクロール */
z-index:100;
}
/* ------------------------------------------------------- */
/* サイドバー（左）　　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinSubB {
background-color:#ffffff;/* 背景色 */
height:300px;/* 高さ */
overflow:auto;/* スクロール */
z-index:100;
}

/* ページナビを調整 */
.pagingPrev, .pagingNext {
position:static;/* 静的配置　*/
}
.pagingNext {
margin-left:20px;/* 左余白 */
}
.pagingPrev {
margin-right:20px;/* 右余白 */
}

/* ------------------------------------------------------- */
/* 検索の幅を変更　　　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchInput {
padding: 8px 10px 8px 0px;
}
.blogSearchForm{
width:160px !important;
}
/* ------------------------------------------------------- */
/* コンテンツ全体の幅を調整　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinHeaderArea,skinHeaderArea2,skinBlogHeadingGroupArea,/* ヘッダーエリア */
.skinContentsArea,skinContentsArea2{/* コンテンツエリア */
width:1300px !important;/* 幅 */
}
/* ------------------------------------------------------- */
/* 記事＋サイドバー（Ａ）　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.layoutContentsA{
width:1300px !important;
}

上の/* ------------------------------------------------------- */
/* 記事全体を絶対配置　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */

のところの左からの位置などの数字を調整して記事の位置などを調整してください。

素材屋さん風のスキンのＵＲＬを張っていただければＣＳＳに記述するだけのを作ります。

注文書↓ｺﾋﾟってください

*:..｡o○☆ﾟ･:,｡*:..｡o○☆

素材屋さんスキンＵＲＬ→

その他→

*:..｡o○☆ﾟ･:,｡*:..｡o○☆

ヘッダーに画像を敷くとき
下記をＣＳＳの最後に追記

/* ブログのタイトルも含めて画像にする */
.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitle{
display:block;
text-indent:-9000em;
outline:none;
height:400px ;
background: url(画像ＵＲＬ) no-repeat 50% 50% ;
}
.skinDescriptionArea{
text-indent:-9000em;
height:0px;
}

画像ＵＲＬをいれて保存。

画像ＵＲＬの調べ方は記事の上を見てください。

ﾌﾞﾛｸﾞ改造しよーぜっ！

素材屋さん風改造＆ヘッダーに画像をしくとき