THE THOR ザ・トール 記事の画像に枠を付ける CSS

THE THOR で、いままで書いてきた 記事の画像に枠を付ける CSSコードを考えてみました。

 

使用テーマ世界一ィィィィィィなWordPressテーマはこちら

 

記事中の画像全てに枠を付けたくなっても画像ひとつひとつ作業していくのは面倒。

CSSで一斉に枠を付け、枠を付けたくない画像には個別にclassを設定して除外できます。

 

THE THOR 記事の画像に枠 を付けるCSS

上記画像をサンプルに枠を付けます。

追加CSSにコードをコピペしてください。

 

.content p img:not(.border-none) {
    border: solid 1px #191919;
    padding: 2px;
}

 

 

サンプルコードでの出来上がりは以下の通り

 

---

 

当サイトで現在試用しているのは影をつけたバージョン。※試用なので変更する場合があります。

paddingを太めにしてbox-shadow: 1px 1px 6px #999999;を追加しています。

 

CSSを適用しない（枠線をつけない）画像

 

枠線をつけたくない画像にはクラス名border-noneを付けます。

 

テキストエディタでクラスを追加する

THE THOR で画像を配置しテキストエディタを見ると以下のようなコードがあります。

<img class="◯◯◯◯◯◯◯" src="◯◯◯URL◯◯◯" alt="◯◯◯" width="◯◯◯" height="◯◯◯" />

これのclass=”◯◯◯◯◯◯◯”の中にborder-noneを追加します。半角スペースを忘れないようにしてください。

例.class=”border-none ◯◯◯◯◯◯◯”

 

画像編集でクラスを追加する

テキストエディタでコードを書くのは面倒という場合はビジュアルエディタ上での作業も可能。

こちらのほうが早いかもしれませんね。

 

ビジュアルエディタ上で配置した画像をクリックすると編集することができます。（鉛筆アイコン）

 

鉛筆アイコンをクリックして出てきた詳細の下の方にクラス名を指定する場所があります。

そこにborder-none を追加しましょう。

 

以上で画像に枠を付けるカスタマイズは完了です。

※カスタマイズは自己責任でお願いします。

 

あとがき

 

今回の画像に枠をつけるカスタマイズは、フォーラムに質問があったので考えてみました。

注意点としてはP要素のimg(画像)全てが対象となるので思わぬところの画像に枠が付いてしまうかもしれません。

逆にP要素ではないimg(画像)には枠がつかないので付いて欲しいところに付かない可能性もあります。例えばカラムで配置した画像などはP要素にならないのでCSSが適用されません。ボックスの中に配置した場合も同様です。

何もない場所に画像を置いたものだけに適用されると考えていただけると良いかと思います。

※カスタマイズは自己責任でお願いします。