かずいのブログ魅力探究

ブログの魅力を楽しみ、ブログの継続と収益化を目指す

ブログは簡単に作れる仕組みがあるけど、HTMLの知識を学んだほうがより楽しんで書くことができます。文字にエフェクトを与えると思ってください。

ブック画像


ブログで記事を作るにしても、サイドバーに何か設置したり、アフィリエイト広告を貼ったりするときに、HTML(HyperText Markup Language)というコンテンツの構造を作るためのコードを使います。

これって、初めてブログを見る側から作る側にまわった人にとっては、初めて出会う単語で意味不明ですよね?

無料ブログやWordPressでは、HTMLを知らなくてもブログを作ることはできますが、HTMLを知って使いこなせるようになれば、あなたはもっとブログの世界を楽しめるようになります。

この記事では、HTMLの基本的なことを知ることができます。

HTMLとは

タグという命令を書き、文字の構造や効果を指定したり、様々な効果を出すものです。

具体的には、<タグ>●●●●(/タグ)のようにテキスト(文字)を前後で挟み、挟まれた文字に対して命令が実行されます。

見てわかるように、/が入ればタグの終了を意味するのですが、タグによっては終了を必要としないものもあります。

知らずに使っているタグ=基本的なタグ

段落<p>

パソコンでは、エンターを押すだけで改行できますが、HTMLでは<p>を使います。

 

例えば、↑ひとつ上のように改行するだけの場合、表示には見えなくても、タグには<p></p>が入っています。

そして、見出しではない文章の前後にも入っています。

見出し<h●></h●>

大見出しと中見出し、それ以降の見出しに使われるタグです。

ちなみに、SEO的には見出しをちゃんと作成していないと正しい評価をされないようです。

h1が記事のタイトル

h2が大見出し

h3が中見出し

h4を小見出し

として使います。

ちなみに、hはHeading(=見出し)の頭文字です。

SEO=Search Engine Optimization検索エンジン最適化のことで、検索サイトに見つかりやすく、上位に表示してもらうために各種対策が必要となる。

SEOについては、私も猛勉強中なので、別の記事で書きますね。

太字<b>●●</b>

ワードとかで、ctrl + b を押すと文字が太くなるやつです。

長い文章でも、太字で強調されていると気になりますよね?

ちょっと目立たせたいときに使ったりします。

取り消し線<del>●●</del>

一度書いた文や単語を、消したとわかるように取り消し線を表示するタグです。

冗談を言ったり、本音を隠したり、わざと見えるようにしたいときに使います。

引用<blockqoute>●●●</blockqoute>

文章が、会話であったり、他からの文章であったりする場合に明確に引用であることがわかるように、区別するときに使うタグです。

クオーテーションマーク

上のようになります。ブログサービスや表示方法によって、視覚的な見え方が変わります。

リスト表示<ul>か<ol>に<li>を繋げる

<ul>は

  • <li>箇条書きの</li>
  • <li>ように</li>
  • <li>表示するタグ</li>

<ol>は

  1. <li>数字で</li>
  2. <li>順番を</li>
  3. <li>つけたい時に</li>

上のように表示したいときに使います。

表のタグ<table>~<tr>、<th>、<td>~</table>

ちょっと難しいです。ここまで読んだあなたなら、<table>と</table>が表であることはわかりますね?

<tr>と</tr>で表の横1行を表します。

その中に、<th>見出し1</th>

     <th>見出し2</th>

その次に、<td>データ1-1</td>

     <td>データ1-2</td>

繋げていき、<td>データ2-1</td>

      <td>データ2-2</td>

これで、下のような表が完成します。

 

見出し1 見出し2
データ1-1 データ1-2
データ2-1 データ2-1

リンク<a>URL</a>

クリックすると特定のURLを開くようにアドレスを埋め込むことができます。

<a href="https://kazoui.hatenablog.jp/">かずいのブログ魅力探求</a>

かずいのブログ魅力探求

まとめ

HTMLを使えば、文字だけでなく、いろんなことができるようになります。

知っていると知っていないとでは、雲泥の差、、、とまでは言いませんが、役に立つときが必ずあります。

ただ、このはてなブログもそうですが、ボタンひとつでリスト化したり太字にしたり、簡単にブログ作成ができるような補助ツールが充実しています。

じゃあ、HTMLなんて知らなくても大丈夫じゃない?

違うんです。

ブログを作っていると、あれ?この部分なんかおかしいぞ?なんで??みたいなことが必ずあります!!

そういうときに、記事であればHTMLをチェックしておかしいところを探す~なんて場面があるかも。

HTMLの基本だけはおさえといてくださいね。