【THORユーザー必見】画像に枠をつけるCSS【manablog風】

WordPressテーマ「THOR」だと、画像装飾で枠線をつけられなくて困ってます。

できれば、manablog風にグレーの枠線を「見出し下の画像」につけたいです。

CSSで簡単にできますか？

ほかのテーマだと「枠線ありの画像装飾」は簡単ですか？

今回は、上記のお悩みに答えていきます。

あいうえおLIFE

当サイトは、SWELLでブログ運営しています。

特化ブログの方で、WordPressテーマ「THOR」を使っていて、不便なことが「画像装飾で枠線をつけられない問題」でした。

THORで人とは違う「画像装飾」で差をつけましょう。

どうぞ、最後までお読みくださいね。

初心者から上級者までブログやサイト作成にもおすすめ！！

17,600円（税込）

ブロックエディタ完全対応！他テーマからの移行プラグイン完備！マニュアル公式サイト＋フォーラムで安心サポート！挫折しないブログ・サイト運営が可能！

SWELL公式サイトSWELLレビュー記事を読む

THORは画像装飾で枠つけられない

ブロックエディタでも、クラシックエディタでもデフォルトでは、不可。

画像装飾として、「枠線」をつけたいですよね。

白い背景の画像だとインパクトに欠ける

あいうえおLIFE

フリー画像サイトで、freepickというサイトの「ベクター画像」を使うことがあります。

おしゃれなのに、白い背景だと「ボヤ」っとするんですよね。

THORで白い背景

THORだと画像装飾は角丸のみ

白い背景画像で、ブログの背景が白無地だと、無機質感MAX。

manablogの画像の枠線

manablog（@manabubannai）だと、画像にグレーの枠線がついていてオシャレ。

あいうえおLIFE

白い背景探してこれませんでしたが、見出し下の画像に必ず装飾があります。

下記が参考画像。

manablogの見出し下画像

THORでも「見出し下の画像」にグレーの枠線つけましょう。

SWELLだとワンタッチで画像に枠線

SWELLでは、画像装飾豊富です。

あいうえおLIFE

下記が参考画像です。

SWELLの画像装飾（枠線）

CSSで楽にやりたいならSWELL

初めから「楽に画像装飾やりたい」ならSWELLにテーマ変更するのもアリ。

下記にJINからSWELLにテーマ変更した記事を置いておきますね。

THORで画像に枠線つけるCSS

THORのエディターでは、枠線つける画像装飾できないので、CSSでやっちゃいます。

手順【追加CSSにコピペ】

STEP

WordPressの管理画面の【外観】→【カスタマイズ】

追加CSSにコードをコピペしていきます（STEP2にアリ）。

STEP

CSSコードを貼り付けます

/*投稿の画像に枠をつける*/
.content img:not(.border-none) {
    padding: 1px;
    border: 1px solid #d8d8d8;
}

STEP

完成イメージ

枠線つけたTHOR画像

STEP

枠線の太さや色を変えるには？

• 枠線の太さ：border: 1px　の数字を2pxなど変更可能（1pxが無難）
• 色を変える：#d8d8d8;　のからコードを調べて、好みの色に変更（#d8d8d8は灰色の代表格）

追加CSSを入れる際は、バックアップ推奨

CSSカスタマイズは、自己責任になります。

あいうえおLIFE

バックアップ推奨でして、下記の記事にもやり方は書きました。

まとめ | THORで画像に枠線つけて視認性アップ

今回は、WordPressテーマ「THOR」で「画像に枠線をつける」CSSを紹介しました。

あいうえおLIFE

manablogに寄せた、グレーの枠線の雰囲気なので、気に入ったらやってみてね。

今日は、最後までお読みいただき、ありがとうございます。