HTMLの基礎を分かりやすく解説！WordPressでよく使われるタグまとめ

WordPressで、文章を書くことに慣れてきたら装飾をしてみましょう。

HTMLというシステム言語を使うことで、

「うーん、ここはかなり驚くことだから文字の色を変えてみたい…」

「ここは大きな文字で目立たせたいな！」

と感じる部分に対して、より魅力的に仕上げることが出来ます。

 

「え…？パソコン言語ってなんか難しそう…」と思いますよね。

実は、WordPressに標準でついているものを使うだけでも、Wordのようにカンタンに装飾することが出来るんです。

もちろん、ビジュアルエディタでもボタン一つで装飾できます。

今回は、よく使われる装飾方法を少し見てみましょう！

もしよく使うコードがあれば、プラグイン「AddQuicktag」を使ってショートコード登録することをオススメします。

関連記事：【プラグイン】AddQuicktagの設定方法を解説！使いやすいコードも紹介

そもそもHTMLってなんだ？

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略。

Webページを作成するためのMarkup（マークアップ）言語となります。

HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。

現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

引用：HTML クイックリファレンス http://www.htmq.com/htmlkihon/001.shtml

今、こうやって見ていただいているページも、ベースはHTMLという文字で作られています。

文字にMarkup（印つけ）することで、コンピュータが理解できるようになり、画面に表示される。

HTMLは、コンピュータと私たちの翻訳機みたいな役割を持っているのです。

HTMLはタグを使って装飾する

では、どうやってコンピュータに分かるように翻訳するのか？

「プログラミングってやつ？…難しそう」

と思うかもしれませんが、実際は文字にタグを当てはめるだけで使えるものです。

カンタンに言うと、テキスト部分にふせんを貼って「この文章はこうやって表示してね！」とメモしておくイメージです。

それをコンピュータが読んで、「分かったよ！」と理解しお仕事する感じ。

めちゃくちゃ専門的な知識がいるワケでもないので、初心者でも比較的カンタンに使いこなせるようになるものです。

また、プログラミングの基礎知識となるものなので、HTMLを覚えておくだけでも今後サイトデザインなどの勉強への広がりを持つきっかけになりますよ。

WordPressでよく使われるHTML

WordPressは、いくつかHTMLがボタン一つで使えるようになっています。

そして文章を書いていく上で、初心者の方がよく利用するのがこちらのビジュアルエディタでしょう。

まずは、この画面にあるボタンや装飾方法について解説していきたいと思います。

そして、ビジュアルエディタには表示されませんが、実際にどのようなタグでマークされているのかも併せてご紹介しますね。

①段落・見出し設定

基本的に、編集画面に入力した文字は「段落」として表示されます。

「見出し」として扱いたい場合には、こちらから設定します。

▼部分を押すと見出しの種類が選べます。

ちなみに、「見出し１」は、タイトルに使うサイズなので本文中で使うことはありません。

実際、どのように表示されるのかというと…

表示の仕方については、別のところでデザインを組み込んでいるので、必ずしも上記のように表示されるワケではありません。

そして、実際に使われているタグは以下のとおり。

たいていのサイトは、見出しを使ってコンテンツをまとめていくので覚えておくといいですね。

とはいえ、見出し５まで使うことはほとんどありませんし、あまりにも小見出し（見出し３以降）を増やすと見づらくなってしまうので注意が必要です。

②太文字

太文字のタグはこんな感じ。

表示されるとこんな感じになります。

太文字

③イタリック（斜め文字）

文字を斜めに表示します。

＜em＞というタグで囲みます。

※テンプレートやデバイスによっては、イタリック文字にできないことがあります。

イタリック（ななめ文字）

④引用符

別のサイトや書籍などから、情報を引用した際に使うことの多いタグです。

実際のページでは、引用符で文字が囲まれた状態になります。

このタグで指定すると…

引用するとこのように表示されます。

といった感じですね。

引用符の後すぐに文章を入れると、それも引用タグの中に含まれてしまいます。

２段改行することで引用部分を終えることが出来ますので、引用の後に文章を続けたい場合には少し注意してくださいね。

⑤番号なしリスト・⑥番号つきリスト

いくつか項目のある文章をリストとして箇条書きにします。

⑤の番号なしリストには、

• デフォルト
• 白丸
• 黒丸
• 四角

があります。（上記は「デフォルト」を使ってみました）

タグは、こんな感じ…

<ul>というのが番号なしリストを表し、</li>は箇条書きを示しています。

なので、２つのタグがくっついている状態ですね。

そして、⑥番号つきリストは

1. デフォルト
2. ラテン文字小文字
3. ギリシャ文字小文字
4. ローマ数字小文字
5. ラテン文字大文字
6. ローマ数字大文字

の６種類が使えます。（こちらもデフォルトを使ってみました）

タグの<li>（箇条書き）は同じですが、番号つきリストは<ol>のタグを使っています。

いかがでしょうか？

どちらも、自分で中点（・）や数字をつけて箇条書きするよりも、全体がまとまってくれますよね。

サイト設定によりますが、見やすさがアップすると思います。

そしてリストタグも、引用タグ同様に２度改行しない限りリスト表示が続いていくので気をつけましょう。

⑦文字の位置調整

左寄せ、中央揃え、右寄せのできるボタンです。

左寄せ

中央揃え

右寄せ

ちょっと並べると見づらいですかね…（汗）

デフォルト状態であれば、基本的に左寄せなのでよほど使うことはありませんが…

タグはこんな感じです。

⑧リンクの追加・削除

文字列にリンクを貼りたいときに使います。

