SWELL公式サイト

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

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

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

CSSで簡単にできますか?

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

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

あいうえおLIFE

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

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

本記事でわかること
  • WordPressテーマ「THOR」の画像装飾で枠線を追加CSSでつける方法
  • manablog風のグレーの枠線を「見出し下の画像」につけるコード
  • SWELLならワンタッチで「枠線ありの画像装飾」が可能

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

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

もくじ

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

THORで画像装飾枠線できない
Design vector created by stories - www.freepik.com

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

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

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

あいうえおLIFE

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

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

THORで白い背景
THORの画像装飾
THORで白い背景画像装飾

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

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

manablogの画像の枠線

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

あいうえおLIFE

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

下記が参考画像。

manablogの見出し下画像

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

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

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

  • 角丸
  • 枠あり
  • 影あり
  • フォトフレーム
  • ブラウザ風
あいうえおLIFE

下記が参考画像です。

SWELLの画像装飾(枠線)
SWELLの画像装飾(枠線)
SWELLの画像装飾(枠線)

CSSで楽にやりたいならSWELL

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

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

THORで画像に枠線つけるCSS

追加CSSで枠線つける
Banner vector created by roserodionova - www.freepik.com

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

手順【追加CSSにコピペ】

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

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

STEP
CSSコードを貼り付けます
/*投稿の画像に枠をつける*/
.content img:not(.border-none) {
    padding: 1px;
    border: 1px solid #d8d8d8;
}

STEP
完成イメージ
枠線つけたTHOR画像
枠線つけたTHOR画像
枠線つけたTHOR画像
STEP
枠線の太さや色を変えるには?
  • 枠線の太さ:border: 1px の数字を2pxなど変更可能(1pxが無難)
  • 色を変える:#d8d8d8; のからコードを調べて、好みの色に変更(#d8d8d8は灰色の代表格)

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

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

あいうえおLIFE

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

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

THORに追加CSSで画像装飾
Background vector created by makyzz - www.freepik.com

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

あいうえおLIFE

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

豊富な画像装飾ならSWELL

ブロックエディタ完全対応で、ワンタッチで「枠線ありの画像装飾」可能。

SWELLがおすすめな理由は下記の記事にも書きました。

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

もくじ
閉じる