注目キーワード

素人ブロガーの素人ブロガーによる素人ブロガーのための最低限のHTML

  • 2021年4月1日
  • Blog
  • 6回
  • 0件

本日もお越しいただきありがとうございます。

HTMLやCSSに未だ悩まされている独学ブロガー1年生です!

本日のテーマは「素人ブロガーのための最低限のHTML」について!!

ブログを書いている皆さん。

ブログを書く時、意外とプログラミング言語の一つHTMLや CSSが必要になり困ったことありませんか??

 

ブログを始めたばかりの頃、僕はかなり悩まされました。

というのも、ブログはただ文章を書き、更新し続ければ稼げると思っていたからです。

ただ実際に行ってみたら‥。

ブログを運営するには、かなりさまざまな知識が必要!!!

特化型ブログなら特化したものの知識はもちろん。

  • アフィリエイト広告ならマーケティング戦略の知識。
  • 純粋に伝わる・見やすい文章の書き方
  • ブログツールの機能
  • 分析の仕方

などなど

そして数ある悩み中で、もっとも最初にもっとも多くの素人ブロガーがぶち当たるのがHTMLだと思います。

正直、ブログを書く上でほんの少しだけでもHTMLの知識は必要。

ただ、はっきり言ってHTMLがなんなのか?HTML何を意味しているのか?

全く分からないと思います。

 

ところが、HTMLのことが少しわかれば様々な『ブログ遊び』ができます!!

 

そこで今回、素人ブロガーに必要な最低限度のHTMLを解説していこうと思います!!

 

素人ブロガーに必要な最低限のHTML

 

ブログを書く上でHTMLの知識は少なからず必要!!

 

もしさらに見やすいブログを求めていくなら必須スキルだと思います。

ただ「HTML」ってパソコン関連の仕事をしている人なら知っていると思いますが、
知らないでブログを始めてしまう人多いですよね!!

 

そこでまず「HTML」とはについて簡単にまとめてみました!

そもそも「HTML」とは??

 

「HTML」とは、ハイパーテキスト・マークアップ・ランゲージの略。

大雑把に言うと、コンピューターが理解するための言語。

  • 「ここに見出しがあります」
  • 「ここに本文があります。」
  • 「ここは改行です。」
  • 「ここがこの記事の説明文です。」

などなど様々なことを語っています。

 

またサイトのデザインとなるCSSというコードを本文中に埋め込むのもHTML。

そんなHTMLを少しでも理解できれば、ブログの可能性が広がっていくと思いませんか??

 

そう、実はHTMLを少しでも理解すると一気にブログが面白くなります!!

 

今回紹介するのは、ほんと初歩の初歩。

基本的な部分のみです。

 

ただ、基本を知ると何を言っているHTMLなのか理解しやすくなると思います

ぜひ勉強してみてはいかがでしょうか??

 

PR

見出しタグ <h>

 

見出しタグ<h>は良く使うタグ!全部で6段階まであります。

<h1>タグが大見出し。

 

大体、ブログタイトルや記事タイトルに使われています。

多くのブログツールのならh1タグは、ユーザーが使うことはありません。

タイトル部分などを打ち込むと勝手に<h1>タグとなってくれます!

 

ただ重要なのは、<h2>タグ以降。

<h>タグは順番が大きくなるたびに小さい見出しとなっていきます。

 

その順番が重要といわれています。

h2→h3→h4……といった感じに順番通りになっていた方が検索エンジンからの評価が高くなりやすいそうです。

自分が実践していて、あまり<h>タグの順番による評価はあまり実感していないですが、やらないよりやる方がいいかなと思います。

 

改行タグ<p>と</br>

 

改行タグには、2種類あります。<p>タグと</br>タグです。

 

<p>はどちらかというと文章、本文といった意味合い(だと思います。。)

通常ウェブ上で書かれた文章は、<p>文章</p>となっています。

