本記事は約2分で読むことができます。
【THORユーザー必見】画像に枠をつけるCSS【manablog風】
WordPressテーマ「THOR」だと、画像装飾で枠線をつけられなくて困ってます。
できれば、manablog風にグレーの枠線を「見出し下の画像」につけたいです。
CSSで簡単にできますか？
ほかのテーマだと「枠線ありの画像装飾」は簡単ですか？
今回は、上記のお悩みに答えていきます。
あいうえおLIFE当サイトは、SWELL
でブログ運営しています。
特化ブログの方で、WordPressテーマ「THOR」を使っていて、不便なことが「画像装飾で枠線をつけられない問題」でした。
本記事でわかること
- WordPressテーマ「THOR」の画像装飾で枠線を追加CSSでつける方法
- manablog風のグレーの枠線を「見出し下の画像」につけるコード
- SWELLならワンタッチで「枠線ありの画像装飾」が可能
どうぞ、最後までお読みくださいね。
タップできるもくじ
THORは画像装飾で枠つけられない
ブロックエディタでも、クラシックエディタでもデフォルトでは、不可。
画像装飾として、「枠線」をつけたいですよね。
白い背景の画像だとインパクトに欠ける
あいうえおLIFEフリー画像サイトで、freepickというサイトの「ベクター画像」を使うことがあります。
おしゃれなのに、白い背景だと「ボヤ」っとするんですよね。
THORで白い背景
THORだと画像装飾は角丸のみ
白い背景画像で、ブログの背景が白無地だと、無機質感MAX。
manablogの画像の枠線
manablog（@manabubannai）だと、画像にグレーの枠線がついていてオシャレ。
あいうえおLIFE白い背景探してこれませんでしたが、見出し下の画像に必ず装飾があります。
下記が参考画像。
manablogの見出し下画像
SWELLだとワンタッチで画像に枠線
SWELLでは、画像装飾豊富です。
- 角丸
- 枠あり
- 影あり
- フォトフレーム
- ブラウザ風
あいうえおLIFE下記が参考画像です。
SWELLの画像装飾（枠線）
CSSで楽にやりたいならSWELL
初めから「楽に画像装飾やりたい」なら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を紹介しました。
あいうえおLIFEmanablogに寄せた、グレーの枠線の雰囲気なので、気に入ったらやってみてね。
豊富な画像装飾ならSWELL
ブロックエディタ完全対応で、ワンタッチで「枠線ありの画像装飾」可能。
SWELLがおすすめな理由は下記の記事に（当サイトではSWELL関連記事も多く書いています）。
今日は、最後までお読みいただき、ありがとうございます！