よく”〇〇はこちら”と書いてあって、「こちら」の部分がクリックできるようになっているヤツです。

トップページはこちら

ビジュアルエディタでは、文字列を選択して鎖マークを押すと、URLを入力するだけでリンクを貼れます。

しかし実際には、タグの中できちんと「ここのURLに飛ぶようにしてね！」という指示をしているんですよ。

ちなみに貼ってあるリンクを削除したいときは、「リンクの削除」ボタンでリンクタグを消すことができます。

⑩フォント設定

フォントを変えることのできるタグです。

デフォルトでもいくつか入っていますが、日本語フォントは少ないので追加するサイト運営者さんもいます。

他のフォントはこんな感じ。

Comic Sans MS

Impact

Terminal

設定にさえあれば、<span style=”font-family: フォント名”>で囲むことで様々なフォントが使えるのです。

※テンプレートやデバイスによっては、使えない・見えないものがあります。

⑪フォントサイズ

ちょっと文字を大きくしたい、という時に使います。

フォントサイズは、8pt～36ptまでありますが、タグを覚えていれば正直いくらでも大きく出来ちゃうんですよ。

フォント18のサイズ

黄色くなっている箇所がフォントサイズを表しています。

つまり、この数字を変えれば、フォントを好みのサイズに変えられるというワケです。

⑫インデント

文字の位置を調整するという意味では、少し⑦のものに近いように思いますが…

文字スタート位置を変えるのがインデントですね。（正直、よっぽど使ったことない）

これがデフォルトのスタート位置です。

「インデントを増やす」を使ってみると…

このくらいスタート位置がずれる

といった感じになります。

「中央寄せするほどじゃないけど、少し文章を目立たせたいな」ってときに使うイメージですね。

そして、タグはこちら。

この数字を変えれば、位置も自由自在ってワケです。

ちなみに「インデントを減らす」は、左に寄せることができます。

サイトの体裁によって、引用符やリストで使うかもしれませんが…基本はデフォルトの位置に戻るだけです。

⑬テキストとしてペースト

こちらは、ショートカットキーでいうところの「ctrl＋Shift＋V」の出来るボタンです。

（または、右クリックの「プレーンテキストとして貼り付ける」）

一度押すと、もう一度クリックして解除するまではテキストとして貼り付けることが可能になります。

「元の文章にリンクがついているが、そのままテキストとして表示させたい」

というときなどに使うボタンですね。

⑭書式設定をクリア

設定したHTMLや書式をクリアするボタンです。

「一つ戻る」とは違うので、選んだテキストに設定された書式がすべて消されます。

なので「太字」で「ななめ文字」を設定していた場合には、どちらも消えてしまうので、どちらか片方だけ消したい場合には使いません。

どちらか一方だけの書式を消したい場合は、

・テキストエディタにして該当のタグを消去する

・ビジュアルエディタのまま、使わない方のボタンをもう一度クリック

で消すようにしましょう。

⑮特殊文字

変換では出てこない、環境依存文字などを入力できるボタンです。

シグマ「∑」やユーロマーク「€」などは、文字変換ではなくこちらから入力するようにすると、デバイスごとの文字化けが起こりにくいと思います。

⑯続きを読む

サイトのトップページに並ぶ記事一覧。

たまに、本文の一部が書かれていて、途中から「続きを読む」と表示されているものがありますね。

この「続きを読む」を設定できるボタンです。

「ここまで表示させたいな」という文章の後にカーソルを置いて、このボタンを押すだけです。

ビジュアルエディタ上は、

このような点線が追加され、タグには

が挿入されます。

⑰フォントの色設定

フォントのサイズだけでなく、カラー変更も可能です。

▼を押すとパレットが表示されるので、そこから使いたい色を選べばOK。

青色の文字

黄色の箇所にカラーコードを入れれば、パレットにない色も設定できます。

カラーコードは、こちらで探せますよ。

WEB色見本　HTMLカラーコード

ただ、WEBサイトの注意点として、１つのページであまりたくさんの色を使ってしまうのはオススメしません。

あまりにカラフルだと、とても騒がしくて見づらいページになってしまうからです。

そのため、たとえば

• 注意・警告は赤文字
• 単なる強調は青文字

というようにルールを決め、見出しやサイトのベースカラーと調和の取れる色を選ぶようにしましょう。

オススメは、使う色を２色程度にすることです。

⑱テーブル

表を作ることができるボタンです。

最大で10列＊10行の表を作ることができ、セル幅の設定や結合もできます。

セルが結合出来るので、作り方としてはExcelに近いのですが、セル幅の変更はWordの表挿入をイメージすると扱いやすいでしょう。

⑲取り消し線

書いたテキストを、消さずに変更したいなど残しておきたい場合に使用します。

取り消し線

<del>タグで囲むことで使えます。

⑳追加テキスト

後から情報を追記した場合などに使うタグです。

WordPressのテーマによって表示方法は違いますが、ハイライトされたり下線が引かれるなどの強調がされます。

追記しました

まとめ

HTMLは、サイトのメイク道具のようなもの。

テキストを顔のパーツと見て、アイラインをひくのか、どのリップを使うのかを指示してあげるイメージです。

もちろん、見た目だけでなく「機能面のタグ」というものもありますが、まずは視認性の上がるタグを使えるようになれば十分です。

そしてWordPressは、ボタン一つでそんなタグを使える便利なシステムです。

あなたの文章がより魅力的になり、多くの方に見ていただけるよう、HTMLの装飾に少しでも興味を持ってもらえれば嬉しく思います。