HTML基礎

ブログ記事を執筆するには、
最低限のWebライティングスキルが必要になります。


しかし、Webライティングが他の文章と異なる点は

「HTMLタグを利用して文字装飾する必要がある」

という点だと思います。


ただ文章を書くだけでなく、

  • 太文字にしたり文字色を変えて強調したい言葉
  • 箇条書きに並べて見やすくしたい項目
  • 画像も合わせて示したい内容
  • 他のページへのリンク

など、

Webページそのものの見やすさ

ということを意識する必要があるため、
どうしてもHTMLの知識が必要になってきます。


これはWebライティングスキル以前の知識であると同時に、
多くの人がはじめは分からない点でもあるでしょう。


そこでこのコンテンツでは、
Webライティングをする上で必要最低限のHTMLタグをピックアップして
紹介したいと思います。


ここで紹介するHTMLタグ以外にも様々なものがありますが、
Webライティングをする上で

「とりあえず知っとけば大丈夫」

というものだけを紹介しています。


もしあなたが初めてWebライティングする際は
このページを見ながら記事を書いてみてください。



HTMLタグ 目次




HTMLタグ 解説

<a>タグ

タグで囲んだ文字や画像にリンクを貼ります。

リンクの貼り付けはもっとも使用するHTMLタグのひとつです。

<a>タグの中に<img>タグを入れることで、
画像にリンクを貼ることもできます。

新しいウィンドウやタブで開くための属性
「target=”_blank”」
はアフィリエイトリンクなど、
自分のブログ以外へリンクするときに使用してください。

  • 属性
    • href=”リンク先のURL”
    • リンク先のURLを指定します。

    • target=”フレーム名”
    • リンク先の内容をどのウィンドウ(フレーム)に表示するかを指定します。
      色々な種類がありますが、
      target=”_blank”」(新しいウィンドウまたはタブで開く)
      さえ覚えておけば充分です。

  • 使い方
  • 本ブログのトップページは<a href=”http://yuyanet.net” target=”_blank”>こちら</a>です。

  • サンプル
  • 本ブログのトップページはこちらです。



↑目次に戻る



<b>タグ

タグで囲んだ文字を太字にします。

強調させることはできず、見た目を太くするだけです。

意味合い的にも強調したい場合は<strong>タグを使用してください。

  • 使い方
  • <b>ここが太字になる。</b>ここは通常文字。

  • サンプル
  • ここが太字になる。ここは通常文字。



↑目次に戻る



<del>タグ

タグで囲んだ文字が削除されたことを示し、取り消し線を引きます。

同じような効果をもつタグとして、「<s>タグ」「<strike>タグ」がありますが、
現在の環境での使用は非推奨とされています。

なるべく「<del>タグ」を使用するようにしてください。

  • 使い方
  • <del>通常価格:10,000円</del> → 期間限定特別価格:7,980円

  • サンプル
  • 通常価格:10,000円 → 期間限定特別価格:7,980円



↑目次に戻る



<h1> ~ <h6>タグ

タグで囲んだ文字を見出しとして表示します。

<h1>タグが最上位(大見出し)で、
以下数字が小さくなるにつれて下位(小見出し)となっていきますが、
WordPressは下図に入力している文字を自動的に<h1>タグとして扱います。

あなたが実際に使用するのは<h2> ~ <h6>タグとしてください。

h1タグ

<h○>タグで囲まれた文字、
特に<h1>タグはGoogleなどの検索エンジンが非常に重要視する文字となります。

<h○>タグしだいで検索順位が決まると言っても過言ではありませんので、
よく考えて設定してください。

なお、<h○>タグで囲まれた文字はフォントが大きくなったり、
WordPressのテンプレートによっては背景画像がついたりします。

しかし上記の通り検索結果に影響しますので、
単純に見栄えだけを目的に<h○>タグを使用しないようにしてください。

  • 使い方
  • <h2>見出し2</h2>
    <h3>見出し3</h3>
    <h4>見出し4</h4>

  • サンプル
  • 見出し2

    見出し3

    見出し4



↑目次に戻る



<img>タグ

画像を表示します。

