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

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

 

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

 

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

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

 

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

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

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

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

 

操作手順
外観 → カスタマイズ → 追加CSS
.content p img:not(.border-none) {
    border: solid 1px #191919;
    padding: 2px;
}

 

CSS 画像に枠を付ける 解説
太さや色の数値はサイトにあわせ変更可能です。
画像と枠の間に隙間が必要なければpadding:2px;は削除。
線の種類は色々あるのでこちらもサイトにあわせ適用してください。
solid 実線
double 実線二本
groove立体的に窪んだ線で表示されます。 立体的な凹線
ridge立体的に隆起した線で表示されます。 立体的な凸線
inset 全体的に凹で見える線
outset 全体的に凸で見える線
dashed 破線

 

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

枠を付けるサンプル画像

 


 

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

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 ◯◯◯◯◯◯◯”

 

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

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

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

 

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

THOR 画像編集 クラス名

 

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

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

THOR 画像編集 クラス名を付ける

 

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

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

 

あとがき

 

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

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

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

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

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

 

>