デザインは3カラムのCSS編集バージョンにしてください。
フリースペース フリープラグラインは左サイドバーに設置してください。
素材屋さん風改造
素材屋さん風とは?
↓こちらのようなブログのことです。↓
http://ameblo.jp/51223319/entry-11111611744.html
まず下記をフリースペースかフリープラグラインに追記する
画像URLを入れて保存
画像URLは画像の上で右クリック→プロパティ→画像URLをコピる でできます。
新CSSの場合
下記をCSSの最後に追記する
/* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */
/* ------------------------------------------------------- */
.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;/* 幅 */
}
/* ------------------------------------------------------- */
/* 記事+サイドバー(A) */
/* ------------------------------------------------------- */
.layoutContentsA{
width:1300px !important;
}
上の/* ------------------------------------------------------- */
/* 記事全体を絶対配置 */
/* ------------------------------------------------------- */
のところの左からの位置などの数字を調整して記事の位置などを調整してください。
素材屋さん風のスキンのURLを張っていただければCSSに記述するだけのを作ります。
注文書↓コピってください
*:..。o○☆゚・:,。*:..。o○☆
素材屋さんスキンURL→
その他→
*:..。o○☆゚・:,。*:..。o○☆
ヘッダーに画像を敷くとき
下記をCSSの最後に追記
/* ブログのタイトルも含めて画像にする */
.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitle{
display:block;
text-indent:-9000em;
outline:none;
height:400px ;
background: url(画像URL) no-repeat 50% 50% ;
}
.skinDescriptionArea{
text-indent:-9000em;
height:0px;
}
画像URLをいれて保存。
画像URLの調べ方は記事の上を見てください。
