WordPressのHTMLタグ徹底解説！クイックタグの活用方法も紹介

こんにちは。ライターのmuramatsuです。

WordPressで記事を書く時に、ビジュアルエディタとテキストエディタのどちらを使っていますか？

HTMLが分からない方は、ビジュアルエディタを使っているのではないでしょうか？

でもちょっと待ってください！

実はある程度のHTMLの知識があるだけで、テキストエディタを使いこなすことが出来てしまいます。

ちょっと見づらい部分はありますが、テキストエディタを使う方が断然早く簡単に記事が書けますよ。

今回はテキストエディタを使って編集ができるように

• HTMLタグとは
• WordPress上でのHTMLタグ
• WordPressに設定されているHTMLタグ
• 覚えておくと便利なHTMLタグ

を紹介してHTMLの知識をつけていただき、更に便利にテキストエディタを使うための

• プラグインでクイックボタンを追加・削除する方法
• 手動でクイックタグボタンを追加・削除する方法

を解説していきます。

おまけで

• HTMLコードをそのまま記事に表示する方法

の説明もしていきます。

HTMLタグを使いこなして、どんどん記事を書いていきましょう！

HTMLタグとは

HTMLタグは、私達が見ているWebサイトの画面を作るために使われているHTMLの言語のことです。

HTMLタグは「<」と「>」の山カッコで囲まれており、カッコの間に来る文字は

文字を太くする <strong>
画像を表示する <img>
リンクを貼り付ける <a href>
表を作る <table>
見出しを作る <h>

などたくさんの意味を持つ種類があり、これらをタグと言います。

タグは始まりのタグ「< >」と終わりのタグ「</ >」があり、これで囲むことによりタグの意味にあった表示をしてくれます。

HTMLに関しての詳しい解説は以下の記事を参考にしてください。

WordPress上でのHTML

WordPressでは、ビジュアルエディタでツールバーを使いながら記事を書くと、テキストエディタ上では自動的にHTMLに変換されて表示されます。

実際にビジュアルエディタでタイトルを見出し3、テキストを箇条書きや斜体、太文字にした内容の記事を作成します。

テキストエディタを開くと以下のように表示されます。

それぞれの文字がHTMLタグで囲まれているのが分かりますね。

HTMLに慣れていないと、ビジュアルエディタを使った方が実際に反映される画面を見ながら編集ができるので、分かりやすいと思うかもしれません。

がしかし！

今後、見出しや文字などのデザイン・フォントをカスタマイズしていくと、ビジュアルエディタに反映されない、ということも出て来てしまいます。

一方、テキストエディタではタグで囲った通りに表示されます。

またテキストエディタにはHTMLタグのツールバー(クイックタグ)があります。

よく使うHTMLタグをクイックタグに登録してしまえば、とっても簡単に楽してテキストエディタが使えるようになります。

このクイックタグとは、テキストエディタ上にあるツールバーのボタンのことで、HTMLを入力しなくても1クリックで文字をタグで囲ってくれます。

あまりビジュアルエディタに頼りすぎず、今からテキストエディタに慣れておくと、作業効率が上がりますよ。

WordPressに設定されているHTMLタグ

まず、すでにWordPressのテキストエディタに設定されているクイックタグ(HTMLタグ)を紹介して、どのようにクイックタグを使うのかを紹介しましょう。

デフォルトで設定されているタグ

WordPressではすでにクイックタグに登録されているHTMLタグがあるので、まずはそこからマスターしていきましょう。

左端にあるクイックタグから順に解説していきます。

「b」

「b」は文字を太くする<strong>タグとなります。
文字を強調したい時に用いられます。

「i」

「i」は文字を斜体にする<em>タグとなります。
文字を強調したい時に用いられますが、太文字よりかは強調は弱くなります。

「link」

「link」はリンクを文字に貼り付ける(持たせる)<a>タグとなります。

リンクを貼り付けたい文字を選択してクイックタグのボタンをクリックすると、以下のような画面が表示されます。

URLのところにリンクを貼り、新しいタブでリンクを開かせたい場合はリンクを新しいタブで開くにチェックを入れます。

