AddQuicktagを使って編集画面に「マーカー」ボタンを追加する

WordPress個別サポート

ブログを書くときなどに文章中にマーカーで色を付けたいこともあります。最近は編集画面で「マーカー」ボタンが使える実用的なテーマもありますが、そのようなボタンがない場合、AddQuicktagプラグインを使ってダッシュボードに「マーカー」ボタンを追加する方法があります。

「マーカー」ボタンをクリック
「マーカー」ボタンがあると便利

以下、手順を紹介します。

作業前にAddQuicktagプラグインをインストールしてください。

マーカーとして機能するCSSの作成

まずは、「CSS マーカー」などでネット検索してマーカーとして使いたいコードを見つけましょう。

使いたいマーカーのCSSをコピー
使いたいマーカーのCSSをコピー

ここでは、以下のサイトから引用させていただきました。

【参考】蛍光ペン風にテキスト上をマーカーするCSSを設定してみた | IT便利帳

コピーしたCSSを子テーマのstyle.cssまたは「外観」-「カスタマイズ」-「追加CSS」などに入力してください。

CSSをペースト(「外観」-「カスタマイズ」-「追加CSS」)
CSSをペースト(「外観」-「カスタマイズ」-「追加CSS」)

「外観」-「カスタマイズ」-「追加CSS」メニューを使った場合は「公開」ボタンをクリックすると設定完了です。

簡単そうに書いていますがコード編集に慣れていないと難しいかもしれません。つまづいたときはWordPress個別サポートにご相談ください。1時間あればボタンの設定から使い方まで説明できると思います。

WordPress個別サポート

続いてAddQuicktagを設定しますが、CSSの最初の部分(ここでは「.marker_yellow_futo」)が必要になるのでコピーしておきましょう。

Addquicktagで使う文字(CSSセレクタ)をコピー
AddQuicktagで使う文字(CSSセレクタ)をコピー

言うまでもありませんが選んだCSSによって「.marker_yellow_futo」の内容は異なるので注意してください。

AddQuicktagの設定(ボタンの作成)

WordPressのダッシュボードで「設定」‐「AddQuicktag」メニューを開いて、ボタン名(1)、開始タグ(2)、終了タグ(3)を設定します。

AddQuicktagメニューを開く
AddQuicktagメニューを開く

まず、ボタン名には、投稿や固定ページの編集画面で表示されるボタンの名を入力します。たとえば、「マーカー」や「マーカー(黄)」などです。

ボタン名を設定
ボタン名を設定

開始タグ終了タグはワンセットでマーカーのCSSを機能させるためのHTMLタグを入力します。この記事の例では開始タグは次のようになります。

<span class="marker_yellow_futo">

「marker_yellow_futo」は使うコードによって異なります。前のCSS作成ステップで「コピーしておきましょう」と書いた部分です。ただし、先頭の「.」は不要です。注意してください。

終了タグは次のようになります。

</span>

入力したイメージは次のようになります。

開始タグと終了タグの入力後
開始タグと終了タグの入力後

最後に、このボタンをどの画面で使うかチェックします。ピンと来なければ右端のチェックボックスをチェックしておきましょう。全てのチェックボックスがチェックされます。

ボタンを使う画面をチェック
どの画面でボタンを使うかチェック

「変更を保存」ボタンをクリックすると設定完了、「マーカー」ボタンは完成です。

「マーカー」以外のボタンも同じ手順で作成できます。便利なので、ぜひマスターしましょう。

「マーカー」ボタンの動作チェック

投稿の編集画面を開いて「マーカー」ボタンの動作をチェックしましょう。テキストエディタとビジュアルエディタで動作が異なるので別々に説明します。

テキストエディタの場合

テキストエディタの場合、メニューに「マーカー」ボタンが追加されているか確認しましょう。

テキストエディタの「マーカー」ボタン
テキストエディタの「マーカー」ボタン

マーカーを付けたい文章を選択して「マーカー」ボタンをクリックします。

「マーカー」ボタンをクリック
「マーカー」ボタンをクリック

選んだ文字にタグが付きます。

選んだ文字にタグが付く
選んだ文字にタグが付く

プレビューすると、選んだ文字に色が付いているはずです。

選んだ文字に色が付く
選んだ文字に色が付く

ビジュアルエディタの場合

ビジュアルエディタの場合は「Quicktags」メニューの中に「マーカー」メニューが追加されているか確認しましょう。

「Quicktags」-「マーカー」メニュー
「Quicktags」-「マーカー」メニュー

色を付けるには文字を選択して「Quicktags」-「マーカー」をクリックします。

「マーカー」メニューをクリック
「マーカー」メニューをクリック

操作後の文字に色が付いていませんがトラブルではありません。CSSがダッシュボードに反映されないためビジュアルエディタでは色が付かないのが一般的です。

ビジュアルエディタでは見た目に変化ない
ビジュアルエディタでは見た目に変化ない

プレビューして確認しましょう。うまくいっていれば選んだ文字に色が付いているはずです。

選んだ文字に色が付く
選んだ文字に色が付く

まとめ

このようにAddQuicktagプラグインを使うとダッシュボードに「マーカー」などのボタンを追加することができます。複雑なコードを一瞬で差し込むことができるので、うまく使えばページ作成の効率はグッとアップします。いろいろと試行錯誤してみてください。

作業がうまくいかないときはWordPress個別サポートで説明します。気軽にご相談ください。

WordPress個別サポート

WordPressカスタマイズ