[WordPress]画像に枠線をつけて見やすいページにする方法

laptop-pc

本ページのように、または会社でPC操作系のドキュメントを作る際など、画面イメージを掲載することが多いかと思う。キャプチャした画面の背景が白だったりすると、↓のように、どこが境目なのかわからなくなってしまう。


no-border-image


そこで、画像に枠線をつける方法を解説しよう。

 

CSSファイルの編集

imgタグに一つずつ枠線を付けていくのも手だが、面倒なのでやめ他方がよい。
CSSにClass設定をし、枠線をつけたい画像のみそれを呼び出す方法で進める。

WordPressの  外観 → テーマの編集WordPressのメニュー

 

 

 

 

右の所から、スタイルシート(style.css)をクリック。WordPressで編集するファイルを選ぶ

 

imgの箇所を検索して探し、スタイルシートに枠線の設定を追記するそのすぐ下あたりに新しい定義を追記したほうが良いだろう。後々調査する際にもすぐ見つけられるはずだ。

今回は、
Class名 bg ※自由に決めていただいて構わない
border(枠線の太さ) 1px
solid gray という色
を指定した。

ファイル更新を忘れずに。ファイルを更新ボタン

 

画像ファイルに枠線を

先ほどの、枠線が無くて境界が分からない画像を参考に進めよう。

対象の画像を挿入した後クリック画像メニュー
このような吹き出しメニューがでるので、鉛筆アイコンをクリック。

上級者向け設定の箇所をクリックすると、WordPressの画像詳細画面設定画面が表示される。(元から表示されている場合もあるかもしれない)

 

 

 

 

 

画像CSSクラスの欄に、画像CSSクラスにクラス名を入力先ほど設定したClass名「bg」を入力。

※ちなみに、bgは私が勝手に作ったClass名なのでみなさんのわかりやすい名前を付けてもらえればよい。

更新し、変更内容を反映させよう。更新ボタンをクリック

 

画像の枠線を確認

今回の設定内容だと→のような表示となる。枠線が正しく表示されているか確認

色や太さを変えたりできるので、好みに合わせてカスタマイズしてほしい。