TheTHORで画像に枠線をつける方法

  • 2023年6月3日
  • 2023年6月3日
  • IT
  • 16view
IT

概要

手順の投稿でスクショを多用してます。スクショの背景が白いと投稿の背景との境界線がわからない。画像に枠線をつけて読みやすくする。

実装方法

CSSをカスタマオズする。ページ内の個別の画像に枠の有無を設定できるようにする。ブロックエディタの枠線の表示設定でやればいいのかと思ったら、The THORはブロックエディタに対応してなかった。

改修前

これでは見出しとスクショの区別がよくわからない。手順書の品質は作業の不効率や操作ミスにつながるので改善します。

実装方法

ダッシュボード>外観>カスタマイズ>追加CSS

.content p img:not(.border-none) {
border: solid 1px #c0c0c0;
}

これで画像を追加すると枠が表示されるようになった

枠を表示したくないとき

対象の画像を選択し、変種をクリックする

border-noneを追加する

残件

設定後に作成した記事では画像に枠が表示されるようになりました。既存の投稿では枠が表示されなかった。この問題はあとで考えることにして投稿に画像を追加をやり直すと枠線が表示されるようにしました。

参考にしたサイト

THE THOR ザ・トール 記事の画像に枠を付ける CSS THE THOR https://karaagebow.com/archives/11732

最新情報をチェックしよう!
>最強の情報発信ツールWordPress

最強の情報発信ツールWordPress

御社がインターネットで影響力を武器にしようと思ったら使うべきツールはWordPress一択です。

CTR IMG