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

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

実は・・・・

3カラムを使用されている場合は・・・

前にやりました「CSS コメント欄をなんとかしちゃおう」で紹介しました画像が使えます

横幅395px~で作ってありますのでカンタンな加工でそのまま使用が可能です



記事の背景に使うためには上の画像を縦長にする必要があります

使いたい画像の上の画像の上で 右クリック → コピー


JTrim にi貼り付けます


上の画像を貼り付けたら

画像の下に中の画像をくっつけて縦長にしていきます


次は中の画像の上で 右クリック → コピー
JTrim 連結



コピーしてあるので クリップボードから入力にチェック

連結方法は 下へ 



もう一度、中の画像を連結貼り付けをします(コピーしてありますので連結からでOK)

余分な部分は表示されませんので余裕を持って縦長に加工してください


これで上の画像が出来ましたので保存します

次に中の画像と下の画像も 右クリック → 名前を付けて保存 でそのまま保存

3枚そろいましたらブログの画像フォルダーにアップして画像のURLを調べておきます



2カラム、あるいはもう少し横幅を広げたい方は・・・・・

この画像に下の画像も連結してから リサイズをして

上、中、下の画像を切り取ってください

※バラバラでリサイズをするとうまくつながらない場合があります


2カラムを想定して横幅540pxの画像を作ってみます

(540pxは1つの例です 自分のブログのスキンに合わせて作成してください)
ブログの希望の画像の上で右クリック → コピー → 貼り付け、2枚目3枚目は連結で1枚の画像にします

※上の場合と同じように中の画像は広い方が作業しやすいので中の画像は2.3回繰り返して貼り付けます



出来上がった画像をそのまま横幅540pxにリサイズすると・・・・・ ぼけてしまいます

もちろん、この方が味が出ていいという画像もあります

その場合はそのまま上、中、下の画像を作ってください


そのままの感じで横に広げてみます

まずはどの程度広げるか計算してその分をコピーして右に連結で貼り付けてしまいます・・・・

・・・・540px - 394px = 146px の方がわかりやすかったかな






連結で貼り付けて横幅540pxになりました・・・・ 次は途中の画像を何とかします


途中の画像、どこでもいいのでおかしな部分が隠れるくらいの幅で範囲指定をしてコピーします


コピーしたら 編集 → 合成貼り付け 

コピーした部分をドラッグしておかしな部分を隠してOKなら位置確定


※細かなズレが出ないように Ctrl++(コントロールキーを押しながらプラスキー)で表示を大きくして

 ピッタリ合うように位置調整をしてください・・・ または 表示 → ズーム




完成です・・・・・

単純に拡大した場合と違って柄とかもぼやけていないし

角のカーブも前と同じサイズですのでCSSも設定しやすくなっています


後はこの画像から上、中、下の3枚の画像を作ってください


※もっと線とかを細くしたいとか前回のように本の柄を小さくしたいって場合は

 上の要領で幅が700とか800pxくらいのわざと大きな画像に加工してから

 540pxに縮小すると柄が小さくなったり、線が細くシャープになります


    700pxの加工してから 540pxに縮小してみました・・・・・


   こちらも同じようにしてみました・・・・コメントのときと比べると線が細くなっています

あとはこれらの画像から上、中、下の画像を作ります


ここにある画像は私の作った画像ですのでお持ち帰りは自由です



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

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

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

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

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

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

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


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

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