エディタにボタン追加で記事装飾を便利に

2019年9月15日

プラグインは出来るだけ増やしたくないので、CSSを追加する形でカスタマイズしたい
CSSを弄るのはhtml時代に少しかじっただけの私にも出来そうなものだけをPickup
このテーマのathenaは情報量が全くと言っていいほど少ないので苦戦中です

gooブログから引っ越した際、記事は移行できたけど全ての画像やアイコンが✖マーク(・∀・)??
画像のファイル名やパスがgooブログ独自のもので、それを新環境に合わせるためいろいろ調べていた時に今後のカスタマイズに役立ちそうな情報をメモした中のひとつです

画像や文字の装飾を手打ちでしのいでいたタグをエディタで呼び出せたら便利！！ということで
AddQuicktagというプライグインをインストールしました（wordpress5.2.7/Classic Editor）

CSSで追加したコードをエディタから呼び出すためのボタンを作ってくれるプラグインです

1.インストールして有効にするとダッシュボードの設定のところにAddQuicktagが表示されます

2.それを開くとAddQuicktagの設定画面になります

3.「ボタン名」に自分でわかりやすい名前を入力/「開始タグ」にhtmlのコードをコピペ（終了タグは空白）
「h2]や「h3」など中に要素が入らない場合は「開始タグ」が<h2>や<h3>「終了タグ」が</h2>や</h3>にしておくと便利です

4.次に右側の四角い部分にチェックを入れます

「変更を保存」を押して完了　するとエディタにボタンが出来ています

↑↑ボタンが追加されたテキスト編集画面

ボタンを押すだけでタグが入力されました＼(＠＾０＾＠)/

こちらはビジュアル編集画面

追加ポイント画像の枠付けや引用文なども同じ手順で追加することができます
CSSで定義づけしておけばこんなに便利になるんです

ちなみにcodeやpreの背景に色を付けたい場合はあらかじめCSSに追加しておくと便利

色は統一した方がいいかもしれません

と、この作業をするためにたどり着いたプラグインですが
他にもいろいろ便利に使えそうなものを試してみることにします
その設定メモはADDQuicktag備忘録として次の記事に残します

-ちょこっとメモ-

表を作ろうと思って気が付いたこと

Classic Editor/ビジュアルに表挿入のボタンが無い！！！

こっちへ引っ越してくる前には確かにあった

勝手にいろいろ変更してくれちゃうから使ってなかったけど

表の挿入は必要です

前のと比較してわかったこと

「設定」「投稿設定」の「ユーザーにエディタの切り替えを許可」が「いいえ」になってる

「はい」にして無事解決（でも、やっぱり使いにくい）

結局エクセルで作ってコピペしました
罫線が表示されないのは我慢！！

これは囲み枠のカラーバリエーションです