本記事は約2分で読むことができます。
【THORユーザー必見】画像に枠をつけるCSS【manablog風】


WordPressテーマ「THOR」だと、画像装飾で枠線をつけられなくて困ってます。
できれば、manablog風にグレーの枠線を「見出し下の画像」につけたいです。
CSSで簡単にできますか?
ほかのテーマだと「枠線ありの画像装飾」は簡単ですか?
今回は、上記のお悩みに答えていきます。



当サイトは、SWELL
特化ブログの方で、WordPressテーマ「THOR」を使っていて、不便なことが「画像装飾で枠線をつけられない問題」でした。
- WordPressテーマ「THOR」の画像装飾で枠線を追加CSSでつける方法
- manablog風のグレーの枠線を「見出し下の画像」につけるコード
- SWELL
ならワンタッチで「枠線ありの画像装飾」が可能
どうぞ、最後までお読みくださいね。
\ 乗り換えプラグイン完備 /
ブロックエディタでの書きやすさNo.1
THORは画像装飾で枠つけられない


ブロックエディタでも、クラシックエディタでもデフォルトでは、不可。
画像装飾として、「枠線」をつけたいですよね。
白い背景の画像だとインパクトに欠ける



フリー画像サイトで、freepickというサイトの「ベクター画像」を使うことがあります。
おしゃれなのに、白い背景だと「ボヤ」っとするんですよね。


THORだと画像装飾は角丸のみ
白い背景画像で、ブログの背景が白無地だと、無機質感MAX。
manablogの画像の枠線
manablog(@manabubannai)だと、画像にグレーの枠線がついていてオシャレ。



白い背景探してこれませんでしたが、見出し下の画像に必ず装飾があります。
下記が参考画像。
SWELLだとワンタッチで画像に枠線
SWELL
- 角丸
- 枠あり
- 影あり
- フォトフレーム
- ブラウザ風



下記が参考画像です。


CSSで楽にやりたいならSWELL
初めから「楽に画像装飾やりたい」ならSWELL
THORで画像に枠線つけるCSS


THORのエディターでは、枠線つける画像装飾できないので、CSSでやっちゃいます。
手順【追加CSSにコピペ】
追加CSSにコードをコピペしていきます(STEP2にアリ)。
/*投稿の画像に枠をつける*/
.content img:not(.border-none) {
padding: 1px;
border: 1px solid #d8d8d8;
}


- 枠線の太さ:border: 1px の数字を2pxなど変更可能(1pxが無難)
- 色を変える:#d8d8d8; のからコードを調べて、好みの色に変更(#d8d8d8は灰色の代表格)
追加CSSを入れる際は、バックアップ推奨
CSSカスタマイズは、自己責任になります。



バックアップ推奨でして、下記の記事にもやり方は書きました。
まとめ | THORで画像に枠線つけて視認性アップ


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



manablogに寄せた、グレーの枠線の雰囲気なので、気に入ったらやってみてね。
豊富な画像装飾ならSWELL
ブロックエディタ完全対応で、ワンタッチで「枠線ありの画像装飾」可能。
SWELLがおすすめな理由は下記の記事に(当サイトではSWELL関連記事も多く書いています)。
今日は、最後までお読みいただき、ありがとうございます!