[`yahoo` not found]
Pocket

bdb6a4ddc6f6fca6fd52c50d82474327_sワードプレスが登場する前の時代は、サイトを構築していく上で、HTMLタグを理解することは、必要不可欠でした。
でも、ワードプレスのテキストエディターは、記事投稿画面にHTMLタグを自動的に入力してくれるボタンがあるので、専門的なHTMLタグを全部覚えて、手入力しなくても済むようになりました。

これにより、初心者でも圧倒的に作業効率を上げ、
高度なサイトを作成することが可能になりました。

とは言っても、基本的なHTMLタグは知っていた方が便利です。
ここでは、HTMLの基本的なタグを解説します。

太文字タグ

ワードプレスのテキストエディターの記事投稿画面だと、
赤枠のように太文字にしたい部分を選択し「/b」ボタンを押すと、
太文字に変換されます。

bandicam-2016-09-08-23-05-41-093

以下のように文字が太くなります。
太文字

タグを記述すると以下の様になります。
<strong>太文字タグ</strong>

改行タグ


</br>は、改行をしてくれるタグです。
改行タグ</br>については、以下のページで詳しく記載しています。
画像を貼り付けると文章の改行が崩れる場合の改善方法

引用タグ


他の記事を引用した時に、この記事はコピペじゃないということを
クローラーに認識させるためのタグです。

SEO対策上も、引用記事には引用タグを使った方が、
オリジナル記事と引用をクローラーに区別させるために良いとされます。

~この部分は引用です


実際に記述すると以下の様になります。
<blockquote>~この部分は引用です</blockquote>

また、改行しない短文の場合は、
<Q>引用</Q>
のようなタグを使います。

他にも以下のようなタグもあります。
<p>この部分は引用です</p>

リンクの入れ方


リンクのボタンを押すと以下の画面が出ます。

bandicam-2016-09-08-21-26-59-527

赤枠にリンクしたいページのURLとページのタイトルを入力し、
「リンクの追加」をクリックします。

bandicam-2016-09-08-21-27-19-419

下記のようにリンクを貼り付けることが出来ます。
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
Contact Form 7を使ったお問い合わせフォームの作り方

記事投稿画面では以下のようにタグが記載されます。

bandicam-2016-09-08-21-37-37-835

また、外部リンクの場合は、「リンクを新しいタブで開く」に
チェックを入れると、外部リンクらしくなります。

bandicam-2016-09-08-21-28-37-803

下記のように外部リンクを貼り付けることが出来ます。
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
グーグルウェブマスターツール

記事投稿画面上は下記のようにタグが記載されます。

bandicam-2016-09-08-21-45-09-513

下記がリンク先を別ウィンドウで開くタグです。
「 target=”_blank”」

記述の時は、頭に半角分のスペースを開ける必要があります。

検索エンジンのクローラーにリンクをたどらせないタグ

通常は検索エンジンのクローラーはリンク先をたどってしまいます。
下記のタグを使うことにより、
「 rel=”nofollow”」
クローラーが、そのリンク先に訪問しなくなります。

実際に記述すると下記のようになります。
<a href=”https://www.google.com/webmasters/tools/home” rel=”nofollow”>グーグルウェブマスターツール</a>

HTMLタグをwebサイト上に表示させる方法


因みに、HTMLタグをワードプレスのテキストエディターの記事投稿画面に
記述しても、インターネットブラウザにタグと認識されるので、
画面上に表示されなくなります。

タグで使用する特殊な文字、記号は、以下のように記述します。

bandicam-2016-09-08-22-25-36-781




このようになります。

ショートコードなどを入力するとき、
[]を重ねて書くと表示されるようになります。

[[○○○~○○]]のように[]を重ねて書くと
以下のようにショートコードが表示されるようになります。

[contact-form-7 id="3658" title="お問い合わせフォーム"]
また、ショートコードで[html][/html]を
[[html]]と[]を2つ重ねて書けば、表示されます。

今回は、このように基本的なタグの解説をさせていただきました。

[`yahoo` not found]
Pocket