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 にします。インパクトが弱いから。代わりに囲み線の色を灰色にしています。
色を変え、太さも調整したら、自分のサイトに合ったデザインになると思います。
まず、写真を貼ります。
その後、コードエディタに切り換えます。
ここで該当箇所をいじります。
画面コピーだけは、みっともないと思っていたから、ちょっとホッとしました。
再編集すると文法エラーと出ましたが、敢えて無視しました。見た目のほうが大事に思ったので。
