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に追加されています。

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

  関連記事

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

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

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

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

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

GTmetrix
GTmetrixのSpecify image dimensions改善方法

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

WordPress
[WordPress]URLにカテゴリーを入れるパーマリンクと日本語を英語にするスラッグ設定

先日WordpressでURL内にカテゴリーを入れるディレクトリー型構造の設定を …

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

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

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

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

WorePress
[WordPress]記事内の画像リンクを全部まとめて外す方法

WordPressにはデフォルトで、画像をリンクする設定になっています。スマホで …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

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

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