今回は主にHTMLタグのよくある間違いと修正方法についてまとめます。普段、ビジュアルエディターで執筆をしていていて、改行や文字の並びがうまく調整できない場合にご覧ください。

 

HTMLって何?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための基本的な言語のひとつです。

TABIPPO.NETのトップも記事にも、HTMLが使われています。ビジュアルエディターは、HTMLの入力を簡略しています。

そのため、ビジュアルエディターの内容がプレビュー画面に反映されない…なんで!?という時は、テキストエディターでHTMLタグを修正すると修正することができます。

 

TABIPPOで覚えておくべきHTMLタグ

普段の執筆で使用するHTMLのタグをご紹介します。

h2,h3タグ(見出しタグ)

見出しタグとは、ユーザーと検索エンジンの双方にページ内のコンテンツ構成を正しく伝えるために使用するタグです。下記のように記述します。ビジュアルエディター上では、段落→見出し2,3を選ぶことで反映されます。

<h2>h2タグ</h2>
<h3>h3タグ</h3>

 

h3はh2の中にさらに小見出しを作るときに使用するタグですので、通常の執筆の場合は見出しごとにh2を設定していただければ大丈夫です。見出しタグの設定については下記をご覧ください。

見出しの「付け方」「取り消し方」

 

詳細情報を設定するタグ

ツールバーにある「Quicktags」から「詳細情報」を入力すると、詳細情報の項目を自動的に挿入することができます。その際に、HTMLは下記のように記述されています。

<div class=”info_tmp”>■詳細情報
・名称:
・住所:
・アクセス:○○市営バス:バス停「○○」下車徒歩約○分 /JR○○駅から徒歩○分
・営業時間:
・定休日:
・電話番号:
・料金:
・所要時間:
・オススメの時期:
・公式サイトURL:</div>

<div…>と</div>に囲まれた部分の背景が灰色になり、四角で囲まれます。

空行を設定するタグ

TABIPPO.NETはwordpressというシステムを使用しています。HTMLの基本においては、<br/>を使うと空行を設定できるのですが、wordpressでは<br/>を2回以上連続して使用すると自動的に1つに短縮されてしまいます。

そのため、見出し2の上に空行を入れたいときは下記のタグを挿入します。

&nbsp;

&nbsp;は「改行させない半角スペース」を意味し、このタグを入れることでその部分では改行されなくなります。

 

WordやEvernoteに下書きした文章は不要なHTMLタグを表示する可能性があります

ここで1つ注意ですが、執筆画面に記入する文字をWordやEvernoteからそのままコピー&ペーストした場合、不要なHTMLタグを引っ張ってきてしまう場合があります。

この場合、テキストエディターを見ていただければ<div>などのタグが文字を囲んでいるはずです。それらを削除するか、コピー&ペーストの際に値貼り付けをしてください。値貼り付けの方法は下記になります。

Mac:command + shift + v
Win(※):右クリックして、形式を選択して貼り付け→値を選択
※うろ覚えなので、間違っていたらすみません

 

改行ができない

うまく改行が反映されていない場合は、テキストエディターに切り替えて改行ができない部分のテキストを確認してください。余分なタグが入っていた場合はそれらを削除し、ビジュアルエディターから改行してください。

空行を入れたい場合は、上記に紹介した &nbsp; を使ってください。

 

詳細情報の範囲がおかしい

<div class=”info_tmp”>~</div>が正しい範囲を囲っているかテキストエディターで確認してください。</div>の位置が間違っているケースが多いです。

 

見出しの線がおかしなところにある

<h2>~</h2>の位置をテキストエディターで確認してください。

RANKINGカテゴリーランキング

FEATURED特集

特集一覧へ

EVENTイベント情報

GOODS旅に出たくなる商品