「WordPresはHTMLが分からなくてもWebサイトが作れる!」といいますが、

それはある意味で正解ですが、全く分からなければ必ず困る場面に遭遇します。

そこで、これだけは押さえておきたい。HTML(タグ記述)の基礎を学習します。

WordPressでサイトを作っていくとHTMLというファイルの存在を意識することなくできてしまうのですが、パソコンやスマートフォンのブラウザは、サイトから来るHTMLファイルを受け取って表示しています。(WordPressは動的にHTMLファイルを生成:ここではとりあえず動的の意味を理解してなくてもOK、そうなんだと思っておいて下さい。)

なのでWordPresで作成する固定ページや投稿ページはHTMLのルールに則った書き方になっています。

ここではWordPresが自動でやってくれるところはすべて省いて、WordPressのページ作成に必要なルールだけを解説します。

知らないと駄目なタグの記述ルール3種類

1.まずはタイトル、段落、見出しの記述です。

<title>タグの学習</title>  ←タイトルの記述に使われているTitleタグ

<p>段落</p>         ←段落の記述に使われているPタグ

<h1>見出し1</h1>      ←見出しの記述に使われているHタグ
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

このようにタグは基本、最初と最後を表す<>と</>で挟んで表記します。

そして、見出しはh1から大きい順です。ユーザーがgoogleなどで検索した場合その検索ワードに応じて、タイトルや見出しからインデックスしてくるともいわれていますのでSEO対策上も重要になります。

実際の表示はこんな感じ↓

見出し2

見出し3

見出し4

見出し5
見出し6

しかし、<hr>のような最初も終わりもない、一つだけのタグもあります。
<hr>横線 (horizontal水平線の意味)
<br>改行 段落内で改行するときにつかう。

<strong>太字になる</strong>   ←ビジュアル編集のBを選択した場合につくタグ

<em>斜体になる</em>    ←ビジュアル編集のIを選択した場合につくタグ

2.リストタグ

<ul style=”list-style-type: square;”>  ←箇条書きがここから始まる意味ulタグ
<li>ABCDEF</li>        ←箇条書き1行を記述するためのliタグ
<li>ABCDEF</li>
<li>ABCDEF</li>
</ul>                     ←箇条がきここまで

↑リストのスタイルに■を選んでいるのでlist-style-type: squareと記述、記述なしだと●になる。

<ol>             ←連番を振って箇条書きの場合olタグ
<li>ABCDEF</li>
<li>ABCDEF</li>
<li>ABCDEF</li>
<li>ABCDEF</li>
</ol>

ビジュアル編集でリストを何度か変更していると、このタグがぐちゃぐちゃになりやすい。そのときこれを理解していればTEXTで修正可能となる。

次はリンクをつける時に使用するタグ

<a href=”https://ja.wordpress.org/”>ワードプレス</a>

これはワードプレスという文字にリンクをつけた例 aタグで囲みhref=””でリンクを記述する。

hrefはhypertext referenceの略、aタグとセットで用いるので、「アンカータグのエイチレフ」と呼ばれる)

リンク付けが可能なのは

  • 他のサイトのページや同一サイト内の他ページ
  • 同一ページ内の特定箇所 ランディングページやペラサイトなどで使う
  • メールやFTP、スクリプトなどにもリンク可能

アフィリエイトなどを貼り付けた場合このタグが使われているので確認しよう。

※リンクの記述には絶対パスと相対パスということの理解が必要になるがここでの説明は省略する

【簡単に強化】セキュリティー対策