「b-quote」

「b-quote」は引用を意味する<blockquote>タグとなります。

他からのテキストなどを引用するときに使います。

「del」

「del」は文字に取り消し線を入れる<del>タグとなります。

過去に書いたテキストを変更したいけど、残しておきたい場合に取り消し線を用いたりします。

「ins」

「ins」は後から追加したテキストであることを表示する<ins>タグとなります。

記事に追加でテキストを加えた場合に、後から加えた文ということを示してくれます。
表示方法はハイライトがついたり、下線が引かれたりと、設定やWordPressのテーマによって異なります。

「img」

「img」は画像を挿入する<img>タグです。

画像を表示したい場所でクイックタグボタンを押します。
画像のURLを入力し、OKを押します。

その後、画像の説明(タイトル)を入力してOKを押すと画像が挿入されます。

ただ画像を挿入したい場合は、編集画面左上にあるメディアを追加を利用した方が分かりやすいです。
画像アップロードについては以下の記事を参考にしてください。

「ul」

「ul」は番号のついていない箇条書きを表示する<ul>タグとなります。
<ul>タグは箇条書きを表す<li>タグと一緒に使われます。

• 箇条書き例
• 箇条書き例
• 箇条書き例

「ol」

「ol」は番号のついた箇条書きを表示する<ol>タグとなります。
<oll>タグは箇条書きを表す<li>タグと一緒に使われます。

1. 番号箇条書き例
2. 番号箇条書き例
3. 番号箇条書き例

「li」

「li」は箇条書きを意味する<li>タグとなります。
<il>タグは<ul>または<ol>タグと一緒に使われます。

「code」

「code」はソースコードを示す<code>タグとなります。

PHPやJava、Pythonなどのコンピューター言語の解説などで、サンプルコードを書く際などに使われます。

「more」

「more」は「続きを読む」を表示してくれる<!–more–>タグとなります。
これはWordPress独自のタグなので注意しましょう。

トップページやアーカイブなどに表示されている記事は、全ての本文も表示されるようになっています。

記事一覧では全ての本文を表示する必要はないので、<!–more–>タグを使って続きを読むを表示し、本文の一部のみを表示するように設定できます。

クイックタグの使い方

クイックタグを使うときは、タグで囲みたいテキストの先頭にカーソルを持ってきて、適当なクイックタグボタンを1クリックし、開始タグを挿入します。

テキストの1番最後にカーソルを持っていき、先ほどと同じクイックタグボタンをクリックするか「タグを閉じる」ボタンをクリックし、終了タグを挿入します。

または、タグで囲みたいテキスト全てを選択し、適当はクイックタグボタンをクリックすると、開始タグ・終了タグが一度に挿入されます。

箇条書きのタグを挿入したテキストエディタのプレビューを見てみましょう。

テキストエディタ

プレビュー画面

箇条書きがしっかりと挿入されているのが分かりますね。

覚えておくと便利なHTMLタグ

次に記事を書く際によく使われているHTMLタグの紹介です。
WordPressのクイックタグには登録されていないので手入力が必要になりますが、覚えておくと役に立ちますよ。

<h>タグ

使用例：

表示画面：

<h>タグは見出しに使われるタグで、<h1>〜<h6>までの種類があり、基本的に<h1>が1番大きな見出しとなり、<h2>が次に大きな見出し、<h6>が1番小さな見出しとなります。

ただWordPressのテーマによっては、タグの大きさが異なる場合があるので、一概にも全てが違う大きさの見出しということでは無いようです。

基本的には、ブログや記事では<h2>〜<h4>タグが使われることが多くあります。

<p>と<br>タグ

使用例：

<p>タグは段落を意味するタグで、<br>は改行をする時に使われるタグです。

WordPressでの改行について、以下の記事で<br>タグと<p>タグの説明を詳しくしているので、是非参考にしてください。

<span>タグ

使用例：

表示画面：

<span>タグで囲った部分を1グループとして表示デザインを変更するスタイルシートを適用してくれるようにします。

