WordPressテーマ SnowMonkey 画像に枠線を付ける方法

  • ブックマーク
  • Feedly
額縁の画像

ブログ記事に写真や画像を入れるときにブログの背景との境界がわかりにくくなることがあります。

そういうときは画像に枠線を付けると見やすくなることがあります。

WordPressテーマ SnowMonkeyで「追加CSS」を使った画像に枠線を付ける方法をお伝えします。

画像に枠線を付けるとこうなる

下の画像は枠線を付けていない画像です。ブログの背景と同じ色で境界がわかりにくくなっています。

枠線を付けることで見やすくなりました。

追加CSSにコードを入力する

WordPressの管理画面を開きサイドバーメニューの 「外観」→「カスタマイズ」をクリックします。

カスタマイズのメニューが開くので「追加CSS」をクリックします。

赤枠で囲んだところにコードを入力します。

コードは以下のものを入力します。

.frame img {
border: 1px #707070 solid;
}

「frame」 という文字列(クラス名)は 好みに応じて変更しても構いません。画像ごとに枠線を付けるときに使うので忘れにくいものにしておきましょう。例えば「wakusen」「waku」などでもいいでしょう。

「1px」が枠線の太さ、「#707070」が色、「solid」がスタイルを設定しています。好みに応じて変えてみてください。

追加CSSのコードは1度入力すれば、記事ごとに設定する必要はありません。 記事ごとに設定するのはこのあと説明する「高度な設定」に入力することだけです。

「高度な設定」 で 画像ごとに枠線を設定する

投稿画面で枠線を付けたい画像を選択し右側のメニューをスクロールすると1番下に「高度な設定」が出てくるのでクリックします。

「追加CSSクラス」にコードを入力するときに決めたクラス名(「frame」など)を入力します。

これで画像に枠線が付きます。

まとめ

Photoshopなどのソフトで事前に枠線をつけることも可能です。しかしWordPressに貼り付けた後に「この画像にも枠線があった方がいいなぁ」と思ったような場合にまた画像の編集からとなるとめんどくさいと思うことがあります。

追加CSSにコードを入れておけば、画像に枠線を付けたいときにちゃちゃっと設定できるので便利です。

この事の執筆者


大西 務(おおにし つとむ)

製薬会社の薬事部門で申請や届出などの業務を10年間行う。2020年に行政書士事務所を開業。ドローンの許可承認申請を主な業務として活動。飛行ルールを守って安全にドローンを飛ばすことを重視したサポートを行っている。温泉好きのいぬバカ。京都府在住。1974年生まれ。

詳細はこちら

X   Facebook  Instagram

ドローンの許可に関する疑問やお悩み

ドローンの許可に関する疑問や不安、お悩みをサポートします。
まずはお気軽にご相談ください。

  • ブックマーク
  • Feedly