IT便利帳

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

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

      2017/11/10  あとで読む   はてブする

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>の違いは応用例から理解しよう

スポンサーリンク

 - WordPress, WPプラグイン , ,

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

Twitter でIT便利帳を

  関連記事

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

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

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

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

WPプラグイン「VA Social Buzz」を表示した様子
バイラルメディア風のSNSボタンはWPプラグイン「VA Social Buzz」で簡単設定

バイラルメディア風のSNSボタンというのがあります。上の写真がそれで、個別記事の …

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

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

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

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

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

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

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

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

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

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

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

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