IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

      2016/08/01  あとで読む   はてブする

WorePress

WordPressの投稿画面で「B」を押すと、<b>タグでは無く<strong>タグで記入されます。

wordpress画面

<strong>タグというのは強力なのでSEO的には良いのですが、多用するとあまり良くありません。記事中1~2回の使用にとどめておくのがオススメです。でも文字を太くして目立たせたい箇所は2箇所以上あったりするのが普通。ということで、もう一つ、Bタグを作っておくことをオススメします。

ここからが本題です。そのBタグのように多用するタグや定型文って、できるだけ簡単に表示させたいですよね。それができるのがWordPressプラグイン「AddQuicktag」なのです。詳しく紹介します。

スポンサーリンク

僕はWordPressのテーマ「Stinger3」を使用しています。そのスタイルシート(Style.css)に以下のタグがあります。

これが、上で紹介した太い黒字<b>タグと、太い赤色<b>の赤色です。どちらもよく使用するのでCSSに追加されています。

WordPressにおすすめのプラグイン~STINGER3を更に強力に~(STINGER3公式サイト)

 

Bボタン(<strong>タグ) > huto(<b>タグ)

これをAddQuicktagに追加してみます。Stinger以外の方はスタイルシート(Style.css)に上の「太字・赤い太字」を追加してください。(「外観」→「スタイルシート(Style.css)」)

 

プラグイン「AddQuicktag」で良く使うタグや定型文を挿入する

1. まずはプラグインのインストールから。「プラグイン」→「新規追加」→「検索」→「addquicktag」と入力し、検索ボタンを押します。

プラグインのインストール

 

2. 「AddQuicktag」を確認し、「今すぐインストール」をクリック。

addquicktagインストール手順

 

3. [設定]→[AddQuicktag]をクリックします。

addquicktag3

 

4. ここから上の太字赤い太字のタグを追加します。「Button Label and ラベル名」に表示させてたいボタンを記入します。ここでは「hutoやaka」と記入しました。わかりやすい文字を使いましょう。

Start Tag(s) 」には「<span class=”huto”>」、「終了タグ」には「</span>」と記入します。そして「Access key and 順番」には順番を、ここでは1・2と表記し、最後に[変更を保存]してください(下図参照)。以上で設定が完了です。

 

AddQuicktag設定手順

 

5. 設定が完了したので、これで使ってみます。wordpressの投稿画面右下に「Quciktags」というのがあります。ここをクリック。

AddQuicktagを使ってみる

 

すると先ほど登録したタグ「huto」と「aka」が表示されています。文字をドラッグした状態でhutoにすると太字が、akaにすると赤い太字が表示されます。

AddQuicktagを使ってみる

ただし、残念ながら投稿画面上ではわかりません。「ビジュアル」から「テキスト」で見ると確かに表記されています(下図参照)。

AddQuicktag使ってみた
↑「テキスト」で見ると表記されています。

 

AddQuicktagを使ってみた
↑プレビューで表示されていることも確認しましょう。

 

スポンサーリンク

最後に

AddQuicktagで良く使うタグを簡単挿入する設定をご紹介しました。動画の方がわかりやすかったかもしれませんね…;;

<b>と<strong>は、SEOからも使い分けが重要。どちらも簡単に表記させたいのでWPプラグイン「AddQuicktag」必須です。

これは色々と使えますよ。例えば先日の「蛍光ペン風にテキスト上をマーカーするCSSを設定してみた」という記事のタグも入れておけば、これも簡単にマーカー表示されます。

また、記事中に引用文では無いけど、<blockquote>タグのように文字を囲みたい時がありますよね。そういうのも設定しておけば使えます。ぜひお試してください。

【関連】WorPressプラグイン「Broken Link Checker」の使い方

【関連】[WordPress]moreタグにAdsenseを追加できるプラグインAdMoreが素晴らしい!

【関連】「All in one SEO pack」でTwitterカードを簡単に設定する方法

【関連】WPプラグイン「Akismet」の設定方法、APIキーの取得

【関連】ホームページHTML<p>と<br>の違いは応用例から理解しよう

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress , , ,

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像 …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

WorePress
[WordPress]テキストリンクの色を変更→クリックされやすくなるらしい

リンクの文字の色を変えるとクリックされやすくなるそうです。僕はWordPress …

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

stinger3
WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法

本日Stinger2からStinger3に変更しました。その関係でStinger …

WordPress
[WordPress]fluctやnendの広告が表示されない時は、JavaScriptプラグインをチェック!

別サイトで何ヶ月も前にスマホ広告のnend(ネンド)の申込をしました。すぐに許可 …

WordPress
WPプラグイン「Akismet」の設定方法、APIキーの取得

新しいサイトを立ち上げるたびに必要なのがWordPressのプラグイン「Akis …

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …

WordPress
「All in one SEO pack」でTwitterカードを簡単に設定する方法

WordPress(ワードプレス)のプラグイン「All in one SEO p …