私はこれが嫌でいろいろ試した結果、画像の外枠の境目に枠線をつける超簡単な方法がありましたので共有したい思います。
この方法が一番編集の手間が省けて、後々デザインの変更をしたいときも簡単にできるので能率的だと感じています。
画像に枠線をつける手順【２ステップ】
超簡単に画像に枠線をつけますので、プログラミングコードの意味だとか、記入方法だとか、そんなごちゃごちゃしたことは極力省いて一気に説明します！
スタイルシートにCSSコードを追記
下の好きなデザインのCSSコードをスタイルシートにコピペで追記します。
CSSコードを追記する場所は、ワードプレス管理画面の「外観」→「カスタマイズ」→「追加CSS」にあります。
枠線スタイル１「影」
|
1 2 3 4 |
img.wakusen { border: solid 1px #808080; box-shadow: 0px 0px 5px #808080; } |
枠線スタイル２「シンプル線」
|
1 2 3 |
img.wakusen { border:1px solid #dddddd; } |
枠線スタイル３「額縁」
|
1 2 3 |
img.wakusen { border: outset 10px #900; } |
ここでは、「wakusen」という画像CSSクラス名にしていますが、自分の好きなクラス名に変更してくださいね。クラス分けしたものに名前を付けることでその画像にだけ指定の枠線を付けることができます。ちなみに、「♯」の後のカラーナンバーを変更すると自分の好きなカラーの枠線に変更できますよん。
※このコピペ方法では「img」フォーマットの画像しか枠線が付きませんので注意してください！
挿入画像にCSSクラス名を記入
スタイルシートに自分の好きなデザインのCSSコードをコピペ出来たら、画像に枠線を付ける準備は完了！
では、画像に枠線をつけていきましょう。
ワードプレスのテキストエディターで、挿入している画像をクリックすると下の写真のようなUIが現れますので、鉛筆マークを選択します。
次に、「画像詳細」画面で「上級者向け設定」から「画像CSSクラス」に「クラス名（wakusen）」を記入し、「更新」を押せばその指定した画像に枠線が反映されます。
以上で枠線のデザインをつける作業は完了ですので、つぎからもこの要領でクラス名を「画像CSSクラス」に記入するだけです。
お疲れさまでした！
この方法が一番簡単で、枠線の有無をその場その場で臨機応変に決めることができるので扱いやすいと思いますよ。私もこの方法で枠線のデザインをしています。
MATOME
無事ワードプレスの画像に枠線を付けることができたでしょうか？
このコピペ方法だったらプログラミングの知識がない方でも簡単に枠線を付けられたと思います。
上でも言いましたが、枠線の色を変更したい場合は、「♯」のあとのカラーナンバーをかえてくださいね。