<img>タグを<a>タグで囲むことで、画像にリンクを貼ることも可能です。

  • 属性
    • src=”画像ファイルのURLまたはパス”
    • 表示する画像ファイルのURLやパスを指定します。

    • alt=”画像の説明”
    • 万が一画像が表示できない場合の代替テキストを指定します。

      alt属性はGoogleのSEO対策ガイドラインで必須とされているので、
      必ず設定するようにしてください。

      その他にもalt属性に指定したテキストは読み上げソフトで
      音声になったりすることもあります。

    • title=”画像のタイトル”
    • 画像のタイトルを指定します。

      下図のように画像にマウスオンすると
      ツールチップでタイトルが表示されるようになります。

      imgタグ title属性

      alt属性とは違い、必須ではありません。

      場合によってはツールチップ表示が邪魔になることがありますので、
      状況に応じて使い分けてください。

  • 使い方
  • <img src=”http://yuyanet.net/img/profile01.jpg” alt=”ゆうやのプロフィール” title=”ゆうやのプロフィール画像” />

  • サンプル
  • ゆうやのプロフィール



↑目次に戻る



<mark>タグ

タグで囲んだ文字の背景色を黄色にマークします。

背景色がつくことで、<b>タグや<strong>タグよりも
見た目が派手で目立つようになります。

太字にする以上に強調したいときに使ってください。

  • 使い方
  • <mark>ここの背景が黄色になる。</mark>ここは通常文字。

  • サンプル
  • ここの背景が黄色になる。ここは通常文字。



↑目次に戻る



<ol>タグ

番号付きの箇条書きリストを作成します。

<ol>タグの中に、箇条書きにしたい文字を<li>タグで囲んで使用します。

同じような効果をもつタグとして<ul>タグがありますが、
<ul>タグは番号無しの箇条書きとなります。

  • 属性
    • type=”箇条書きタイプ”
    • 箇条書きの番号タイプを指定します。

      type属性を省略、または「type=”1″」とすると箇条書きが
      1 → 2 → 3 → …
      と数字で繰り上がります。

      「type=”a”」とすると箇条書きが
      a → b → c → …
      と小文字英字で繰り上がるようになります。

      「type=”A”」とすると箇条書きが
      A → B → C → …
      と大文字英字で繰り上がるようになります。

      「type=”i”」とすると箇条書きが
      i → ii → iii → …
      と小文字ローマ数字で繰り上がるようになります。

      「type=”I”」とすると箇条書きが
      I → II → III → …
      と大文字ローマ数字で繰り上がるようになります。

    • start=”開始番号”
    • 箇条書きの開始番号を指定します。

      省略時は1から開始します。

  • 使い方
  • <ol>
    <li>数字ひとつめ</li>
    <li>数字ふたつめ</li>
    ふたつめの説明・・・
    <li>数字みっつめ</li>
    </ol>
    <ol type=”a” start=”2″>
    <li>小文字英字ひとつめ</li>
    <li>小文字英字ふたつめ</li>
    <li>小文字英字みっつめ</li>
    </ol>
  • サンプル
    1. 数字ひとつめ
    2. 数字ふたつめ
    3. ふたつめの説明・・・

    4. 数字みっつめ
    1. 小文字英字ひとつめ
    2. 小文字英字ふたつめ
    3. 小文字英字みっつめ



↑目次に戻る



<span>タグ

