松崎茂利
たった一人でブログだけを使って月商400万円を達成。
個人・法人合わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。
現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。
プライベートコンサルティングの詳細はこちら
最新記事 by 松崎茂利 (全て見る)
- 揚げ物が体に悪い５つの理由。健康への悪影響をまとめてみた。「まだ揚げ物食べてるんですか？」 - 2021.08.12
- 読了率とは？Googleアナリティクスでの計測方法「Wp Scroll Depth」 - 2020.11.27
- ドリームキラー3つの対処法！友人や家族がドリームキラーになる理由 - 2020.11.16
ワードプレスでブログを運営している方ならショートコードやタグを記事編集画面で入力したことがあると思いますが、何度も使うようなタグって毎回手入力するのはめんどうですよね。
そこで、私が大変重宝しているのが「Addquicktag」というプラグインです。これはよく使うコードを登録しておくとボタン一つで簡単に呼び出せるというもので、プラグインの中でもトップクラスで有名なものになります。
この記事ではオリジナルの太字ボタンを作成する方法を例にして、Addquicktagプラグインの使い方をできるだけわかりやすく解説していきます。
目次
1．オリジナルの太字ボタンをつくったほうがいい理由
では、まずはじめにオリジナルの太字ボタンをつくったほうがいい理由からお話ししたいと思います。
結論から言うと、ワードプレスのツールバーにある「B（太字）」ボタンはSEOの観点からも多用しないほうがいいからです。くわしくは前回の記事「【SEO】太字タグの使い方に要注意！ブログアクセスアップに欠かせないポイントです」をご覧いただきたいのですが、簡単にまとめると・・・
というわけなのです。
だからといって、文字を強調したいときに太字をまったく活用できないのかといったらそういうわけではなく、太字にもやり方がいくつかあるのです。
ツールバーの太字ボタンを使わずに文字を太字にする方法は主に次の２つがあります。
- Bタグを使って太字にする
- スタイルシート（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のコードは登録完了です。
２-1-2．記事編集画面で文字にCSSを設定する
上記の手順でCSSに太字のコードを追記してから記事編集画面で下記のようにタグを記入すると・・・
<span>タグで囲まれた部分が太字になります↓
※記事編集画面では変化しませんのでご注意ください。プレビュー画面で確認してくださいね。
これがAddquicktagプラグインを使わない場合のやり方なのですが、<span>タグを毎回記入するのはちょっとめんどうですよね。そこでボタン一つでこの<span>タグを呼び出せるようにする便利ツールがAddquicktagプラグインというわけです。
2-2．Addquicktagプラグインをインストールしよう
ということで、Addquicktagプラグインのインストールからやってみましょう。（うちのクライアントさんは私のほうで設定しますのでここは飛ばしていただいて大丈夫です。）
ブログ管理画面から「プラグイン」→「新規追加」をクリック。「プラグインの検索」欄に「addquicktag」と入力してEnterキーを押します。
すると「Addquicktag」プラグインがヒットしますので、「今すぐインストール」をクリックし、「有効化」をクリックします。
これでインストールは終了です。プラグインのインストール方法は基本的に全部一緒なので、ここでは画像は省略させていただきました。上記の手順通りやっていただければ大丈夫かと思いますが、うまくいかないようでしたらコメントでご質問ください。
2-3．Addquicktagに太字のCSSを登録しよう
では、さきほどの太字のタグをAddquicktagに登録してみましょう。（ここもうちのクライアントさんのブログは私のほうで設定します。もちろんご自身でやってみたい方は試してみてください。）
「設定」→「Addquicktag」をクリックします。
ボタン名は自由でいいのですが、ここでは「太字（CSS）」と入れました。そして、「開始タグ」に「<span class=”bold”>」、「終了タグ」に「</span>」と入力したら一番右のチェックボックスを「オン」にして「変更を保存」をクリックします。
これでAddquicktagに太字のCSSを呼び出すタグを登録できました。
2-4．Addquicktagに登録した太字を記事編集画面で呼び出してみよう
ここまでくればあとは簡単です。記事編集画面で太字にしたい文字をドラッグして選択し、ツールバーの「Quicktags」をクリックする。
そして、表示されたメニューからさきほど登録した「太字（CSS）」をクリックします。
これで選択した文字が太字になりました。
こういったタグは毎回記入するのはめんどうですし、ミスをする可能性もありますからね。Addquicktagはぜひ使えるようにしておきましょう。
3．まとめ
Addquicktagプラグインの使い方はいかがでしたでしょうか？
この記事では太字のCSSを簡単に呼び出せるようにするための設定方法をご紹介しましたが、他のショートコードやタグも同じ方法で登録することが可能です。
頻繁に使うコードはどんどん登録をして、作業効率アップにお役立てください。
また、前回の記事でも解説したように、Wordpressに標準で用意されている太字（B）ボタンはSEO的には多用厳禁です。この記事で紹介しているCSSを使った太字でしたら、その点を気にせずお使いいただけますので、ぜひご活用いただければと思います。
