ブログ記事における文字の装飾は、読者に飽きさせず読んでもらう効果があります。
私も各段落には一つくらいは重要な文章に黄色下線を引いて、それらをつなぎ合わせて「まとめ」を作成するようにしています。
しかし自分で記事を見直したときに黄色下線だけではインパクトが足りないと感じ、太字の装飾を合わせることにしました。
そこで直面した問題は、思いどおりに指定した文字が太字で装飾がされていないということでした。
場合によっては、途中まで太字で途中から太字が解除されている文章までありました。
例えば、こんな感じです。
今日は天気が良い。
Web上で調べたのですが該当するホームページが見当たらず、自分で解決しましたので、その方法について紹介します。
黄色下線の付け方
文章に対して黄色下線を引くにはいくつかのタグがありますが、ここでは<em class=”yellow-under”>を紹介します。
例えば、「今日は天気が良い。」という文章に対して黄色下線を引く場合は以下のようにテキストを作成します。
<em class="yellow-under">今日は天気が良い。</em>
これをプレビューで確認すると
今日は天気が良い。
と表示されています。
これはとても便利だと思いましたが、いつもビジュアルモードで記事を作成しているので、黄色下線の時だけテキストモードに切り替えるのは面倒に思っていました。
AddQuicktagによる簡便化
そこで利用したのがプラグインAddQuickTagです。
AddQuicktagに毎回使うタグを登録しておけば、いつでもエディターから装飾することが可能になります。
[WordPress]-[プラグイン]-[新規追加]から”addquicktag”で検索すれば、すぐに出てきますのでインストールしましょう。
以下はAddQuicktagの設定画面です。
「ボタンのラベル~」と「開始タグ~」の空欄が並んでいますので、以下のように入力します。
赤枠で囲んだところに入力します。
ボタン名：黄色下線 ※適当な名前で良いです。
開始タグ：<em class=”yellow-under”>
終了タグ：</em>
あとは適用する投稿の種類を右側のチェックボックスから選択することができます。
一番右の㋹にチェックを入れることで、すべての種類を選択しました。
上図のようにすべての種類を選択したら「変更を保存」を押します。
以上でAddQuicktagの設定は完了です。
AddQuicktagのエディターでの表示
早速、[投稿]-[新規追加]で黄色下線を試してみます。
エディターにはAddQuicktagに関する表示がありません。
テキストモードには「黄色下線」のタグがありました。
上図のとおりテキストモードでは黄色下線のタグが表示されるものの、ビジュアルモードでは表示されませんでした。
Web上で調べてみましたが原因が分からず、思いついたのがブラウザによる問題です。
WordPressに限らずWeb上で動かすソフトウェアではよくあることを思い出しました。
うまく表示されなかったのはFirefoxです。
個人的には好きなのですが、こういった問題が起こりやすいブラいざと言えます。
そこでGoogle Chromeで確認してみました。
Google ChromeではQuicktagsが表示されました。
AddQuicktagを利用するにはGoogle Chromeを使うべきかもしれません。
FirefoxでQuicktagsを表示させる方法
しかし懲りずにFirefoxでばかり執筆をしていたのですが、たまにFirefoxでもQuicktagsが表示される時がありました。
調べてみたところ、以下の方法で表示されるようになることが分かりました。
- 新規投稿の場合はテキストモードで「下書き保存」ボタン、既存記事の編集の場合はテキストモードで「更新」ボタンを押す。
- ビジュアルモードを選択する。
以上、とても簡単です。
ビジュアルモードで「下書き保存」や「更新」ボタンを押してもQuicktagsが表示されることはありませんでした。
あくまでもテキストモードでの操作が必要です。
太字装飾でさらに強調する方法
黄色下線だけでも文章を強調できますが、さらに強調したいので太字にしたいと思います。
通常の黄色下線はこのような表示されます。
ちなみに黄色下線を入れると、エディターでは”I”の斜体スタイルがアクティブになっています。
方法としては強調個所を選択した状態でエディターの”B”ボタンで強調させてみます。
Bボタンを押しても太字になっていません。
エディターでは”B”がアクティブになっていますが、プレビューでは太字になっていませんでした。
理由を調べるためテキストモードで確認したところ、以下のようになっていました。
<strong><em class="yellow-under">今日は天気が良い。</em></strong>
黄色下線の<em class>タグを”B”の<strong>タグが挟み込んでいました。
以下のように順番を入れ替えてみます。
<em class="yellow-under"><strong>今日は天気が良い。</strong></em>
すると以下のように太字にすることができました。
太字黄色下線をAddQuicktagへ追加登録しました。
タグの順番を入れ替えることによって、文章を太字に装飾し、黄色下線を入れることができました。
しかし、毎回この作業をするのは面倒です。
太字と黄色下線の両方を登録する
AddQuicktagに登録すれば一度で作業が済みますので、以下のように追加登録してみました。
太字黄色下線をAddQuicktagへ追加登録しました。
方法は先ほどの黄色下線の時と同じです。
今度もボタン名、開始タグ、終了タグを入力し、すべての記事に対して適用するようにチェックを入れて「変更を保存」ボタンを押すだけです。
入力は以下のとおり。
ボタン名：太字黄色下線 ※適当な名前で良いです。
開始タグ：<em class=”yellow-under”><strong>
終了タグ：</strong></em>
太字黄色下線のタグが追加登録されました。
これで太字と黄色下線の両方を一度に変更することができるようになりました。
黄色下線箇所を太字にする際の注意
すでに黄色下線を入れている箇所に対して、太字装飾する場合には注意が必要です。
黄色下線を入れてある場合、テキストモードでは以下のようになっています。
<em class="yellow-under">今日は天気が良い。</em>
そこに”B”ボタンで太字装飾を入れると以下のようになります。
<strong><em class="yellow-under">今日は天気が良い。</em></strong>
もうお分かりだと思いますが、<strong>タグが<em>タグの外側に位置しています。
先ほどと同じ理由で太字装飾はされず、黄色下線が入ったままで太字にはなりません。
では太字黄色下線のQuicktagを適用するとどうでしょうか。
結果としては、思いどおり文章が太字に装飾されたうえで黄色下線が引かれます。
ただしテキストを確認すると、以下のような複雑なタグの入り方になっているのが分かります。
<em class="yellow-under"><em class="yellow-under"><strong>今日は天気が良い。</strong></em></em>
装飾としては機能しますし、この文章の分だけなら、それほど気にならないかもしれません。
しかし、記事に問題が生じてテキストを確認することになった場合、このような文字列がたくさん並んでいたら問題の原因を探る作業も進まなくなります。
よって黄色下線が入った文章を選択したうえで、アクティブになっている”I”ボタンを押して、黄色下線を解除します。
そのうえで太字黄色下線のQuicktagを適用すれば、必要なタグだけが正しい順番に入るようになります。
まとめ
- 黄色下線のようにエディターに存在しない装飾はAddQuicktagへ登録すると楽である
- AddQuicktagはFirefoxで利用するにはひと手間必要であるが、Google Chromeでは問題ない
- 黄色下線に太字装飾を追加する場合、<strong>タグの方が内側に位置する必要がある
最近のコメント