オリジナルスキンCSSの編集 記事枠（画像）6
ＣＳＳの編集で下の部分を探して
赤字部分を削除するか
青字部分 /* と */ を加えてこの部分のＣＳＳを無効にします
説明はスタンダードのグレイ・ピーチ・グリーン・ブルーのスキンの場合です
/* ---------- entry : 各記事枠 ---------------- */
/*
.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#F5F5F5;
padding:5px 0 2px 5px;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
display:block;
color:#000000;
}
.entry .name{
margin-top:5px;
display:block;
}
.entry .theme{
margin-bottom:10px;
display:block;
}
.title{
margin-top:10px;
margin-bottom:10px;
}
.entry .contents{
margin-top:15px;
margin-bottom:15px;
}
.entry .foot{
text-align:right;
padding:5px 20px 5px 0;
border-top:1px dashed #000000;
}
*/
/* ---------- page : ページリンク ------------- */
削除あるいは無効としてから
前の説明画像を参考にＣＳＳをコピペします
/*記事枠-画像*/
.entry{
width: 100%;
margin-bottom: 20px;
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center top;
}
.entry .entry_head{
padding:0;
}
.entry .date{
display: block;
padding: 15px 0 0 250px;
color: #6F706E;
}
.entry .title{
padding:10px 0 0 20px;
}
.entry .theme{
display: block;
padding:0px 0px 10px 20px;
}
.entry .contents{
margin: 0;
padding:10px 20px 0;
background: url(画像のURL);
background-repeat: repeat-y;
background-position: center top;
}
.entry .foot{
text-align: center;
padding: 20px 0 15px;
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: center bottom;
}
オリジナルスキンCSSの編集 記事枠（画像）4´（ダッシュ）
オリジナルスキンCSSの編集 記事枠（画像）5
実は・・・・
3カラムを使用されている場合は・・・
前にやりました「ＣＳＳ コメント欄をなんとかしちゃおう」で紹介しました画像が使えます
横幅395px～で作ってありますのでカンタンな加工でそのまま使用が可能です
記事の背景に使うためには上の画像を縦長にする必要があります
使いたい画像の上の画像の上で 右クリック → コピー
JTrim にｉ貼り付けます
上の画像を貼り付けたら
画像の下に中の画像をくっつけて縦長にしていきます
次は中の画像の上で 右クリック → コピー
JTrim 連結
コピーしてあるので クリップボードから入力にチェック
連結方法は 下へ
もう一度、中の画像を連結貼り付けをします（コピーしてありますので連結からでＯＫ）
余分な部分は表示されませんので余裕を持って縦長に加工してください
これで上の画像が出来ましたので保存します
次に中の画像と下の画像も 右クリック → 名前を付けて保存 でそのまま保存
3枚そろいましたらブログの画像フォルダーにアップして画像のURLを調べておきます
2カラム、あるいはもう少し横幅を広げたい方は・・・・・
この画像に下の画像も連結してから リサイズをして
上、中、下の画像を切り取ってください
※バラバラでリサイズをするとうまくつながらない場合があります
2カラムを想定して横幅540pxの画像を作ってみます
（540pxは1つの例です 自分のブログのスキンに合わせて作成してください）
ブログの希望の画像の上で右クリック → コピー → 貼り付け、2枚目3枚目は連結で1枚の画像にします
※上の場合と同じように中の画像は広い方が作業しやすいので中の画像は2.3回繰り返して貼り付けます
出来上がった画像をそのまま横幅540pxにリサイズすると・・・・・ ぼけてしまいます
もちろん、この方が味が出ていいという画像もあります
その場合はそのまま上、中、下の画像を作ってください
そのままの感じで横に広げてみます
まずはどの程度広げるか計算してその分をコピーして右に連結で貼り付けてしまいます・・・・
・・・・540px － 394px ＝ 146px の方がわかりやすかったかな
連結で貼り付けて横幅540pxになりました・・・・ 次は途中の画像を何とかします
途中の画像、どこでもいいのでおかしな部分が隠れるくらいの幅で範囲指定をしてコピーします
コピーしたら 編集 → 合成貼り付け
コピーした部分をドラッグしておかしな部分を隠してＯＫなら位置確定
※細かなズレが出ないように Ctrl+＋（コントロールキーを押しながらプラスキー）で表示を大きくして
ピッタリ合うように位置調整をしてください・・・ または 表示 → ズーム
完成です・・・・・
単純に拡大した場合と違って柄とかもぼやけていないし
角のカーブも前と同じサイズですのでＣＳＳも設定しやすくなっています
後はこの画像から上、中、下の3枚の画像を作ってください
※もっと線とかを細くしたいとか前回のように本の柄を小さくしたいって場合は
上の要領で幅が700とか800pxくらいのわざと大きな画像に加工してから
540pxに縮小すると柄が小さくなったり、線が細くシャープになります
700pxの加工してから 540pxに縮小してみました・・・・・
こちらも同じようにしてみました・・・・コメントのときと比べると線が細くなっています
あとはこれらの画像から上、中、下の画像を作ります
ここにある画像は私の作った画像ですのでお持ち帰りは自由です
オリジナルスキンCSSの編集 記事枠（画像）4´（ダッシュ）
オリジナルスキンCSSの編集 記事枠（画像）4´（ダッシュ）
ちなみに・・・・
前での説明 は元の画像を縮小していますが・・・
2カラムで使う場合は逆に拡大しないと使えません
ただそのまま拡大したのでは
本等の柄もそのまま拡大されて大きくなってしまいます
柄や模様を大きくしたくない場合は・・・・ 一工夫
元の画像、横幅が477pxありますので前回は縮小しました
↑これを横幅を大きくして↓こうしてみました（横幅540px）・・・本とか柄のサイズはそのままです
あとはこの画像から上、中、下の画像を作ります
不親切な説明・・・・・？
やり方は試行錯誤してみてください
またはこんな加工も・・・・・ 今度は別の素材の開いた本を組み合わせてみました
ただ、柄が大きい場合はいったん記事枠より大きめに作ってから縮小して横幅を合わせます
横幅700pxで作ってから540pxに縮小してみました、本とかが上に比べて小さくなっています
どのように広げるかはあなたのセンスです
今回の画像の場合はこっちの方が合うような気がします・・・・
やり方は説明しませんm(_ _)m 色々やってみてください
・・・・って～わけにもいきませんので次回に簡単な画像を使って説明する予定です
ポカポカ色 さまの画像をお借りして説明しています
再配布禁止ですので当ブログよりのお持ち帰りはご遠慮ください
注意・・・・
素材サイトの中には加工を禁止している場合があります
そのサイトの利用規約をよく読んだ上で利用してください