画像の回りに枠線をつける(PhotoScape編)

ブログによっては画像に枠線が入っていたり、白縁がついているものがあります。
テンプレートのCSSで自動的につける方法もありますが、一番手っ取り早く簡単にできるのはフォトスケープでの加工かと思い、こちらから紹介していきたいと思います。

(のちほど追ってCSSでの加工方法を書いてみたいと思っています。)

09062820.jpg

09062819.jpg

09062818.jpg


この方法はアップする画像自体に加工をする方法です。

(のちほど説明するCSSを使う方法は普通に画像をアップするだけで過去にアップロードした全ての画像にも同様の縁取りをつけることができます。)
09062811.jpg●まず画像に枠線をつける方法です。

フォトスケープで加工したい画像を開き、「フレーム線」をクリックします。
フレーム線の設定画面が出てきますので色や枠の太さ、その他好みの設定をして「OK」で完了です。
←色=グレー、枠線の太さ=「1」

09062813.jpg
設定を変えてみました。

←色=青、枠線の太さ「5」

09062814.jpg
←色=オレンジのうす~いの、枠線の太さ「5」、画像より内側に線を入れる=「15」、角丸み「36」、透明度=約50%

09062815.jpg●画像に白色の縁を入れる方法

「縁取り」をクリック。
縁取りの設定画面で余白(縁取り)の設定を入れます。
「背景色」=縁取りの色
「同じ縁取りを割り当て」にチェックを入れると四方が同じ幅で縁取りされます。
その場合の縁取りの幅は「縁取り」の数字で設定します。

「同じ縁取りを割り当て」にチェックを入れない場合は上下左右各幅を任意で決めることができます。

09062816.jpg●白色の縁を入れ、且つ枠線をつける方法

上記の方法で縁取りを取り、そのあと、「フレーム線」をクリックして枠線をつけるだけです。



写真を加工する手間がかかりますが、これが一番簡単で、テンプレートを変えてもそのまま使えるので私はオススメです。

でもいちいち加工がめんどうくさい…という場合はCSSで一括して枠線をつけてしまう方法もありますので、そちらの方法も別記事で書いておきます。




関連記事

Tag:PhotoScape

0 Comments

Post a comment