インライン要素と呼ばれる、文章の一部分として扱われ表示される要素なので、囲んだ文字の色やフォントを変えたりするのに使われます。

<div>タグ

使用例：

表示画面：

<div>タグは<span>タグと似ていますが、範囲が段落やリストなどの<span>タグよりも広い範囲を1グループとしてスタイルシートを適用できるようにします。

ブロックレベル要素と呼ばれる、文の枠組みとなる部分を1つの固まりとして扱い表示する要素で、枠で囲ったり、選択範囲のテキストを真ん中に表示したりするのに使われます。

文の枠組みとは、例えば見出しやまとまった文章の段落、リストなどがあります。

<u>タグ

使用例：

表示画面：

<u>タグは文字に下線を引くときに使うタグです。

<hr/>タグ

使用例：

表示画面：

<hr/>タグは段落の切れ目や、文章と文章の切れ目にライン(水平線)を入れることができます。

クイックタグボタンを追加・削除する方法

よく使うHTMLタグを覚えたのはいいのですが、毎回手入力するのは面倒ですよね。

そこでもっと早く簡単に使えるように、テキストエディタのクイックタグボタンを増やしていきましょう。

プラグインを使って追加・削除する方法と、手動で追加・削除する方法を紹介していきます。

よく使うボタンを追加し、使わないボタンを非表示にして整理することで、効率アップしますよ。

プラグインで追加・削除する

プラグインAddQuicktagを使って、ボタンを作成・追加して行きます。

https://ja.wordpress.org/plugins/addquicktag/

WordPressのダッシュボードからプラグイン＞新規追加を選択します。
右上の検索でAddQuicktagを入力し検索して出てきたAddQuicktagのプラグインをインストールします。

インストールしたら有効化ボタンを押します。

追加方法

ダッシュボードから設定＞AddQuicktagを選択しクイックタグの追加と削除ページを開きます。

追加したいボタンを作成していきます。
今回は文字をピンクにするクイックタグボタンを作ります。

ボタン名に分かりやすい名前を入力します。

開始タグには文字をピンクにする<span style=”color: pink;”>をコピー&ペーストします。
終了タグには</span>をコピー&ペーストします。

右側の「ビジュアルエディター」や「post」「page」などはクイックタグをどこで表示したいかになります。

ここではテキストエディタだけにするのでpostにチェックを入れ、変更を保存ボタンを押します。

テキストエディタを確認してみます。

テキストエディタのツールにピンクのボタンが表示されましたね。

削除(非表示)方法

追加したボタンを削除する場合は、先ほどの入力した内容を全て空にして変更を保存ボタンを押すと削除されます。

すでにテキストエディタにあるデフォルトのクイックタグを削除する場合は、再度AddQuicktagの設定ページを開きます。

ダッシュボードから設定＞AddQuicktagを選択します。
「クイックタグの追加と削除」の下にあるデフォルトのクイックタグを非表示にするに移ります。

テキストエディタ上のボタンを非表示にする場合postにチェックを入れ変更を保存ボタンを押します。

プラグインを使うととても簡単にボタンの追加・削除ができましたね。

手動で作成・削除する

次に、プラグインを入れたくないという方に手動でボタンを追加・削除する方法を紹介します。

追加方法

追加するコードをfunctions.phpフォルダに書き込みます。
書き込みをする前に必ずバックアップをとってから行なってくださいね。

ダッシュボードの外観＞テーマの編集を選択します。
右側のテーマファイルからテーマのための関数(functions.php)を選択肢開きます。

オレンジの太文字、水色の太文字、オレンジ枠、水色枠、水平線、h2、h3、h4のクイックタグを追加します。

ここではfunctions.phpの1番下にコードを入力します。

