だんだんネタがなくなってきましたが・・・・・

↓こんなカスタマいかがですか? ほとんどこれまでの応用編となってます(;^_^A

記事背景  ←クリックすると大きくなります。


記事の中に背景として画像を入れる方法です。

上記サンプル画像のCSSで、説明します。

(画像を入れるために必要な個所はピンクで記しています。)


/* ----------------------- MainColumn ----------------------- */

       ・

       ・ ←省略します。

       ・

       ・
/*entries*/
.entry{   ← 記事全体の情報
width: 99%;
margin-bottom: 20px;
border: 1px solid #b3991a;
background-color: #ffffff; ← (参照①)
}
.entry .date{ ← 記事の日付枠の情報
width:99%;
background-image : url("画像のURL");
background-repeat: repeat;
border-bottom: 1px solid #b3991a;
display: block;
color: #666666;
padding: 5px 0px 2px 5px;
}
.entry .name{ ← 記事の投稿者の情報(たぶん)
margin-top: 5px;
display: block;
}
.entry .theme{ ← 記事のテーマの情報

margin-bottom: 10px;
display: block;
}
.entry .title{ ← 記事のタイトルの情報
margin-top: 10px;
margin-bottom: 10px;
}
.entry .contents{ ← 記事本文の情報
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
background-color: #ffffff; ← (参照①)
background-image : url("画像のURL");   ← 好きな画像を入れてください。

background-attachment: fixed;
background-position:95% 100%; ← 画像を差し込む位置 (参照②) 
background-repeat: no-repeat; ← 画像を繰り返さないと言う意味(1つだけ表示)
}
.entry .foot{ ← 記事枠の一番下(この記事のURLetc・・・)の情報
text-align: right;
padding-top: 2px;
padding-right: 20px;
border-top: 1px dashed #b3991a;
}

<参照①>

背景の色を指定します。ここに色を入れないと、ページ全体の色がバックに出て来てしまいます。

サンプル画像を例にすると、ちょっと見えにくいかもしれませんが記事の背景が、

黄色いチェックになってしまいます。



<参照②>

上記CSSの【background-position:95% 100%;】の前側の95%は、記事の枠内の横軸(X軸/左側)から、95%の位置にあると言う意味です。

ここが0%になると、1番左側と言う事になり、50%になると、真中と言う事になります。

後ろ側の100%は、記事の枠内の縦軸(Y軸/上側)から、100%の位置(一番下)にあると言う事です。

ここが0%になると、1番上と言う事になります。

 

背景の挿入の仕方は色々ありますので、(CSS編集-1)背景のカスタマ  を参考にしてください。


デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です。

ちなみに私は『ピーチ/2コラム-記事右」を選択しています。

 ★サイドバーの位置の変更 で、記事を右から左に変更しています。



AD