未分類

画像に枠線をつけるhtmlタグ

木目と紙

ブログに貼る画像に枠線を付けたいとき、ペイント等のソフトで付けたりしてませんか。

htmlタグでもっと簡単に楽に付ける方法をご紹介します。

数クリックで枠線が付けれるようになるので記事作成の時短にもなりますよ!

※ワードプレスでのやり方を紹介しています。

枠線のhtmlタグ

ではまず、枠線のhtmlタグは以下のようになります。

style="border:solid 1px #909090; padding:1px;"

このタグを画像のコード内に入れることで枠線が付きます。

枠線のタグを入れる場所

まず画像を記事内に貼り、テキストモードにして下さい。

そしてその画像コードの最後に半角スペースを空けて「枠線のhtmlタグ」を入れて下さい。

画像コード

以下のようになります。

<img class="alignnone size-full wp-image-867" src="http://modo-di-vivere.net/wp-content/uploads/2017/03/034793888dec8e3b90501c014465974b_s.jpg" alt="ブリキのウェルカムボード" width="640" height="427" style="border:solid 1px #909090; padding:1px;" />

※テキストモードを開きなおすと、枠線コードの位置が真ん中辺りに移動していますが、問題ないです。枠線コードを入れる時は末尾に入れた方が分かりやすいだけなので、気にしなくても大丈夫ですよ。

枠線の種類や太さ、色を変える方法

線の種類

線の種類を変える場合は「solid」の部分を変えます。

style="border:solid 1px #909090; padding:1px;"

白画像

solid(実線)

 

白画像

dotted(点線)

 

白画像

double(二重線)

 

線の太さ

線の太さを変える場合は「1px」の数字の部分を変えます。数字が大きいほど太くなっていきます。

style="border:solid 1px #909090; padding:1px;"

白画像

2px

 

白画像

3px

 

線の色

線の色を変える場合は「#909090」の数字の部分を変えます。

各色のコードはこちらを参照ください→カラーコード辞典

style="border:solid 1px #909090; padding:1px;"

白画像

#ff4500(オレンジ)

 

枠線と画像の隙間を変える

枠線と画像の隙間を変える場合は「padding:1px」の数字の部分を変えます。数字が大きいほど広くなっていきます。

style="border:solid 1px #909090; padding:1px;"

黒画像

padding: 3px

 

枠線コードを数クリックで入れる方法

画像を貼る度に、枠線のコードをコピーしてきたり入力していては面倒くさいですし、時間が掛かってしまいます。

これを「AddQuicktag」というプラグインを使うことで、数クリックで挿入できるようになります。

詳しい設定方法はこちら→「AddQuicktag」の設定方法と使い方、記事作成時間を短縮しよう

 

「AddQuicktag」を設定する中で「開始タグ*」に入れるコードを
「 style="border:solid 1px #909090; padding:1px;"」にすればOKです。
※線の種類や太さ、色などはお好みで変えて下さい。頭に半角スペースも忘れずに。

これを設定して、画像の枠線のタグボタンを作っておけば、コードを入れたい部分にカーソルを合わせて、そのボタンをクリックするだけで枠線のコードが挿入されます。

-未分類