htmltag-top2

WordPress初心者がまず覚えておきたいHTMLタグ10選+おまけ

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


こんにちは!や~べ~です。

今回は、WordPress初心者がまず覚えておきたいHTMLタグ10選+おまけということで書いて行きたいと思います。

いくら導入が簡単なWordPressと言っても、Webサイトの一種なので記事を思ったように書くためには、HTMLの知識が多少必要になります。

HTMLの書式に則って記事を書くことによって、狙い通りの整ったWebサイトができると思いますし、SEO的にも有利になります。

※SEO有利≒検索順位上昇≒アクセスアップ

 
でも、あれやこれやと一気にたくさん覚えるのは大変だと思うので、自分の経験をもとに「最初に覚えておくと便利だろうな~」と思うHMTLタグ10選を書き出していきたいと思います。

 

スポンサーリンク

WordPress初心者がまず覚えておきたいHTMLタグ10選

まずは、HTMLタグについて簡単に説明させてください。

 

HTMLタグとは?

<●●>ここに文字などを記入したもの</●●>

↑のようなものをHTMLタグと呼びます。

●●にはアルファベットが入ります。

<●●>を開始タグと呼び、</●●>を終了タグと呼びます。

Webサイトは基本的に、このHTMLタグを並べて表現しています。

ブラウザがこのHTMLタグを色々と変換してくれて、いつも見るWebサイトの表示になっています。

※実際タグを使う時には<>は半角で記述します。

 
それでは、覚えておきたいHTMLタグ10選を書き出していきます。

 

1.pタグ

 
<p></p>

 
このタグで囲まれた文字は、段らくとしてひとまとめになります。

段落間には余白が挿入されます。

 
使用例↓

「コード」

 
「実際の表示」

↓こんな感じで

↑余白が挿入されます

 
参考サイト:pタグの意味と使い方

 

2.aタグ

 
<a></a>

 
リンクを挿入する時に使います。

 
使用例↓

「コード」

 
「実際の表示」

さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」のリンク

 

3.strongタグ

 
<strong></strong>

 
検索アルゴリズムに対して、キーワードを強調する場合に使います。あまり乱用するとSEO的に良くないので、1記事に5か所くらいまでにしておきましょう!

閲覧者に対して強調したい場合は、この後の「spanタグ」で説明するような方法で単語や文を大文字にする方法をオススメします。

 
WordPressのデフォルトでは、strongタグを使うと太文字表示されてしまう場合が多いと思うのですが、検索アルゴリズムに対しての強調として使う場合、それだと閲覧者にとって読みにくい記事になってしまう可能性があります。

ですので、テーマのstyle.cssなどを編集してstrongタグの太文字表示をキャンセルしておくことをオススメします。

 
「コード」

 

4.hタグ

 
<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

 
見出しに使うタグでSEOにおいて最も重要なタグです。

検索アルゴリズムにとって記事の構造を理解する為の重要な目印になります。

ですので、検索アルゴリズムに記事の構造を正確に伝える為に、正確な使用をする必要があります。

h1~h6まであるのですが、順番に階層を崩さないようにして使う必要があります。

 
使用例↓

<h1>大見出し。h1は1記事に1つにする</h1>

<h2>中見出し1</h2>

<h3>小見出し1-1</h3>

<h3>小見出し1-2</h3>

<h2>中見出し2</h2>

<h3>小見出し2-1</h3>

<h3>小見出し2-2</h3>

 
※実際タグを使う時には<>は半角で記述します。

 
「実際の表示」

こちらのページに表示させてます。

 
title(<title></title>)タグも非常に重要ですが、大抵のWordPressテーマでは、タイトル=titleタグ=h1タグになっています。

ですので、記事内ではh2~h6までを主に使うことになります。
(titleタグ、h1タグは意識して使う必要は無いと思います)

使用しているテーマでどう出力されているか、一度、ディベロッパーツールなどでWebページのソースを確認してみると良いと思います。

↓ディベロッパーツールについてはこちらの記事を参考にしてみてください

参考記事:サイトの中身が丸分かり!超便利なクロームデベロッパーツールの使い方|みなラボ

 

5.spanタグ

 
<span></span>

 
単語や文を装飾する際に使います。

 
<span style=”●●”>文章を書く</span>

などと、記述すると文字のフォントや太さ、背景色などを個別に設定することができます。

 
spanタグには前後に改行が入らないので、文字や単語の装飾に向いています。

段落などの広い範囲を装飾する場合は、次に説明するdivタグを使用してみてください。

 
使用例↓太文字にしてみます。

「コード」

 
「実際の表示」

太字にする

 

6.divタグ

 
<div></div>

 
段落などの広い範囲を装飾する際に使います。

 
<div style=”●●”>

<p>コンテンツ1</p>

<p>コンテンツ2</p>

</div>

などと、記述すると段落内の文字のフォントや太さ、背景色、枠線などを個別に設定することができます。

divタグには前後に改行が入ります。

 
使用例↓点線で段落を囲んでみます。

「コード」

 
「実際の表示」

コンテンツ1

コンテンツ2

 

7.moreタグ

 
<!–more–>

 
このタグは開始タグ、終了タグはありません。

挿入した場所より下のコンテンツが非表示になり、moreタグ自体は「→続きを読む」という表示に変わります。

トップページなどの記事一覧を表示している時に、記事の書き出しだけ表示させておきたいという場合などに使われます。

 
「コード」

 

8.hrタグ

 
<hr />

 
水平線を挿入するタグです。

このhrタグも開始タグ、終了タグはありません。

挿入した場所に、水平線が表示されます。

文章の区切りなどに使って問題ありません。

 
使用例↓

「コード」

 
「実際の表示」

コンテンツ1


コンテンツ2

 

9.scriptタグ

 
<script></script>

 
このタグを使うと、JavaScriptなどを使用できます。

※WordPressで良く使われる「jQuery」もこのscriptタグを用いて使用します。

 
「コード」

 
参考サイト:Chrono Drive

 

10.PHPタグ

 
<?php  開始タグ

?>    終了タグ

 
ブラウザは開始タグと終了タグの間をPHPとして認識し、それ以外はHTMLと認識します。

使用例はこの後の「HTML内へのコメントの入れ方」を参考にしてください。

 
参考サイト:PHPを始める前に知りたい、基本的な文法といくつかのタグ

 

スポンサーリンク

HTML内へのコメントの入れ方

.phpファイルなどを編集する際のコメントの入れ方

 
<?php
/*コメント */
?>

<!– コメント –>
↑ファンクション.phpには使えない

 
↑この二通りの記述方法があります。

 
使用例↓

「コード」

 
「実際の表示」


 
↑コメントなのでブラウザ上には何も表示されません。

 

スポンサーリンク

HTMLタグで空白を創ろう!

 
 

 
↑このタグを使います。

このタグは開始タグ、終了タグはありません。

空白を挿入することができます。

段落の上下の余白を少しだけ増やす時にも使えます。

 
使用例↓

「コード」

 
「実際の表示」

↓空白増えるコンテンツ1

 

↑空白増えるコンテンツ2

普通のコンテンツ1

普通のコンテンツ2

 
参考サイト:Web上で使えるスペース(空白文字)いろいろ

 

HTMLタグで改行を創ろう!

<br>タグを使います。

このタグは終了タグはありません。

 
使用例↓

「コード」

 
「実際の表示」

株式会社●●
tel:0120-12-3456
012-3456 愛知県●●市

 

おまけ

ブログ記事を書いて行く中で、写真や絵、図を使って説明する場合があると思いますが、その時、挿入する画像の拡張子を適切に選んでますか?

.jpg、.png、.gifと拡張子が違うだけで、使われる色数や圧縮の可逆性、透過の有無が異なるようです。

 
↓こちらのサイトが参考になります。

参考サイト:“知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方

 
例として自分の場合の拡張子の選択方法ですが、

実は「.jpg形式」一択です。

サイト内のメニューなどもデフォルトのもので、特に.png形式にする必要のあるものはありません。

アイキャッチで使う画像、文章内の説明で使う画像や写真、全て.jpg形式を使っています。
(ファイルサイズを極力削減したいので)

適切に選択した方が、無駄に重たいファイルを使わなくてもよいので、サイトの表示速度向上やサーバー容量節約に役立つのではないかと思います。

 

まとめ

WordPress初心者がまず覚えておきたいHTMLタグ10選+おまけということで記事を書かせていただきましたが、いかがでしたでしょうか?

WordPressでブログを書くといっても、覚えることがたくさんあって大変だと思います。

しかし、どうせ書くのなら大勢の方に読んでもらえた方が良いと思います。

なるべく検索上位に表示されやすい記事の創り方をすることが得策だと思います。

 
今回紹介したHTMLタグは、初心者の内に理解しておくべきものをピックアップしています。

特に、hタグやstrongタグなどは、記事をたくさん書いた後で修正するとなるととても骨の折れる作業になります。

(自分は40記事ぐらいの時に、全ての記事を見直しました。。。キツかった。。。)

最初はSEOなんてそんな影響あるの?なんて思うかもしれませんが、のちのち気になって色々なSEO対策することになると思うので早めに覚えおく事をオススメします。

 
その他HTMLタグについて参考にさせてもらったサイト

参考サイト1:初心者ブロガーが最初に覚えておきたいブログでよく使うHTMLタグ18選

参考サイト2:SEOに重要なタグ12個の正しい使い方

 
じゃあ、今回はここまでっ!!

ではではっ!(´∀`*)ノシ

 

おすすめのオンラインスクール

 
『TECH ACADEMY オンラインブートキャンプ』

 
TECH ACADEMY オンラインブートキャンプとは、

Webアプリケーションスキル(Ruby on Rails)、PHP、WordPressなどのWeb開発周辺スキル習得のコースを中心に、iPhoneアプリ、Androidアプリ、Unityなどのオリジナルアプリ開発コースや、WebデザインやWebマネジメント、さらにはWindows Excelのスキルを習得できるコースもラインナップされている、プログラミングをこれから始めてみようと思っている方から、エンジニアを目指している方までの幅広い方々にとって非常に心強い『プログラミング系オンラインスクール』です。

 
WordPressを使って自分のオリジナルWebサイトを構築しようとする場合、何かしらのプログラミング言語の基礎が分かっていれば、インターネットで検索した情報をフルに活用すれば、独学でもサイトを構築することは可能だと思います。

自分もこのタイプで、独学でサイトのカスタマイズを行っているのですが、現在のサイトのカタチに持っていくまでに、非常に多くの時間が掛かってしまっています。

もっと早い段階で、この『TECH ACADEMY オンラインブートキャンプ』を知っていて、受講するだけの予算が確保できていたのなら、短時間でかなりレベルの高いのスキルを習得できていたのではないかと思います。

 

 
 
 
 
 

っと、ちょっと気になるなぁと思ったそこのあなた!!

もっと詳しく内容を知りたいと思ったら、、、

 
↑『TECH ACADEMY』公式サイト上部のメニューバーに表示されている、『無料説明会』から無料説明会動画を見ることが出来ますよぉ!^^

 
受講希望のコースを選択し、

メールアドレス(GmailでもOK!^^)かSNSアカウントを入力すると、希望コースの無料説明会動画を見ることができます。

 
受講申し込みを検討する際に気になる、「受講終了時点の成果目標」「習得できるスキル」「具体的な学習方法」などの解説と、短期間で高い学習目標に到達することが可能となる裏付けについて、丁寧に説明されています。

『無料説明会』のページには、カリキュラムの詳細も紹介されています。

その他『説明会動画特典』として、受講料が割引になる特典も準備されてるようですよ♪^^

 

 
 
 
 
 

気になるんだけど、少し試してみないと分からないよなぁ~なんて思ってるあなたには、、、

 
『一週間のブートキャンプ無料体験』もありますよっ♪

 

 
ぜひ体験してみて下さいね♪(*^▽^*)

 
 
 
 
 

 

おすすめのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪



 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

この記事を読んでいる人はこちらの記事も読んでいます。(※広告も含む。)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です