画像を枠線で囲って目立たせよう！

こんにちは、トリでございます。

キャプチャ画像を貼りつける時に、画像背景が白色だと本文と同化しちゃって見づらいな・・・なんてことはありませんか？

私は図解マニュアルを作ることが多いので、しょっちゅうそのことに悩まされており、ペイントでわざわざ枠線を作ってからアップロードするという、なんとも非効率なことをずーっとしておりました。しかも、カーソルが微妙にズレたりして、微調整が難しいことなんの。

で、ある日「もっと簡単に枠線を作る方法はないかね？」とカタカタと検索してみたところ・・・ありました！CSSにタグを追加するだけで、あんなイライラ作業とはもうサヨナラ出来ちゃうんです。同じ悩みを持っていた方は是非活用してみて下さい。

※CSS？タグ？なんだそれは？という方は「最低限覚えておきたいHTML講座」をまずお読み下さい。

この方法はCSSで枠線指示をすることによって、任意の画像に枠線をつける方法になります。

使用するタグはこちら！

%e6%9e%a0%e7%b7%9a%e3%82%bf%e3%82%b0

↑これを指定場所に貼りつけるだけです。

img.の後は任意の名前で結構ですので（この場合だとblackframe）、自分がその設定に対して覚えやすい名前を付けておきましょう。

そしてborderが線の種類を指します。この場合ですと、1ピクセル（1px）の黒色（#000000）の直線（solid）という意味になります。他にも、点線（dotted）・二本線（doubule）なども指定することが出来ます。

更に、色に関しましてはたーくさん種類がございますので、こちらのサイトを参考にして下さい。色はカラー名・カラーコード（16進法）のどちらで指定してもOKです。

また、画像と枠線の間に隙間が欲しい・・・という方はpaddingで指示をすることも可能です。例えば、5ピクセルの内側余白を持った（padding: 5px）3ピクセル（3px）の赤色（#ff0000）の点線（dotted）と指示をしたい場合は下記の通りとなり、

枠線タグ２
実際の画面でみると↓のようになります。色んな線の種類や余白スペース、そして色を試しながらベストなものを探してみて下さいね。

枠線サンプル２

では、WPでの実際の設定方法です。

1.「外観」の「テーマ編集」をクリックします

テーマの編集

２．style.cssを開きます

%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88

３．ファイルの一番下に先ほど紹介したタグを貼りつけます（※間違って設定してしまった時のために、追加前の状態をメモパッドなどにコピーしておきましょう）

css

４．ビジュアルモードで画像を選択して「編集」ボタンを押します

５．「画像CSSクラス」に３でimg.の後につけた名称を入力します

上級者向け設定

以上で、画像に枠線が表示されます。

登録した枠線のクラス名を覚えるのは無理！という方は、「三種の神器を使いこなせ！」でお伝えした単語帳の登録を使って、「くろわく」と変換したら黒枠のクラス名が、「あかてんわく」と変換したら赤点線枠のクラス名などが出てくるようにしておけば楽になりますよ。

あわせてお試しあれ！

トラックバックURL: