画像に枠線を付けてみる

画像に枠線をつける方法は幾つか有ります。
① スタイルシートで、画像用のクラスを追加して枠線を指定する方法
② 記事内のimgタグに直接 枠線を指定する方法
等々…興味の有る方は使いやすい方法を試してみて下さい。



① スタイルシートで画像用のクラスを追加して、枠線などを指定する方法

テンプレートの設定画面の一番下、スタイルシート枠内に下記を追加します。
.img1{border:1px blue solid;} /* 枠線(太さ1px、青色、実線)*/
次に、記事内の画像タグに class="img1" を追加します。
こんな感じに↓
<img src="画像URL" alt="" width="画像の幅" height="画像の高さ" class="img1"/>
これで画像に 1pxで青色の実線枠が出来ます。
.img2{border:2px pink dotted;}
.img3{border:3px red solid;}
のように色んな線種を追加して、画像タグの最後に class="img2" や class="img3" を入れるだけで他の枠線を使えます。

② 記事内のimgタグに直接、枠線などを指定する方法
記事内の画像に、(個別に)色んな枠線を付けたい方はこちらの方法もどうぞ。

sample1画像に枠線を入れる場合、画像タグの後に style="border:線の太さ 色 線種;" を追加します。

↑上の場合は <img src="画像のURL" alt="sample1" width="画像の幅" height="画像の高さ" style="border:1px red solid;">になっています。


sample2枠の幅や色や線種を変える場合は、太さの数値(px)を大きくし、色名を変え、線種名を変更します。

↑上の場合は <img src="画像のURL" alt="sample2" width="画像の幅" height="画像の高さ" style="border:2px green dotted;">になっています。


枠線の種類についてはこちらを参考に 「画像の枠をカスタマイズ」
色名についてはこちらを参考に 「カラーネーム表」
色名の部分をカラーコードにする事も出来ます。
red → #FF0000  blue → #0000FF
カラーコードはこちらを参考に 「カラーコード表」

記事カラムの画像全てに枠線を表示する(表示しない)場合の方法はReadMoreをクリック
当方のテンプレートの場合、記事部分の表示部分は大体 .contents_body になっているので、
テンプレートのスタイルシート編集枠内に
.contents_body img{border:2px pink dotted;}
と追加すれば、記事内の画像全てに 2pxの太さでpink色の点線 が付きます。
また、
.contents_body img{border:none;}
とすれば枠線は無くなります。

線種や色については記事内のリンク先をご参考に。

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2011-04-27-12:03 -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2011-04-28-00:33 -
[ 返信 ]

Re: タイトルなし

鍵コメ様へ
多分、その方法だとメニュー部分に画像を付けた場合、枠線が付いてしまいます。
なので、画像の枠線について追記を付けましたのでご参考に。
2011-04-28-02:36 aki
[ 返信 ]





非公開コメント