追加cssで画像に枠をつける

最初は「WP Image Borders」というプラグインを使ってみました

設定ですべての画像に枠を付けるか個別に付けるか選べます

個別に付ける場合は若干手作業になる

以下の画像のように枠を付けない方が見やすい場合もあるので

すべての画像を選べません、なので同じ手作業になるのなら

少々面倒でもプラグインを使わずCSSで個別に枠をつけていくことにします

しかしstyle cssに直接コードを書き足すのは崩れるリスクがあるし、テーマのバージョンアップがあったりテーマを変えたりした時に上書きされて消滅してしまう?

新規にCSSを作ってFTPでアップロードするとしても私のような素人にはハードルが高い

google 先生⇒子テーマを作ってそこでstyle cssをカスタマイズせよとのこと

WordPressの子テーマとは、
・最低style.cssとfunctions.phpの2つのファイルからなる
・本体のコードを直接編集せずにテーマをカスタマイズするための機能
・編集をミスしても大元は親テーマに残っているから致命的なエラーになりにくい
・WordPress本体やテーマの更新があってもカスタマイズ内容が消えない

子テーマをつくる??どうやるんじゃ~い  !(*≧m≦)=3  

結局どちらも素人には難しそうなのです

意を決してstyle cssに行ってみた(ダッシュボードの外観からテーマエディタ)

と、ページ上部に「ご存じですか?「ここで CSS を変更する必要はありません  付随の CSS エディター で、編集とライブプレビューを行うことができます。」とありました

 この画面に行きます

「サイトの外観とレイアウトをカスタマイズするには、ここに独自のCSSコードを追加したください」とな??

いきなり拍子抜け(^_^ゞ

使ってみた!!

この「付属のcssエディタ」を使うとエラーチェックもしてくれてとっても便利!
あとは枠線を付けたい画像にCSSクラスを指定すればOKだからガンガン追加できちゃう

ってことは子テーマをつくらなくてもいいってことじゃ?

これはClassicEditorを使用の場合です

記事中の画像に枠をつける方法はテキストエディタから呼び出すことができます

枠をつけたい画像を選択して鉛筆マークをクリック

すると以下のような「画像詳細」が開きます

ここで「画像cssクラス」というところにCSSで指定したclass名を入力して「更新」

と、こうなりました  \(@^0^@)/やったぁ♪ 

ブロックエディタ(Gutenberg)を使うと追加のCSSクラスを登録しておけるので入力作業が簡単になりますが、このブログの場合はgooブログから移行しているためか、ページが崩れてしまったり編集が出来なかったり書き換えられたりしたのでClassicEditorを使ってます

gooブログから移行した分が無事完了したらブロックエディタに慣れなきゃね

Page END だよ