WordPressテーマ、SWELLのクラシックエディターで投稿ページの画像に、枠線や影をつける方法をご紹介します。
そのままの画像だと、背景との境界線がわかりづらいときなどに活用ください。
SWELLクラシックエディター:画像に枠や影をつける方法
ここでは例として、当サイトのロゴ画像に枠線を付与する手順で解説します。
![YOSHI-TECH-NOTE_LOGO](https://ytechnote.com/wp-content/uploads/2022/11/YOSHI-TECH-NOTE_LOGO_1.png)
当サイトのロゴ画像
(1)投稿画面で配置した画像のサブメニューから編集画面を開きます。
![画像の編集へ](https://ytechnote.com/wp-content/uploads/2023/11/3d86d22e32b978fd9f06f633f7d7b7bb.webp)
画像の編集へ
(2)画像の編集画面が開いたら「上級者向け設定」の「画像 CSS クラス」に枠線のコード「border」を入力します。
![画像に枠線をつけるコード](https://ytechnote.com/wp-content/uploads/2023/11/f8cd69b6277d409fdc08307b973897a3.webp)
画像に枠線をつけるコード
****************************
![上級者向け設定が閉じている状態](https://ytechnote.com/wp-content/uploads/2023/11/449c84cf4f97fce4dac9273e2f8b8aa9.webp)
上級者向け設定が閉じている状態
****************************
(3)コードを入力したら右下のボタンで「更新」します。
![画像の編集を更新](https://ytechnote.com/wp-content/uploads/2023/11/22b03f4f4bead880a044bf0086bd7c69.webp)
画像の編集を更新
(4)エディター上では反映されないことがあるので、プレビューで実際の画像を確認してください。
画像に枠線が付きました。
![YOSHI-TECH-NOTE_LOGO](https://ytechnote.com/wp-content/uploads/2022/11/YOSHI-TECH-NOTE_LOGO_1.png)
画像に枠線がついた
「画像 CSS クラス」に入力できるコードは3種類、
- 枠:コードは「border」
- 影:コードは「shadow」
- フォトフレーム風:コードは「photo_frame」
となります。
![YOSHI-TECH-NOTE_LOGO](https://ytechnote.com/wp-content/uploads/2022/11/YOSHI-TECH-NOTE_LOGO_1.png)
枠線:border
![YOSHI-TECH-NOTE_LOGO](https://ytechnote.com/wp-content/uploads/2022/11/YOSHI-TECH-NOTE_LOGO_1.png)
影:shadow
![YOSHI-TECH-NOTE_LOGO](https://ytechnote.com/wp-content/uploads/2022/11/YOSHI-TECH-NOTE_LOGO_1.png)
フォトフレーム風:photo_frame
枠線(border)と、フォトフレーム風(photo_frame)は違いがわかりにくいかも。
ブロックエディターであればこのほかに、
- ブラウザ風:コードは「browser_mac」
- デスクトップ風:コードは「desktop」
の2種類の装飾もありますが、クラシックエディターでは反映されませんでした。
クラシックエディターだと装飾機能に制限があり残念ですが、枠や影をつけるだけでも充分見やすさはアップします。
ちなみに、SWELLで画像の枠や影をサイト全体に一括指定する方法は無く、個別に設定するしかないようです。
一括指定できる良い方法が発見できたら記事を更新します。
以上です、最後までお読みいただきありがとうございました。
コメントをどうぞ