Travelogue(トラベローグ)

Travelogue

AddQuicktagプラグインを使って記事本文にスタイルを適用させるときの手順(初心者向け)

初心者の方向けに、AddQuicktagを使って記事本文にスタイルを適用させる手順を解説します。

  • AddQuicktagプラグインをインストール済み
  • AddQuicktag管理画面の設定も完了済み
  • CSS側の指定も完了済み

という前提で、本文の入力時の手順のみを初心者の方向けに解説します。
AddQuicktagプラグインのインストールや設定については、以前に書いた以下のエントリーを参考にしてください。

入力時は必ず「ビジュアル」か「テキスト」のタブを確認

本文欄を入力するときは必ずボックス右上のタブを確認しましょう。
通常は「ビジュアル」「テキスト」のふたつのタブがあります。
※WordPressの古いバージョンでは「テキスト」ではなく「HTML」というタブだったこともありますが、名前が違うだけで内容は同じです。

「ビジュアル」か「テキスト」のタブを確認

どちらのタブを選択しているのかにより、以下の作業で使うボタンの位置も変わります。

「テキスト」タブで作業している場合

「テキスト」タブの場合、設定済みのボタンが表示されています。
スタイルを適用したい文章を選択して反転させた状態にしておき、該当のボタンを押します。

「テキスト」タブで作業している場合

すると、文章の最初と最後にHTMLタグが追加されたことと思います。
このHTMLタグはあらかじめ設定しておいたスタイル定義です。

文章の最初と最後にHTMLタグが追加された

これだけでスタイルは適用されていますのでプレビューして確認してみてください。

「ビジュアル」タブで作業している場合

「ビジュアル」タブの場合、「Quicktags」というプルダウンが表示されています。
スタイルを適用したい文章を選択して反転させた状態にしておき、プルダウンで適用させたいスタイルを選びます。

「ビジュアル」タブで作業している場合

このとき、このボックス上では何も変化はないかもしれませんが、スタイルは適用されていますのでプレビューを押して確認してみてください。

「ビジュアル」タブで作業している場合

前述の通り「テキスト」タブでは最初と最後にHTMLタグが追加されたのが分かりやすいのですが、「ビジュアル」タブではHTMLコードが表示されないのでわかりにくいかもしれません。

HTMLが分からない人でも、WordPressを使うなら覚えておくと役立つかもしれないHTMLの大原則

「ビジュアル」タブで記事本文に太字や文字色などを設定するとき、裏側(「テキスト」タブ)ではそれに対応したHTMLコードを付与しています。
この入力欄で複数のスタイルをごちゃ混ぜにして適用させることももちろん可能なのですが、どうしてもコードがごちゃごちゃになって不要なコードが残ってしまったりすることがあるようです。

「テキスト」タブを見れば不要なコードが残っているかどうかは分かるのですが、HTMLが分からない人には当然意味不明ですよね。
そんなとき、HTMLの大原則として、以下のふたつだけ頭の片隅に入れておくと役に立つかもしれません。

  • HTMLのほとんどのタグは、開始タグと閉じタグがセットになっている。
    例えばdivというタグの場合、開始タグが<div>で、閉じタグは</div>です。
    例えばstrongというタグの場合、開始タグが<strong>で、閉じタグは</strong>です。
    ※例外もあります。例えば画像を表す<img>というタグは閉じタグがありません。
  • 複数のタグを使うときは、正しく入れ子構造にする。
    正しい例:<div><strong>テキスト</strong></div>
    間違い例:<div><strong>テキスト</div></strong>
    divの後にstrongが始まったなら、先にstrongを閉じてからdivを閉じる。
Pagetop