05≪ 2017/06 ≫07
123456789101112131415161718192021222324252627282930
個別記事の管理2011-04-26 (Tue)
画像に枠線をつける方法は幾つか有ります。
スタイルシートで、画像用のクラスを追加して枠線を指定する方法
記事内の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;}
とすれば枠線は無くなります。

線種や色については記事内のリンク先をご参考に。
宜しければポチッと♪→FC2 Blog Ranking
Theme : HP作成 * Genre : コンピュータ * Category : カスタマイズ
* Comment : (3) * Trackback : (0) |

Re: タイトルなし * by aki
鍵コメ様へ
多分、その方法だとメニュー部分に画像を付けた場合、枠線が付いてしまいます。
なので、画像の枠線について追記を付けましたのでご参考に。

管理人のみ閲覧できます * by -

管理人のみ閲覧できます * by -

コメント







管理者にだけ表示を許可する