MONOIST

ネットでお金を稼ぐということ。

はてなブログでよく使うHTML編集のかんたんなコード!

HTMLイメージ

はてなブログは「見たままモード」で記事を書けるので、ほとんどHTMLの知識は必要ありません。ただ、ちょっとした修正などで「HTML編集」を使いたい場合によく使うHTMLのコード(タグ)を解説していきます。

はてなブログの見出しを構成する「h2タグ」

特にSEO対策では記事の見出しは重要です。

Googleの検索エンジンは見出しのタグである<h2><h3><h4>を重要視します。

はてなブログの「見たままモード」で「大見出し」をつけると<h3>のタグになります。

 

どれくらいの意味があるのかわからないですが、本来「大見出し」は<h2>ですので、わたしは毎回HTML編集で書き換えています。

<h2>はてなブログの見出しを構成する</h2>

 

はてなブログの見出しを構成する「h4タグ」

見たままモードの中見出しは<h4>で構成されますが、これは<h2>より下の階層の見出しとわかればいいのでそのまま<h4>を使っています。<h4>を使うことで、はてなブログのデザイン的にもメリハリがつきます。

<h4>はてなブログの見出しを構成する</h4>

 

はてなブログの記事を構成する「pタグ」

<p>タグは段落をまとめるタグで「見たままモード」だと自動的につけてくれます。しかし思ったように段落が構成されずに<div>など余計なタグが入るときがあります。その場合には<p>だけで構成するようにHTML編集で書き換えることがあります。

 

はてなブログでリストを作る「liタグ」

リストボタン

はてなブログの見たままモードでは「リストボタン」「番号付きリストボタン」があるので簡単にリストを作れます。

  • リスト
  • リスト
  • リスト
  1. リスト
  2. リスト
  3. リスト

リストの構成要素を意味する<li>タグを直接変更することはあまりないですが、覚えておくとうまくリスト化できなかった時に役立つでしょう。

はてなブログでコードやみたままの表記をする「codeタグ」「preタグ」

この記事のようにHTMLコードなどの説明をするときに、<code>タグと<pre>タグは便利です。先ほどのHTMLタグの説明では<code>タグを使ってHTMLであることを強調しました。 

 

<pre>タグはほとんど<code>タグと同じように書いたままを表示してくれるタグですが「改行」もそのまま反映してくれる便利なタグです。

<code>
    <h2>はてなブログの見出しを構成する</h2>
</code>

はてなブログのリンクのちょっと注意して使いたい「リンクタグ」

はてなブログでこのように外部リンクを使うとHTMLではこうなります。

<a href="https://hatenablog.com">はてなブログ</a>

 

ここでちょっと問題になるのは、外部リンクを貼ってしまうと読者が外部に流出してしまうことです。この場合、別の新しいタブでリンクを開くようにHTML編集でこのように書き加えるといいでしょう。

<a href="https://hatenablog.com" target="_blank">はてなブログ</a>

 

これで読者は自分の記事にとどまりつつ、外部リンクを参照できるようになります。