オリジナルスキンCSSの編集 画像の加工2 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

オリジナルスキンCSSの編集 画像の加工2

前回に引き続き

JTrim  初心者向けフォトレタッチソフト を使って今度は 上、中、下の画像を作ります





サイズは適当でかまいません

下の画像は全部が表示されます

この中には記事URL | コメント | ペタを残す | チェックリスト のフッターが表示されます

記事がココに表示されることはありません

バランスをみて決めてください


下の画像が出来ました

名前をつけて保存していきます・・・下の画像


保存が出来ましたら 元の戻すをクリックして切り取る前に戻します




下の画像を切り取ったときの上のラインは動かさないで下さい

中の画像と下の画像がつながらなくなります


上に連結して行きますから別にギリギリまでする必要はないですよ

繰り返しとなる画像が取れればそれでOKです




保存してください・・Aの画像

今回は中の画像の一部に画像(子供の頭の部分)がありますので繰り返しは使えません

そのために1枚で中の画像つくります


中の画像で画像の無い部分をコピーしてその部分を連結していって長い画像を作ります

もしジャマになる画像がある場合は下で説明しています消去を使ってください



子供の頭の部分が気にならないようでしたら切り取らないでコピーして

そのまま上に十分な長さになるまで連結していってもできます



前にやったように同じ画像の繰り返しですから上でも下でもかまいません

コピー → 連結 を繰り返して倍々で大きくしていきます


縦の長さは人によって違いますが・・・・1枚だけで記事部分の背景になります

いままで書いてきた記事で一番長い記事以上の長さは必要になります

記事が短くても余った部分は表示されませんので長い記事に余裕を持ってあわせてください

出来ましたら保存します


保存できましたら 編集 → 連結 で前に保存したAの画像を呼び出して下にくっつけます





これで中の画像の出来上がりです 保存してください・・・中の画像



最後に上の画像を作ります

最初の画像を表示して上の部分を範囲指定してコピーします

※このとき充分な高さがある場合はこのまま切り取って上の画像として保存してください




上の画像もある程度の高さが必要になります

ここでも余分な部分は隠れますので余裕を持って作ります

足りないと記事タイトル、テーマと記事の間にスキマができてしまいます


今回は上の画像の高さが足りないので下に画像を付け足して高さを延ばします




余計なものを消去して余裕ある高さが稼げたら切り取って上の画像として保存してください

今回はまだ足りませんので

先ほど作った中の画像を利用します


上の部分を範囲指定してコピーしてから中の画像を表示します


中の画像の上にコピーした上の画像を連結します


連結して充分な高さになりました

上の画像として必要充分な高さを選択して切り抜けば上の画像の出来上がりです

上の画像の部分には 日付、記事タイトル、テーマなどが表示されます





上の画像が出来ましたので保存・・・・・上の画像



次回より上、中、下の画像を使って背景を作ります


オリジナルスキンCSSの編集 記事枠(画像)

オリジナルスキンCSSの編集 記事枠(画像)2

オリジナルスキンCSSの編集 画像の加工



オリジナルスキンCSSの編集 記事枠(画像)3

オリジナルスキンCSSの編集 記事枠(画像)4

オリジナルスキンCSSの編集 記事枠(画像)4´(ダッシュ)

オリジナルスキンCSSの編集 記事枠(画像)5

オリジナルスキンCSSの編集 記事枠(画像)6

オリジナルスキンCSSの編集 記事枠(画像)7