オリジナルスキンCSSの編集 記事枠（画像）3
3枚の画像を使って記事の枠を作ります
カンタンには
.entry{
background-image: url(上の画像) ;
}
.entry .contents{
background-image: url(中の画像) ;
}
.entry .foot{
background-image: url(下の画像);
}
----------------------
.entry .entry_head{
background-image: url(上の画像) ;
}
.entry .contents{
background-image: url(中の画像) ;
}
.entry .foot{
background-image: url(下の画像);
}
----------------------
.entry{
background-image: url(中の画像) ;
}
.entry .entry_head{
background-image: url(上の画像) ;
}
.entry .foot{
background-image: url(下の画像);
}
の3種類の方法が思いつきます
どの方法でもいいのですが
今回は最初の方法で説明をしていきます
慣れてきたら他の方法も試してください
コチラの画像を借りてきて画像加工ソフトで組み立てます？
それを記事幅に合わせて縮小します
今回は３カラムを利用していますので幅は400px少し余裕で398pxに縮小します
とりあえずは縦は気にしません
出来ましたらそれを元に下のように３つの画像を作ります
↓上の画像・・・・ 少し余裕をもって縦長に作ります、余分な部分は隠れます
↓中の画像・・・ だいぶ余裕をもって縦長に作ってください
画像は繰り返しませんので短いと文章途中で空白になります
↓下の画像・・・ この画像は全部表示されます
中の画像との切り方は・・・適当？
下の画像の上に中の画像の下が付きますのでどこで切ってもＯＫです
が、中の画像の下に記事がくる事を考えて切ってください
ＣＳＳの編集で下の部分を探して
赤字部分を削除するか
青字部分 /* と */ を加えてこの部分のＣＳＳを無効にします
説明はスタンダードのグレイ・ピーチ・グリーン・ブルーのスキンの場合です
/* ---------- 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 50px;/* Ｂ */
color: #6F706E;
}
.entry .title{
padding:0px 30px 0px;/* Ｃ */
}
.entry .theme{
display: block;
padding:0px 0px 10px 30px;/* Ｄ */
}
.entry .contents{
margin: 0;
padding:10px 30px 0;/* Ｅ */
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center bottom ;/* 注 */
}
.entry .foot{
width: 100%;
text-align: left;
border-top:none;
padding: 30px 50px 20px;/* Ｆ */
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: center bottom;
}
注 ： 今回の中の画像は繰り返さないで下から上に表示しますのでpositioは bottomになります
※わかりやすくするために反転させています
※実際には下の画像30+10+20でちょうどにするとスキマが出来てしまいます？どこかを減らしてください
中の画像を繰り返す場合は
↓中の画像
下の画像にイラスト部分を全部含めてしまいます
↓下の画像
その場合は記事下に気になる空間部分が出来てしまいます
※投稿者の表示を表示しない場合で説明しています
投稿者の表示をしている場合は.entry .nameの設定が必要となります
ポカポカ色 さまの画像をお借りして説明しています
再配布禁止ですので当ブログよりのお持ち帰りはご遠慮ください
注意・・・・
素材サイトの中には加工を禁止している場合があります
そのサイトの利用規約をよく読んだ上で利用してください
オリジナルスキンCSSの編集 画像の加工2
前回に引き続き
JTrim 初心者向けフォトレタッチソフト を使って今度は 上、中、下の画像を作ります
サイズは適当でかまいません
下の画像は全部が表示されます
この中には記事URL | コメント | ペタを残す | チェックリスト のフッターが表示されます
記事がココに表示されることはありません
バランスをみて決めてください
下の画像が出来ました
名前をつけて保存していきます・・・下の画像
保存が出来ましたら 元の戻すをクリックして切り取る前に戻します
下の画像を切り取ったときの上のラインは動かさないで下さい
中の画像と下の画像がつながらなくなります
上に連結して行きますから別にギリギリまでする必要はないですよ
繰り返しとなる画像が取れればそれでOKです
保存してください・・Ａの画像
今回は中の画像の一部に画像（子供の頭の部分）がありますので繰り返しは使えません
そのために1枚で中の画像つくります
中の画像で画像の無い部分をコピーしてその部分を連結していって長い画像を作ります
もしジャマになる画像がある場合は下で説明しています消去を使ってください
子供の頭の部分が気にならないようでしたら切り取らないでコピーして
そのまま上に十分な長さになるまで連結していってもできます
前にやったように同じ画像の繰り返しですから上でも下でもかまいません
コピー → 連結 を繰り返して倍々で大きくしていきます
縦の長さは人によって違いますが・・・・1枚だけで記事部分の背景になります
いままで書いてきた記事で一番長い記事以上の長さは必要になります
記事が短くても余った部分は表示されませんので長い記事に余裕を持ってあわせてください
出来ましたら保存します
保存できましたら 編集 → 連結 で前に保存したＡの画像を呼び出して下にくっつけます
これで中の画像の出来上がりです 保存してください・・・中の画像
最後に上の画像を作ります
最初の画像を表示して上の部分を範囲指定してコピーします
※このとき充分な高さがある場合はこのまま切り取って上の画像として保存してください
上の画像もある程度の高さが必要になります
ここでも余分な部分は隠れますので余裕を持って作ります
足りないと記事タイトル、テーマと記事の間にスキマができてしまいます
今回は上の画像の高さが足りないので下に画像を付け足して高さを延ばします
余計なものを消去して余裕ある高さが稼げたら切り取って上の画像として保存してください
今回はまだ足りませんので
先ほど作った中の画像を利用します
上の部分を範囲指定してコピーしてから中の画像を表示します
中の画像の上にコピーした上の画像を連結します
連結して充分な高さになりました
上の画像として必要充分な高さを選択して切り抜けば上の画像の出来上がりです
上の画像の部分には 日付、記事タイトル、テーマなどが表示されます
上の画像が出来ましたので保存・・・・・上の画像
次回より上、中、下の画像を使って背景を作ります
オリジナルスキンCSSの編集 画像の加工
今回はチョット面倒なサンプルを用意してしまいましたので
ついでに？
画像加工ソフトの使い方もやってみます
すでに画像編集をやっておられる方はスルーしちゃってくださいな
たぶん次回も画像加工ソフトの続きになると思います
まだ画像加工ソフトをお持ちでなく
WIN附属のペイントを使っておられる方・・・・
無料でカンタンなソフトがありますので紹介しておきます
macな方・・・・ごめんなさい m(_ _ )m
JTrim
初心者向けフォトレタッチソフト
http://www.woodybells.com/jtrim.html
フリー無料の画像加工ソフトです
※Vistaに正式対応してはいませんが、概ね良好に動作します
画像のトリミング、縮小、文字入れ等も簡単にできます
16回分のアンドゥ機能もついているのでやり直しも楽です
デジカメの画像もアメブロ用に縮小加工もカンタンなので
もし画像加工ソフトをインストールしていない場合はお勧めします
インストールの方法はサイトをご覧下さい
用意が出来ましたら
まず画像を借りてきます
ポカポカ色
→ 素材 → テーブル の中の素材を加工しています
最後には自分のパソコンに保存しますので
最初は加工して広げる必要のある真ん中の画像からです
あさひ さまのサイトで欲しい画像の上で 右クリック → コピー
JTrim の編集 → 貼り付け で、JTrimに貼り付けます
真ん中を貼り付けたらコピー・・・
実際はすでにコピーで貼り付けていますからココではコピーの必要はありません
コピーして連結で貼り付けて横に長くしていきます
コピーしていますので クリップボードから入力にチェックしてください
同じ画像ですから連結方向は右でも左でも同じです
ある程度の長さになるまで繰り返しますので
この設定を保存し・・・・にもチェック
コピー → 連結 を繰り返すと倍々で大きくなりますので楽です
ある程度のサイズになりましたら
左と右にも画像を貼り付けて完成形にします
左の画像を選択して左へ連結貼り付けします
すでにあさひさまの画像をパソコンに保存していましたのでパソコンからの呼び出しで説明していますが
上の真ん中の画像ように あさひさまのサイトで左の画像の上で右クリック→コピー
JTrim の編集 →連結 、クリップボードから入力にチェック、 左へ 、ＯＫでかまいません
右の画像の連結も同じです
次に右の画像を選択して右に連結貼り付けします
このままでは画像が大きいので縮小します・・・・ここで保存しておくことを薦めます
↑リサイズをクリック・・・デジカメで撮った写真を縮小するのもココです
↓記事枠のサイズに合わせて横を入力します、縦は自動で入ります
※比率で指定するにカーソルがありますがたまたまそこにあっただけです
比率ででも指定は可能ですが私は１度も使ったことはありません
Ctrl ＋ + で（コントロールキーを押しながらプラスキーを押すごとに）表示が大きくなります
細かな修正する場合はプラスキーを何回か押して大きくすると作業しやすくなります
小さくする場合はコントロールキーを押しながらマイナスキーです
サイズの横の虫眼鏡の横に画像の表示％が出ています
これはここでの表示のサイズ、見かけのサイズであって実際に拡大縮小しているわけではありません
100%が実際のサイズになります
縮小されたら念のため保存しておきます
今回の画像はwellcomって入ってしまっています
気になりますので消しちゃいます
※本当は縮小する前にこの作業は行なってください
↑消す下地と同じ部分をドラッグして範囲指定をしてからコピー
↓そして合成貼り付け
↓左上にコピーした部分が表示されますのでドラッグで消したい部分に移動させてから「位置確定」
合成貼り付け → 消したい部分に移動 → 位置確定 を繰り返します
↓ＯＫでしたら保存
※白とグレーのチェック部分は透明を表しています
次回はこの画像から上、中、下の画像を作ります