<p>文章</p><p>文章</p>と打つと、

文章
文章
となります。

また、<p></p>と<p>タグの間に何も文章を書かないと『空改行』となり、スペースを作ることができます。

WordPressの新エディター「ブロックエディター」では、<p>タグの空改行は自動修正されてしまいます。
「ブロックエディター」の場合、スペーサーを使わないといけません。
 

 

対して</br>タグは改行という意味です。

 

 
独学ブロガー 1年生
改行できればどっちでもいい。
僕もこう思って深く勉強してませんでしたが、WordPressに移行して以来結構必要となってきました!!

 

WordPressで枠や吹き出しなどを作ったとき、</br>タグが必要となってきます。

</br>でないと枠内での改行ができません。

 

ちなみに簡単に<p>タグと</br>タグを打つ方法があります。

それは……

  • ENTERキーのみ=<p>タグ
  • ENTER+SHIFT=</br>タグ

です。

リンクのタグ<a href~>

記事にリンクを貼りたいとき、<a href>タグを使います。

 

<a href>タグは<a href=”リンク先のURL”>といった形で使います。

ただ記事内のジャンプにも使うことができます。

 

例えば……

ここを押してジャンプ

こんな感じで、記事内の見出しへジャンプすることが可能です!

方法は…

<a href=”#適当な英数字”>文章(今回は「ここを押してジャンプ」)</a>

 と

飛ばしたい見出しタグに……

<h3 id=”同じ英数字”>

というコードを打ち込むだけ!!

 

知っていると記事内にいろいろな仕掛けができると思いますので、ぜひ活用してみてください!!

 

表のタグ<table><tr><th><td>

 

表のタグは知っているとかなり便利かなと思います。

それぞれのタグの意味合いは……

タグ意味
<table>表を示すタグです。
表全体を囲むタグとなっています。
<tr>「table row」の略。表の行となるタグです。
<th>「table header」の略。表の見出しとなるタグです。
<td>「table data」の略。表のセルとなるタグです。 

 

といった感じです。

SEO対策に必要? <mata description> 

実は、多くのブロガーが、ないがしろにしてしまいがちなのが<mata description>タグ。

 

<mata description> は検索して出てきた自分の記事の「説明文」です。

 

「この記事はこういう記事です。」といった内容を書くタグ。

 

この説明文あるなしで検索結果に大きく影響を及ぼします。

はてなブログでは、この記事の説明文の記入欄は、ここにあります!!

 

また、僕が使用しているWordPressテーマ「The Thor」では、記事編集画面の下の方にあります!!

 

複雑なHTMLはコピペが一番!!

ここまで必要最低限のHTMLを紹介しましたが、
はっきり言って必要最低限以上のHTMLは勉強しなくても大丈夫だと思います。

 

それは、HTMLのコードはWEB上にたくさん公開されているからです。

特に「サルワカ」さんのページは参考になると思いますので、ぜひ見てみてください!!

 

サルワカ | サルでも分かる図解説明マガジン

サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ!…

 

 

最後に……

 

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

今回のお話いかがだったでしょうか。

 

HTMLに関しては悩みすぎず、ブロガーとして必要最低限を知っていればいいと思います。

 

それよりも「見やすい記事」、「思わずクリックしたくなるような仕掛け」などを勉強した方が成果につながりやすいです!

 

ただHTMLやCSSは勉強するとかなり面白いです!!

ついついハマってしまうかも……

 

遊び半分で勉強してみるといいかもしれませんね!

それでは良いブロガーライフを!!

また次回もよろしくお願いします!!

 

こういったメインブログやってます。

良かったらこちらもご覧ください!!
↓↓

ウイスキーを愛する料理人のブログ Yaffee’s whisky blog

ウイスキーを愛する料理人が、日々の晩酌をもっとおいしくする情報を公開。知識・歴史から料理とのペアリング、蒸留所ごとの情報…

 

PR
最新情報をチェックしよう!