Addquicktagの使い方を解説します【オリジナルの太字ボタンを作ってみよう】

The following two tabs change content below.
アバター

松崎茂利

アチーブドリーム代表 / ブロガー / ブログ集客コンサルタント
たった一人でブログだけを使って月商400万円を達成。
個人・法人合わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。
現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。
プライベートコンサルティングの詳細はこちら

ワードプレスでブログを運営している方ならショートコードやタグを記事編集画面で入力したことがあると思いますが、何度も使うようなタグって毎回手入力するのはめんどうですよね。

そこで、私が大変重宝しているのが「Addquicktag」というプラグインです。これはよく使うコードを登録しておくとボタン一つで簡単に呼び出せるというもので、プラグインの中でもトップクラスで有名なものになります。

この記事ではオリジナルの太字ボタンを作成する方法を例にして、Addquicktagプラグインの使い方をできるだけわかりやすく解説していきます。

Addquicktag 使い方

1.オリジナルの太字ボタンをつくったほうがいい理由

まつざき
こんにちは!ブログ集客コンサルタントの松崎(@s_matuzaki)です。

では、まずはじめにオリジナルの太字ボタンをつくったほうがいい理由からお話ししたいと思います。

結論から言うと、ワードプレスのツールバーにある「B(太字)」ボタンはSEOの観点からも多用しないほうがいいからです。くわしくは前回の記事「【SEO】太字タグの使い方に要注意!ブログアクセスアップに欠かせないポイントです」をご覧いただきたいのですが、簡単にまとめると・・・

B(太字)ボタンを多用しないほうがいい理由
ワードプレスのB(太字)ボタンを使うとstrongタグが使われる。このstrongタグは検索エンジンに重要なワードであることを伝えるためのシグナルなので、1記事内で多用しすぎると故意に強調しているととらえられてしまい、ペナルティの対象になる可能性がある

というわけなのです。

だからといって、文字を強調したいときに太字をまったく活用できないのかといったらそういうわけではなく、太字にもやり方がいくつかあるのです。

ツールバーの太字ボタンを使わずに文字を太字にする方法は主に次の2つがあります。

  1. Bタグを使って太字にする
  2. スタイルシート(CSS)を使って太字にする

前回の記事でも解説した通り、Bタグを使ってもいいのですが、サイトのデザインはCSSを使うことが推奨されていますので、CSSでできることは可能な限りCSSを使いましょう!ということで、この記事ではCSSを使って太字にする方法をご紹介したいと思います。

しかも、毎回タグを入れるのはめんどうなので、「Addquicktag」プラグインを使ってオリジナルの太字ボタンを作って簡単に太字を設定できる方法について解説していきます。

2.Addquicktagの使い方をわかりやすく解説します

2-1.Addquicktagとは?作業がこんなに簡単になります!

Addquicktagはワードプレスを長く使っている人なら一度は聞いたことがあるであろう有名プラグインですね。一言でいうと「よく使うショートコードやタグを登録しておいて、ボタン一つで呼び出せるようにするもの」

具体例を出しちゃったほうがわかりやすいと思いますので実際にやりながら便利さを実感してみましょう。たとえば、CSSを使って文字を太字にする場合、Addquicktagを使わない場合は下記のようなやり方になります。

2-1-1.CSSのコードをワードプレスに登録する

CSSで太字にする場合は次のようなコードになります。

.bold {
    font-weight: bold;
}

このコードをワードプレスにあらかじめ登録しておく必要があります。

ワードプレスのダッシュボードから「外観」→「テーマエディター」をクリック。

テーマエディター

「スタイルシート(Style.css)」を選択して、さきほどのCSSのコードを貼り付け、最後に「ファイルを更新」をクリックする。

スタイルシート

これでCSSのコードは登録完了です。

この作業はAddquicktagプラグインを使用する場合も必要な作業です。上の手順に従って登録しておいてください。

2-1-2.記事編集画面で文字にCSSを設定する

上記の手順でCSSに太字のコードを追記してから記事編集画面で下記のようにタグを記入すると・・・

このようにタグを入れると<span class="bold">太字</span>になります。

<span>タグで囲まれた部分が太字になります↓

これが実際に設定した状態です
このようにタグを入れると太字になります。

※記事編集画面では変化しませんのでご注意ください。プレビュー画面で確認してくださいね。

こういったタグを記入する際は「ビジュアル」モードではなく、「テキスト」モードで作業してくださいね。

これがAddquicktagプラグインを使わない場合のやり方なのですが、<span>タグを毎回記入するのはちょっとめんどうですよね。そこでボタン一つでこの<span>タグを呼び出せるようにする便利ツールがAddquicktagプラグインというわけです。

2-2.Addquicktagプラグインをインストールしよう

ということで、Addquicktagプラグインのインストールからやってみましょう。(うちのクライアントさんは私のほうで設定しますのでここは飛ばしていただいて大丈夫です。)

ブログ管理画面から「プラグイン」→「新規追加」をクリック。「プラグインの検索」欄に「addquicktag」と入力してEnterキーを押します。

すると「Addquicktag」プラグインがヒットしますので、「今すぐインストール」をクリックし、「有効化」をクリックします。

これでインストールは終了です。プラグインのインストール方法は基本的に全部一緒なので、ここでは画像は省略させていただきました。上記の手順通りやっていただければ大丈夫かと思いますが、うまくいかないようでしたらコメントでご質問ください。

2-3.Addquicktagに太字のCSSを登録しよう

では、さきほどの太字のタグをAddquicktagに登録してみましょう。(ここもうちのクライアントさんのブログは私のほうで設定します。もちろんご自身でやってみたい方は試してみてください。)

「設定」→「Addquicktag」をクリックします。

設定 Addquicktag

ボタン名は自由でいいのですが、ここでは「太字(CSS)」と入れました。そして、「開始タグ」に「<span class=”bold”>」、「終了タグ」に「</span>」と入力したら一番右のチェックボックスを「オン」にして「変更を保存」をクリックします。

Addquicktag 設定

これでAddquicktagに太字のCSSを呼び出すタグを登録できました。

2-4.Addquicktagに登録した太字を記事編集画面で呼び出してみよう

ここまでくればあとは簡単です。記事編集画面で太字にしたい文字をドラッグして選択し、ツールバーの「Quicktags」をクリックする。

Addquicktag

そして、表示されたメニューからさきほど登録した「太字(CSS)」をクリックします。

quicktag02

これで選択した文字が太字になりました。

さきほどもご説明しましたが、記事編集画面では太字は反映されません。プレビュー画面で確認してみてください。

こういったタグは毎回記入するのはめんどうですし、ミスをする可能性もありますからね。Addquicktagはぜひ使えるようにしておきましょう。

3.まとめ

Addquicktagプラグインの使い方はいかがでしたでしょうか?

この記事では太字のCSSを簡単に呼び出せるようにするための設定方法をご紹介しましたが、他のショートコードやタグも同じ方法で登録することが可能です。

頻繁に使うコードはどんどん登録をして、作業効率アップにお役立てください。

また、前回の記事でも解説したように、Wordpressに標準で用意されている太字(B)ボタンはSEO的には多用厳禁です。この記事で紹介しているCSSを使った太字でしたら、その点を気にせずお使いいただけますので、ぜひご活用いただければと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です