<span>タグ単体では何の意味もありませんが、
style属性を使用することでタグ内にスタイルを適用することができます。

  • style属性
  • 任意のスタイルを記述します。

    ここでは比較的よく使うスタイルを紹介します。

    複数のスタイルを同時に使用したい場合は下のサンプルのように
    「;(セミコロン)」
    で繋げます。

    • color:”文字色名またはRGB値”
    • 文字の色を指定します。

      文字色名で設定する場合は
      【red】【yellow】【darkgreen】
      などの英語を使用します。

      RGB値とは、赤(R)と緑(G)と青(B)の3色をそれぞれどれだけの分量で
      混ぜ合わせるかを16進数で表現する値のことです。

      16進数を使用するときは「#RRBBGG」と、
      最初に「#」をつけて赤緑青の順番でそれぞれ2桁の16進数を並べます。

      色についてはこちらのページに非常に詳しく載っています。

    • background-color:”文字色名またはRGB値”
    • 文字の背景色を指定します。

      色の指定方法は上述の文字色と同じです。

      ちなみに、「background-color=”yellow”」は<mark>タグと
      同じ見た目になります。

    • font-size:”数値”
    • 文字サイズを指定します。

      数値の後ろにはpx(ピクセル)などの単位をつけますが、
      pxを覚えれば十分です。

  • 使い方
  • <span style=”color:royalblue”>文字色:ロイヤルブルー</span>
    <span style=”color:#ffb6c1″>文字色:ライトピンク</span>
    <span style=”color:#ffffff; background-color:#000000; font-size:20px”>文字色:白、背景色:黒、フォントサイズ:20px</span>
  • サンプル
  • 文字色:ロイヤルブルー
    文字色:ライトピンク
    文字色:白、背景色:黒、フォントサイズ:20px



↑目次に戻る



<strong>タグ

タグで囲んだ文字を太字にし意味を強調します。

同じく太字にするタグとして<b>タグがありますが、
<strong>には【意味を強調する】という効果もあります。

<b>タグには意味を強調するという効果はありません。

つまり、GoogleやYahoo!といった検索エンジンに
【自分はここをより強く主張したい】
ということが伝わるようになるため、
そのキーワードで検索上位表示されやすくなります。

ただし、多数の<strong>タグを使用してしまうと、
いったいどこを強調すればよいのかが不明瞭となり、
逆に検索結果に反映されにくくなるようです。

<strong>タグを使う場合は適度に、
あなたが本当に強調して伝えたいキーワードに使用するようにしましょう。

  • 使い方
  • <strong>ここが強調される。</strong>ここは通常文字。

  • サンプル
  • ここが強調される。ここは通常文字。



↑目次に戻る



<u>タグ

タグで囲んだ文字に下線を引きます。

  • 使い方
  • <u>ここに下線が引かれる。</u>ここは通常文字。

  • サンプル
  • ここに下線が引かれる。ここは通常文字。



↑目次に戻る



<ul>タグ

番号無しの箇条書きリストを作成します。

<ul>タグの中に、箇条書きにしたい文字を<li>タグで囲んで使用します。

同じような効果をもつタグとして<ol>タグがありますが、
<ol>タグは番号付きの箇条書きとなります。

  • 属性
    • type=”箇条書きタイプ”
    • 箇条書きの記号タイプを指定します。(省略可能)

      「type=”disc”」とすると黒丸●に、
      「type=”circle”」とすると白丸○に、
      「type=”square”」とすると黒四角■になります。

  • 使い方
  • <ul>
    <li>黒丸ひとつめ</li>
    <li>黒丸ふたつめ</li>
    黒丸ふたつめの説明・・・
    <li>黒丸みっつめ</li>
    </ul>
    <ul type=”circle”>
    <li>白丸ひとつめ</li>
    <li>白丸ふたつめ</li>
    <li>白丸みっつめ</li>
    </ul>
    <ul type=”square”>
    <li>黒四角ひとつめ</li>
    <li>黒四角ふたつめ</li>
    <li>黒四角みっつめ</li>
    </ul>
  • サンプル
    • 黒丸ひとつめ
    • 黒丸ふたつめ
    • 黒丸ふたつめの説明・・・

    • 黒丸みっつめ
    • 白丸ひとつめ
    • 白丸ふたつめ
    • 白丸みっつめ
    • 黒四角ひとつめ
    • 黒四角ふたつめ
    • 黒四角みっつめ



↑目次に戻る



無料メールマガジン

私のアフィリエイトノウハウを無料公開中です。

年収5億円コピーライターとのセールスレター共作や
コンサルで培ったコピーライティングスキルを筆頭に、
アフィリエイトで稼ぐための情報を無料発信しています。

いつでも購読解除できますので、まずはお試しでも結構です。
お気軽にご登録ください。

> メールマガジン登録はこちら

このページの先頭へ