画像に枠線を付けてみる
画像に枠線をつける方法は幾つか有ります。
① スタイルシートで、画像用のクラスを追加して枠線を指定する方法
② 記事内の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タグに直接、枠線などを指定する方法
記事内の画像に、(個別に)色んな枠線を付けたい方はこちらの方法もどうぞ。
画像に枠線を入れる場合、画像タグの後に style="border:線の太さ 色 線種;" を追加します。
枠の幅や色や線種を変える場合は、太さの数値(px)を大きくし、色名を変え、線種名を変更します。
枠線の種類についてはこちらを参考に 「画像の枠をカスタマイズ」
色名についてはこちらを参考に 「カラーネーム表」
色名の部分をカラーコードにする事も出来ます。
red → #FF0000 blue → #0000FF
カラーコードはこちらを参考に 「カラーコード表」
記事カラムの画像全てに枠線を表示する(表示しない)場合の方法はReadMoreをクリック
① スタイルシートで、画像用のクラスを追加して枠線を指定する方法
② 記事内の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タグに直接、枠線などを指定する方法
記事内の画像に、(個別に)色んな枠線を付けたい方はこちらの方法もどうぞ。
画像に枠線を入れる場合、画像タグの後に style="border:線の太さ 色 線種;" を追加します。
↑上の場合は <img src="画像のURL" alt="sample1" width="画像の幅" height="画像の高さ" style="border:1px red solid;">になっています。
枠の幅や色や線種を変える場合は、太さの数値(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;}
とすれば枠線は無くなります。
線種や色については記事内のリンク先をご参考に。
テンプレートのスタイルシート編集枠内に
.contents_body img{border:2px pink dotted;}
と追加すれば、記事内の画像全てに 2pxの太さでpink色の点線 が付きます。
また、
.contents_body img{border:none;}
とすれば枠線は無くなります。
線種や色については記事内のリンク先をご参考に。
↻