WordPress【THE THOR】の枠線をおしゃれに装飾する

THORで画像にmanablog風の枠をつけたい人

  THE THORは画像装飾で枠つけられますか？
  manablog風のグレーの枠線を「見出し下の画像」につけるCSSが知りたい

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。

あいうえおLIFE

サイト運営者について : 「副業スキルで複数収入」がテーマ / 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者 / 2サイト合計最高月間1万5,000PV / ブログ収益：月3万〜4万円

WordPressテーマ「THOR」は画像装飾で枠をつけられるかどうか気になりますよね！ぼくもmanablog風にグレーの枠線を「見出し下の画像」につけたいと思っていました。

実際のところ「ツールバーのどこかで設定できるかも」や「探しかた下手なのかも…」と困惑の日々。画像に枠線をつけるCSSがあればサクッと解決できますよね。

目次以降では詳細な理由や具体例を、画像も用いて解説します。

THE THORはおしゃれで洗練されたデザインが特徴のWordPressテーマで、無料テーマの「LION MEDIA / LION BLOG」の上位版として開発されてました。

THE THORのデフォルトでは枠の画像装飾は不可。manablog（@manabubannai）では画像にグレーの枠線が下記のように付いていてオシャレです。

追加するCSSは「投稿の画像に枠をつける」コードなので、記事内画像以外は除外するコーディング。

実際にぼくもTHE THORの枠の画像装飾をCSSでmanablog風のグレー枠線を「見出し下の画像」につけることができました。本記事を読むことでTHE THORの記事がオシャレな装いになりますよ。

あいうえおLIFE

画像の枠線は好みもありますが、CSSだけで運営者も読者も満足するならオススメのアクション。

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

THE THORは枠の画像装飾は不可

THE THORは枠の画像装飾は「ブロックエディタ・クラシックエディタ」でもデフォルトでは不可となっていまます。白い背景の画像には装飾として「枠線」があるとオシャレですよね。

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

サイトやブログ運営していると、見出し下の画像に「freepick」などのフリー画像サイトからベクター画像を使うことがありますよね。白無地背景はシンプルでカッコイイですが、manablogのベクター挿入画像と比較して見栄えが悪いと痛感。

manablog（マナブログ）

manablog（マナブログ）

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

上記のとおり画像装飾は「無・角丸」のみ。角丸とはいえ個性的な装いなので、使用回数は0です。

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

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

ちなみに2023年3月時点の情報で当サイトも使用するWordPressテーマSWELLでは、画像装飾が豊富です。

あいうえおLIFE

「枠あり」のイメージは下記のとおりです。

CSS不要で楽にやりたいならSWELLがオススメ

初めから「楽に画像装飾やりたい」ならSWELLにテーマ変更するのもアリ。実際にぼくもJINからSWELLにテーマ変更したので、【14個の手順】JINからSWELLへテーマ変更（移行・乗り換え）のやり方をお読みください。

あわせて読みたい

SWELLで目次をハイライト【JINからSWELLへテーマ変更】

manablog風のグレーの枠線を「見出し下の画像」につけるCSS

THE THORはおしゃれで洗練されたデザインが特徴ですが、デフォルトのエディターでは枠の画像装飾不可。「投稿の画像に枠をつける」コードなので、記事内画像以外は除外しますのでご安心ください。手順は下記のとり【追加CSS】にコピペするだけ。

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

完成イメージ

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

• 枠線の太さ：border: 1px;　の「数字」を2pxなど変更可能（1pxが無難）
• 色を変える：#d8d8d8;　の「英数字」部分を好みの色のカラーこーどに変更（#d8d8d8は灰色の代表格）

追加CSSを入れる際はバックアップ推奨でCSSカスタマイズは、自己責任になります。

テーマ変更に重要なバックアップの手順とやり方【FTPソフトやプラグインを解説】にやり方は書きましたので、どうぞお読みください。

あわせて読みたい

SWELLメタディスクリプションは引き継ぎ可【バックアップ手順】

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

今日はTHORで画像にmanablog風の枠をつけたい人に向けて、下記を解説しました。

あいうえおLIFE

本記事を読むことでTHE THORの画像装飾が少しオシャレな装いになります。

CSSを追加するだけなので運営者も読者もミニマルな雰囲気で満足すること間違いなし。

当サイトも使用するSWELLはデフォルトで「画像枠線」の装飾はワンタッチで可能です。SWELLはおすすめ！【評判・レビューに忖度なくメリット・デメリットを解説】に詳細を書きましたのでどうぞお読みください。

あわせて読みたい

SWELLのオススメ理由や評価を徹底レビュー【セルフバック不可】

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