記事内に広告を含みます
この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPress【THE THOR】の枠線をおしゃれに装飾する
THORで画像にmanablog風の枠をつけたい人
THE THORは画像装飾で枠つけられますか？
manablog風のグレーの枠線を「見出し下の画像」につけるCSSが知りたい
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。
WordPressテーマ「THOR」は画像装飾で枠をつけられるかどうか気になりますよね！ぼくもmanablog風にグレーの枠線を「見出し下の画像」につけたいと思っていました。
実際のところ「ツールバーのどこかで設定できるかも」や「探しかた下手なのかも…」と困惑の日々。画像に枠線をつけるCSSがあればサクッと解決できますよね。
結論（本記事の内容）
- THE THORは枠の画像装飾は不可
- manablog風のグレーの枠線を「見出し下の画像」につけるCSS
目次以降では詳細な理由や具体例を、画像も用いて解説します。
THE THORはおしゃれで洗練されたデザインが特徴のWordPressテーマで、無料テーマの「LION MEDIA / LION BLOG」の上位版として開発されてました。
THE THORのデフォルトでは枠の画像装飾は不可。manablog（@manabubannai）では画像にグレーの枠線が下記のように付いていてオシャレです。
実際にぼくもTHE THORの枠の画像装飾をCSSでmanablog風のグレー枠線を「見出し下の画像」につけることができました。本記事を読むことでTHE THORの記事がオシャレな装いになりますよ。
あいうえおLIFE画像の枠線は好みもありますが、CSSだけで運営者も読者も満足するならオススメのアクション。
今日はどうぞ最後まで、お読みくださいね。
タップできるもくじ
THE THORは枠の画像装飾は不可
THE THORは枠の画像装飾は「ブロックエディタ・クラシックエディタ」でもデフォルトでは不可となっていまます。白い背景の画像には装飾として「枠線」があるとオシャレですよね。
白い背景の画像だとインパクトに欠ける
サイトやブログ運営していると、見出し下の画像に「freepick」などのフリー画像サイトからベクター画像を使うことがありますよね。白無地背景はシンプルでカッコイイですが、manablogのベクター挿入画像と比較して見栄えが悪いと痛感。
THORだと画像装飾は角丸のみ
上記のとおり画像装飾は「無・角丸」のみ。角丸とはいえ個性的な装いなので、使用回数は0です。
SWELLではワンタッチで画像に枠線
ちなみに2023年3月時点の情報で当サイトも使用するWordPressテーマSWELL
では、画像装飾が豊富です。
SWELLの画像装飾
- 角丸
- 枠あり
- 影あり
- フォトフレーム
- ブラウザ風
あいうえおLIFE「枠あり」のイメージは下記のとおりです。
CSS不要で楽にやりたいならSWELLがオススメ
初めから「楽に画像装飾やりたい」ならSWELLにテーマ変更するのもアリ。実際にぼくもJINからSWELLにテーマ変更したので、【14個の手順】JINからSWELLへテーマ変更（移行・乗り換え）のやり方をお読みください。
manablog風のグレーの枠線を「見出し下の画像」につけるCSS
THE THORはおしゃれで洗練されたデザインが特徴ですが、デフォルトのエディターでは枠の画像装飾不可。「投稿の画像に枠をつける」コードなので、記事内画像以外は除外しますのでご安心ください。手順は下記のとり【追加CSS】にコピペするだけ。
STEP
追加CSSにコードをコピペ
WordPressの管理画面の【外観】→【カスタマイズ】→【追加CSS】へコードをコピペしていきます。
STEP
CSSコードを貼り付けます
/*投稿の画像に枠をつける*/
.content p img:not(.border-none) {
padding: 1px;
border: 1px solid #d8d8d8;
}manablog風に薄めのグレー枠線のカラーコードを選んでいます。
完成イメージ
テーマ変更に重要なバックアップの手順とやり方【FTPソフトやプラグインを解説】にやり方は書きましたので、どうぞお読みください。
まとめ | THORで画像に枠線つけて視認性アップ
今日はTHORで画像にmanablog風の枠をつけたい人に向けて、下記を解説しました。
- THE THORは枠の画像装飾は不可
- グレーの枠線を「見出し下の画像」につける手順2つ
あいうえおLIFE本記事を読むことでTHE THORの画像装飾が少しオシャレな装いになります。
CSSを追加するだけなので運営者も読者もミニマルな雰囲気で満足すること間違いなし。
当サイトも使用するSWELLはデフォルトで「画像枠線」の装飾はワンタッチで可能です。SWELLはおすすめ！【評判・レビューに忖度なくメリット・デメリットを解説】に詳細を書きましたのでどうぞお読みください。
今日は最後までお読みいただき、ありがとうございました！