WordPress 文章内の画像に 囲み枠を作る

　文章内に画像を入れた場合、画像に枠がないと、文章との境界が分からなくて見ずらい。
その方法が分らなかった。

方法は、まず枠用のCSSを作成し、「カスタムCSS&JS」⇒「カスタムCSSの追加」にてCSSコードの追加を行う。
例

1. /* 画像に枠線を付ける */
2. img.waku {
3.     border: solid 2px #0000ff; /* 枠線のスタイル 太さ 色 */
4.     box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
5. }

次に挿入画像を左クリックし、編集を押す。

さらに、「上級者向け設定」を押し、「画像CSSクラス」欄に上記CSS設定した時の「img.waku 」の「waku」の文字を記入する。

すると画像に枠が作成される。以上で完成。

参考にして頂いた外部記事

Life Jam

 

2 Posts

WordPressの特定の投稿画像に枠線を付ける方法

https://life-jam.com/wordpress-image-border/

WordPressの記事内で画像を挿入することがあると思いますが、 「画像に枠が付いていた方が見やすいし、見栄えも良くなるのにな～。」 と感じたことはありませんか？ 例えば、画像のふちと記事背景色が同

アンフィニ・ラボ

WordPressの画像に枠線をつけてブログを見やすくする方法 - アンフィニ・ラボ

https://infini-lab.com/wordpress-image-border

WordPressの画像に枠線を表示する方法は、とても簡単です。 白い背景のブログに白い画像を載せると、境界がわからなくて残念な印象だったので、薄くボーダーラインを付けました。 修正したのは2点です。 目次style.c

ワードプレステーマTCD

 

10 Users

19 Pockets

WEB系ハウツー記事に重宝間違いなし！プラグインを使わずにソースコードを記載する...

https://tcd-theme.com/2018/07/sourcecode-write.html

WEBに関わるハウツーの記事を書く時は、ソースコードそのものを記事内に記述したい時があります。ソースコードを記事内に記述する時に使えるプラグインはモチロンありますが…プラグインを導入せずに運用したいという方も多いのではないでしょうか。そこで今回は、プラグインを使わずにソースコードを記事内に配置する方法をご紹介します。ソースコードを記事内で使っている方はぜひ試してみてください。これを機に乗り換えも検討してみることも良いかもしれませんね。