魅力的な文字装飾ができる！AddQuicktagとCSSで記事作成の効率アップ！

こんにちは、久川和人です。

前回は、WordPressのプラグインであるAddQuicktagの設定方法と使い方についてお話いたしました。
↓↓↓
AddQuicktagの設定方法と使い方～記事作成を効率化させるタグも紹介

AddQuicktagを使うと、ビジュアルエディタやテキストエディタにタグを割り当てることができて記事作成の効率が上がります。

AddQuicktagだけでも便利なのですが、CSSと組み合わせると、お洒落な囲み枠・ボタンを作成したり、文字にマーカーを引いたり、できることが広がります。

今回は、AddQuicktagとCSSを組み合せて使う方法についてお話していきます。AddQuicktagとCSSを組み合せれば、魅力的な文字装飾ができるだけでなく、記事作成の効率もさらにアップさせることも可能です。

AddQuicktagのインストールや使い方についてはこちらの記事をご覧ください。
↓↓↓
AddQuicktagの設定方法と使い方～記事作成を効率化させるタグも紹介

CSSの使用方法

AddQuicktagでCSSを使用するには、つぎのような手順になります。

この手順を、例としてつぎのような「黄色いマーカー」を作ることをしてみます。

例）これが黄色いマーカーです。

style.css（追加CSS）にコードを書き込む

黄色いマーカーを引くためのCSSは次のようになります。

このコードを”style.css”または”追加CSS”に書き込みます。Jetpackをインストールしている場合やWordPressテーマによっては、”追加CSS”というCSSを自由に記載できる場所があります。

”追加CSS”がある場合は、”style.css”に書き込まず、”追加CSS”に書き込むことをおすすめいたします。”style.css”に書かれている内容を削除、書き換えたりすると、WordPress画面が真っ白になって表示されなくなるなど危険があるからです。

”style.css”と”追加CSS”に書き込む方法を説明いたします。

”style.css”に書き込む場合

1.WordPress管理画面の左メニューの【外観】⇒【テーマの編集】をクリックします。

2.右側のテーマファイルから、【style.css】をクリックします。

3.一番下に、先ほどの黄色いマーカーのCSSをコピーして貼り付け、【ファイルの更新】をクリックします。

”追加CSS”に書き込む場合

1.WordPress管理画面の左メニューの【外観】⇒【CSS編集】をクリックします。

※CSS編集がない場合は、【ウィジェット】⇒【追加CSS】をクリックします。

2.追加CSS画面が表示されます。先ほどの黄色いマーカーのCSSをコピーして貼り付け、【公開】をクリックします。

AddQuicktagにstyle.css（または、追加CSS）で書き込んだコードを登録する

追加したCSSをAddQuicktagに設定します。

1.WordPress管理画面の左メニューの【設定】⇒【AddQuicktag】をクリックします。

2.AddQuicktagを設定します。
①タグの名前を入力：ここでは、”マーカー（黄色）”としました。
②開始タグ：<span class=”marker_yellow”>と入力
③終了タグ：</span>と入力
④チェックボックス：チェックします。
⑤【変更を保存】をクリックします。

AddQuicktagを使いコードを書き込む

テキストエディタとビジュアルエディタで実際に記事を書いていきます。

テキストエディタの場合

①テキストエディタを開き、文字を入力し、入力した文字を選択します。
②【マーカー（黄色）】をクリックします。

タグが挿入されます。

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

①ビジュアルエディタを開き、文字を入力し、入力した文字を選択します。
②【Quicktags】プルダウンにある【マーカー（黄色）】をクリックします。

ビジュアルエディタ上では【マーカー（黄色）】が反映されません。プレビューで確認をします。

　ビジュアルエディタで反映させたい場合は、”editor-style.css”にも記載する必要があります。
①テーマの編集画面で【editor-style.css】をクリックします。
②CSSを貼り付けます。
③【ファイルを更新】をクリックします。

CSSをいじるのはちょっと・・・ってときは

CSSは正確にコードを入力しないと、意図しない動作になったり、ブログが表示されなくなったりとリスクが伴います。

そんなときは、【TinyMCE Advanced】というプラグインを使うことで、文字装飾を行うこともできます。

TinyMCE Advancedの設定方法と使い方を解説~記事作成時の文字装飾を簡単に

2017.12.27

こんにちは、久川和人です。 今回は、TinyMCE Advancedのインストール・設定・使い方について説明していきます。 【TinyMCE Advanced】は、ワードプレスの投稿記事や固定ページを書く時の画面（Gutenberg、ビジュアルエディター）の編集ボタンを自由に増やすことができます。 ...

おわりに

今回は、AddQuicktagとCSSを組み合せて使う方法をお話いたしました。

CSSを利用することで、AddQuicktagだけではできなかったこともできるようになり、AddQuicktagだけよりもより効率よくブログを書くことができるようになります。

今回は、黄色いマーカーを引くだけの紹介でしたが、違う色のマーカーを引いたり、カラフルな囲み枠を作成したりと便利に使うことができるので、ぜひ利用してみてくださいね。