ワードプレスの画像を線で囲みたい

 CSS をいじれば簡単なのは知っていますが、私はブログの画面コピーしたものを特に囲みたいと思っています。

 私は記事内でHTML で囲むことにしました。

 そうなると、CSS で一斉に囲むのも、ちょっと。。(区別することも可能です)

 

 写真や画像を貼り付けてコードエディタに切り換えると画像の最初は以下のHTML になっています。(先頭から必要な部分のみ抜粋)

 

<img src=”https://・・・

となっています。

 この <img と src の間に以下のを追加して写真を囲むことにしました。

style=”border: 2px solid #a9a9a9;”

  コピーして使えますが、半角スペースはあっても問題ないですが、全角スペースはまずい場合があるので気をつけましょう。

 私は画面コピーの場合に境界線がなく、気に入らなかったのですが、時間なくて流されていました。

 実現方法はいろいろありますが、自分は写真毎にHTML を追加することにしました。(今のところですが)

 

<img style=”border: 2px solid #a9a9a9;” src=”https://

 こんな感じになります。

 ちなみに2pxは囲む線の太さです。普通の方は1pxにする人が多いです。

 私は画面コピーの場合は2px にします。インパクトが弱いから。代わりに囲み線の色を灰色にしています。

 色を変え、太さも調整したら、自分のサイトに合ったデザインになると思います。

まず、写真を貼ります。

その後、コードエディタに切り換えます。

ここで該当箇所をいじります。

画面コピーだけは、みっともないと思っていたから、ちょっとホッとしました。

再編集すると文法エラーと出ましたが、敢えて無視しました。見た目のほうが大事に思ったので。