function twentyfifteen_add_quicktags() { 
?>
<script type="text/javascript">
QTags.addButton('orange','オレンジ太文字','<span style="color: orange;font-weight:bold;">','</span>');
QTags.addButton('lightblue','水色太文字','<span style="color: lightblue;font-weight:bold;">','</span>');
QTags.addButton('div1','オレンジ枠','<div style="padding: 10px 15px 10px 15px; margin-bottom: 15px; border: 2px solid orange;">','</div>n');
QTags.addButton('div2','水色枠','<div style="padding: 10px 15px 10px 15px; margin-bottom: 15px; border: 2px solid lightblue;">','</div>n');
QTags.addButton('hr','horizon','<hr/>','n');
QTags.addButton('h2','h2','<h2>','</h2>n');
QTags.addButton('h3','h3','<h3>','</h3>n');
QTags.addButton('h4','h4','<h4>','</h4>n');
</script>
<?php
}
add_action('admin_print_footer_scripts','twentyfifteen_add_quicktags');

コード1行目のfunction twentyfifteen_add_quicktags()では、今回WordPressのテーマTwentyFifteenを使っているので、その名前を入れていますが、独自のテーマ名を入れてもいいですし、入れなくても問題ありません。

ボタンを追加するfunctionの名前の部分になるので、分かりやすい名前をつけましょう。

4行目〜11行目のQTags.addButtonのカッコ内は(‘ID’, ‘ボタンのタイトル’, ‘開始タグ’, ‘終了タグ’);の順に指定します。

nはPHPでの改行を意味するコードとなります。

タグの前後に改行を入れたい場合はn<タグ>nと書きます。
前後どちらかの場合は改行を入れたいタグの前後どちらかにnを書きます。

6・7行目の枠を作成する場合、padding: 10px 15px 10px 15px; margin-bottom: 15px; border: 2px solidは好みの枠内・枠外の範囲の大きさ、線の太さ、線の種類に変えることが可能です。

function後の名前を変更した場合は、最後の行のadd_actionのカッコ内’twentyfifteen_add_quicktags’も同じ名前に変更してください。

違う名前を指定してしまうと、エラーになってちゃんと実行されなくなってしまいます。

入力した順番に、テキストエディタ内の左側からボタンが表示されるようになります。

入力完了後はファイルを更新ボタンを押して保存します。

以下のようにボタンが追加されました。

プラグインがなくても結構簡単に追加することができます。

削除(非表示)方法

追加したボタンを削除する場合は、先ほどのコードを削除するとボタンも削除されます。

もし残しておきたいけど表示させたくない場合は、非表示したいボタンのQTags.addButtonの先頭に二重スラッシュと半角スペース「// 」を入力し、変更を保存ボタンを押してください。

するとボタンは表示されなくなります。

デフォルトにあるボタンを削除する場合は、追加した時と同じようにfunctions.phpのフォルダにコードを書き込みます。
必ずバックアップをとってから変更をするようにしてくださいね。

function show_quicktags($qtInit) {
$qtInit['buttons'] = 'strong,link,block,del,ins,img,ul,ol,li,code,more,dfw';
return $qtInit;
}
add_filter('quicktags_settings', 'show_quicktags');

1行目functionのshow_quicktagsは名前の部分になるので、hide_quicktagsでも何でも分かりやすいようにつけましょう。
ここでは表示するコードを指定しているので、show_quicktagsにしました。

2行目の‘strong,link,block,del,ins,img,ul,ol,li,code,more’;ではイコール後、表示したいボタンのIDを入力します。
ここでは、斜体文字にするemとタグを閉じるcloseを非表示にしています。

ファイルを更新ボタンを押して保存します。

以下のようにボタンが追加されました。

「i」ボタンと「タグを閉じる」ボタンがなくなりましたね。

【おまけ】HTMLコードをそのまま表示する

WordPressでHTMLコードをそのまま表示しようとしてもHTMLタグと認識されてしまい、タグ(コード)を表示することができないのを知っていますか？

この記事で紹介していた、HTMLタグの<h2>や<strong>タグを表示していますが、見たままWordPress上に入力してしまうと、見出しや太文字に自動変換されテキストでタグを表示してくれません。

なので、以下の表にあるようにHTMLコードの場合は山カッコ「< >」、ショートコードの場合は角カッコ「[ ]」の部分を変更して対応します。

