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

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

 

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

 

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

 

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

 

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

 

 

 CSSにタグで枠線を追加する

この方法は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)と指示をしたい場合は下記の通りとなり、

 

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

枠線サンプル2

 

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

 

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

テーマの編集

 

2.style.cssを開きます

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

 

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

css

 

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

画像の編集

 

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

上級者向け設定

 

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

 

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

 

あわせてお試しあれ!

 

 

ランキングクリック

 

この記事に関連する記事一覧

コメントは2件です

  1. はまぞふ より:

    とりさん、こんにちは。
    はまぞふです。

    僕もよく、画像を載せる事があります。
    たしかに、赤い点々の枠だと、画像が見やすいですね^^

    CSSは少し苦手意識がありましたが、
    今回の記事を参考に、少し取り入れてみたいと思います^^

    ためになる記事、ありがとうございました。

    応援完了です^^

    • トリ より:

      はまぞふさま、こんばんは!

      赤い点線枠はほんの一例のつもりでやってみたんですが、気になって頂けたようで何よりです^^
      私もHTMLとCSSの区別すら危ういですが、ポイントを押さえておくと、後々便利ですしね!
      応援ありがとうございました。

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