IT便利帳

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

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

      2017/03/07  あとで読む   はてブする

WorePress

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

wordpress画面

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

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

スポンサーリンク

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

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

http://stinger3.com/wordpress/wordpress-plugin/

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

  関連記事

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

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

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

WPプラグイン「Limit Login Attempts Reloaded」インストール画面
Widget logic teamから通知!WPプラグインLimit Login Attempts Reloadedの設定

先日、僕のWordpressのログイン後の画面にメッセージがやってきました。上が …

stinger3
[Stinger3]小見出しのデザインを変更する方法 - スタイルシート(CSS)

どうも、リョータ(@itbenricho)です。Stinger2からStinge …

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

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

Wordpressプラグイン
WorPressプラグイン「Broken Link Checker」の使い方

WordPressプラグインに「Broken Link Checker」というの …

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

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

HTMLの使い方。とを両方使った例
ホームページHTML<p>と<br>の違いは応用例から理解しよう

僕がホームページを作り始めたのが1998年、丁度「Windows 98 2nd …

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

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

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …