こんにちは!や~べ~です。今回は、WordPress初心者がまず覚えておきたいHTMLタグ10選+おまけということで書いて行きたいと思います。導入が簡単なWordPressと言っても、Webサイトの一種なので記事を思ったように書くためには、HTMLの知識が多少必要になります。HTMLの書式に則って記事を書くことによって、狙い通りの整ったWebサイトができると思いますし、SEO的にも有利になります。アクセスアップでも、あれやこれやと一気にたくさん覚えるのは大変だと思うので、自分の経験をもとに「最初に覚えておくと便利だろうな~」と思うHMTLタグ10選を書き出していきたいと思います。スポンサーリンク目次はコチラWordPress初心者がまず覚えておきたいHTMLタグ10選HTMLタグとは?1.pタグ2.aタグ3.strongタグ4.hタグ5.spanタグ6.divタグ7.moreタグ8.hrタグ9.scriptタグ10.PHPタグHTML内へのコメントの入れ方HTMLタグで空白を創ろう!HTMLタグで改行を創ろう!おまけまとめおすすめのオンラインスクールおすすめのレンタルサーバーランキングWordPress初心者がまず覚えておきたいHTMLタグ10選まずは、HTMLタグについて簡単に説明させてください。HTMLタグとは?<●●>ここに文字などを記入したもの</●●>↑のようなものをHTMLタグと呼びます。●●にはアルファベットが入ります。<●●>を開始タグと呼び、</●●>を終了タグと呼びます。Webサイトは基本的に、このHTMLタグを並べて表現しています。ブラウザがこのHTMLタグを色々と変換してくれて、いつも見るWebサイトの表示になっています。※実際タグを使う時には<>は半角で記述します。それでは、覚えておきたいHTMLタグ10選を書き出していきます。1.pタグ<p></p>このタグで囲まれた文字は、段らくとしてひとまとめになります。段落間には余白が挿入されます。↓こんな感じで↑余白が挿入されます参考サイト:pタグの意味と使い方2.aタグ<a></a>リンクを挿入する時に使います。target="_blank">さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」のリンク</a>「実際の表示」さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」のリンク3.strongタグ<strong></strong>検索アルゴリズムに対して、キーワードを強調する場合に使います。乱用するとSEO的に良くないので、1記事に5か所くらいまでにしておきましょう!閲覧者に対して強調したい場合は、この後の「spanタグ」で説明するような方法で単語や文を大文字にする方法をオススメします。WordPressのデフォルトでは、strongタグを使うと太文字表示されてしまう場合が多いと思うのですが、検索アルゴリズムに対しての強調として使う場合、それだと閲覧者にとって読みにくい記事になってしまう可能性があります。テーマのstyle.cssなどを編集してstrongタグの太文字表示をキャンセルしておくことをオススメします。「コード」<strong></strong>1<strong></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>単語や文を装飾する際に使います。style=”●●”>文章を書く</span>などと、記述すると文字のフォントや太さ、背景色などを個別に設定することができます。spanタグには前後に改行が入らないので、文字や単語の装飾に向いています。段落などの広い範囲を装飾する場合は、次に説明するdivタグを使用してみてください。使用例↓太文字にしてみます。太字にする6.divタグ<div></div>段落などの広い範囲を装飾する際に使います。style=”●●”><p>コンテンツ1</p><p>コンテンツ2</p></div>などと、記述すると段落内の文字のフォントや太さ、背景色、枠線などを個別に設定することができます。divタグには前後に改行が入ります。使用例↓点線で段落を囲んでみます。20px;"><p>コンテンツ1</p><p>コンテンツ2</p></div>「実際の表示」コンテンツ1コンテンツ27.moreタグ<!–more–>このタグは開始タグ、終了タグはありません。挿入した場所より下のコンテンツが非表示になり、moreタグ自体は「→続きを読む」という表示に変わります。トップページなどの記事一覧を表示している時に、記事の書き出しだけ表示させておきたいという場合などに使われます。/>水平線を挿入するタグです。このhrタグも開始タグ、終了タグはありません。挿入した場所に、水平線が表示されます。文章の区切りなどに使って問題ありません。/><p>コンテンツ2</p>「実際の表示」コンテンツ1コンテンツ29.scriptタグ<script></script>このタグを使うと、JavaScriptなどを使用できます。※WordPressで良く使われる「jQuery」もこのscriptタグを用いて使用します。終了タグブラウザは開始タグと終了タグの間をPHPとして認識し、それ以外はHTMLと認識します。使用例はこの後の「HTML内へのコメントの入れ方」を参考にしてください。–>↑ファンクション.phpには使えない↑この二通りの記述方法があります。↑コメントなのでブラウザ上には何も表示されません。スポンサーリンクHTMLタグで空白を創ろう!&nbsp;↑このタグを使います。このタグは開始タグ、終了タグはありません。空白を挿入することができます。段落の上下の余白を少しだけ増やす時にも使えます。↓空白増えるコンテンツ1↑空白増えるコンテンツ2普通のコンテンツ1普通のコンテンツ2参考サイト:Web上で使えるスペース(空白文字)いろいろスポンサーリンクHTMLタグで改行を創ろう!<br>タグを使います。このタグは終了タグはありません。愛知県●●市おまけブログ記事を書いて行く中で、写真や絵、図を使って説明する場合があると思いますが、その時、挿入する画像の拡張子を適切に選んでますか?.jpg、.png、.gifと拡張子が違うだけで、使われる色数や圧縮の可逆性、透過の有無が異なるようです。↓こちらのサイトが参考になります。実は「.jpg形式」一択です。サイト内のメニューなどもデフォルトのもので、特に.png形式にする必要のあるものはありません。アイキャッチで使う画像、文章内の説明で使う画像や写真、全て.jpg形式を使っています。(ファイルサイズを極力削減したいので)適切に選択した方が、無駄に重たいファイルを使わなくてもよいので、サイトの表示速度向上やサーバー容量節約に役立つのではないかと思います。まとめWordPress初心者がまず覚えておきたいHTMLタグ10選+おまけということで記事を書かせていただきましたが、いかがでしたでしょうか?WordPressでブログを書くといっても、覚えることがたくさんあって大変だと思います。書くのなら大勢の方に読んでもらえた方が良いと思います。検索上位に表示されやすい記事の創り方をすることが得策だと思います。今回紹介したHTMLタグは、初心者の内に理解しておくべきものをピックアップしています。hタグやstrongタグなどは、記事をたくさん書いた後で修正するとなるととても骨の折れる作業になります。(自分は40記事ぐらいの時に、全ての記事を見直しました。)最初はSEOなんてそんな影響あるの?なんて思うかもしれませんが、のちのち気になって色々なSEO対策することになると思うので早めに覚えおく事をオススメします。Excelのスキルを習得できるコースもラインナップされている、プログラミングをこれから始めてみようと思っている方から、エンジニアを目指している方までの幅広い方々にとって非常に心強い『プログラミング系オンラインスクール』です。WordPressを使って自分のオリジナルWebサイトを構築しようとする場合、何かしらのプログラミング言語の基礎が分かっていれば、インターネットで検索した情報をフルに活用すれば、独学でもサイトを構築することは可能だと思います。自分もこのタイプで、独学でサイトのカスタマイズを行っているのですが、現在のサイトのカタチに持っていくまでに、非常に多くの時間が掛かってしまっています。オンラインブートキャンプ』を知っていて、受講するだけの予算が確保できていたのなら、短時間でかなりレベルの高いのスキルを習得できていたのではないかと思います。ACADEMY』公式サイト上部のメニューバーに表示されている、『無料説明会』から無料説明会動画を見ることが出来ますよぉ!^^受講希望のコースを選択し、メールアドレス(GmailでもOK!^^)かSNSアカウントを入力すると、希望コースの無料説明会動画を見ることができます。受講申し込みを検討する際に気になる、「受講終了時点の成果目標」「習得できるスキル」「具体的な学習方法」などの解説と、短期間で高い学習目標に到達することが可能となる裏付けについて、丁寧に説明されています。『無料説明会』のページには、カリキュラムの詳細も紹介されています。・嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。スポンサーリンクこちらの記事もよく読まれています。↓(※広告含む)最後までお読みいただいて、ありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト人気記事週間TOP15徹底比較。298ビューこんな使い方があった!Arduino(アルディーノ)完全攻略。100ビューあれっ!?おかしいなぁ。嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。6ビューみんなのひらめきをカタチにしよう!@愛知県豊橋市。みなラボは、初心者の方にも分かり易いデジタルものづくり技術ブログを目指しています。管理人プロフィール名前:や~べ~新しいものづくりのカタチを探す、町工場の一社員。様々なアイデアをカタチにしていきます。「永遠に生きるかのように学べ。明日死ぬかのように生きろ。「あきらめたらそこで試合終了ですよ。「みなラボ」にアクセスいただいてありがとうございます!町工場の一社員や~べ~が新しいものづくりのカタチを模索する日々の中で、学んだこと、感じたこと、思ったことなどを書き綴ってます。