記号	エスケープ文字	使用例
<	&lt;	<?php = &lt;?php
>	&gt;	?> = ?&gt;
[	&#91;	[toc] = &#91;toc&#93;
]	&#93;

これはHTMLコードやショートコードは特殊文字になるので、文字の一部をエスケープ文字に変えないといけないのです。

エスケープ文字とは自動的に変換されてしまう文字を、変換されないように回避する文字のことです。

HTMLでは山カッコ「< >」、ショートコードの場合は角カッコ「[ ]」の部分がエスケープ文字ということになりますね。

なお、ショートコードの場合は角カッコを二重にする[[ ]]と表示される場合もあったり、&#91;や&#93;でも表示されず、&#091;、&#093;とゼロを入れると表示される場合もあります。

&lt;や&#91;などのエスケープ文字自体をそのまま表示したい場合は「&」の部分を「&amp;」にすると表示されます。

うまく表示されなかったら、色々と試してみてくださいね。

WEBサイト製作スキルで自由に働きたい方は

この記事をご覧の方の中には、HTMLやCSSなどを習得した先に、そのスキルを生かしてフリーランスとして自由に働いていきたいと考えている人もいるのではないでしょうか？

HTMLは全てのWEBサイトにおいて基本となる言語ですが、それ単体を習得するよりも他の言語もセットで習得した方が圧倒的に仕事を獲得しやすくなります。

HTMLやCSSだけの案件は価格帯が低い

もちろん、HTMLやCSSだけをコーディングする仕事もあるのですが、やはりそれ単体だと仕事獲得という面ではなかなか厳しかったりもします。というのも、HTMLの案件自体は多いのですが、3〜5万ほどの低単価帯が多い為、数をこなさないとあまりお金にはなりずらいのです。

また、大手アウトソーシングサイトのクラウドワークスでHTML、CSS案件を調べてみると…

XHTMLやCSS2.1だけでなく最新技術を学んでおく必要があります。
JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。
HTML・CSSコーディングを基本としながら、Webに関連する様々なプログラミング言語を習得しておく姿勢が重要になるでしょう。

引用元：クラウドワークス（一部抜粋）

といった記述もあります。つまりHTML単体の案件は意外と少なかったりするんですね。なので、やはり他のプログラミング言語もセットで書けると仕事獲得のしやすさはもちろん、案件単価もグッと上がります。

例えばWordPressをカスタマイズするならPHPという言語を覚えると良いでしょう。WEBサイトに動きをつけるならJavaScriptがおすすめです。他にもHTMLとセットで覚えると良いおすすめプログラミング言語はたくさんありますよ。

詳しく知りたい人はプログラミング言語無料診断をお使いください。1分ほどであなたにオススメの言語を診断してくれます。

挫折せずにスキルを身につけたいなら

セットでスキルを身に付けることをオススメしましたが、HTMLのようなマークアップ言語と比べて、PHPやJavaScriptのようないわゆるプログラミング言語は習得難易度が一気に上がります。

独学だと挫折してしまう可能性がかなり高かったりします。なので、挫折せずにプログラミングスキルを身につけたい方は、プログラミングスクールの利用を検討してみると良いでしょう。

弊社侍エンジニアでは、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンしています。なので、挫折する事なく最短で理想のスキルを身に付ける事ができます。

また、フリーランスとしての独立サポートもしているので、フリーランスエンジニアを目指している人にもぴったりです。興味がある人は、まずは無料カウンセリングを受講してみてください。

入会する、しないに関わらず、弊社随一のコンサルタントがあなたの理想をヒアリングした上でぴったりの学習プランを提供させて頂きます。下記のボタンより1分ほどで予約が可能となっているので、まずはお気軽にご相談ください。オンラインでの利用も可能です。

無料カウンセリングの
予約はこちら

まとめ

いかがでしたか？

主要なHTMLタグを覚えて、クイックタグを作ることで断然効率よく記事を書くことができるようになります。

記事を書いていくうちに、必要なタグ、あまり使わないタグが出てくるので、その度に追加・削除していきましょう。

またエスケープ文字もたまに使うことがあるので、必要があればこの記事を思い出してください！