WordPress

目次や見出しのHTMLテンプレート!ブログ記事【コピペでOK】

【コピペでOK】ブログ記事でよく使うHTMLテンプレート!目次や見出し
かえるくん
ブログの記事でよく見るHTMLのコピペでOKなテンプレートってないの?目次を作りたい!

こんにちは、かえるくんです!

☑︎この記事の内容

・ブログでよく使うHTML

・自作の目次や見出しのテンプレート配布

これだけの内容が理解できます!

ブログを書くときにHTMLを記載すると思いますが、そのHTMLがあっているか不安ですよね?

僕が、ブログでよく使うHTMLをまとめました。HTMLが目次や見出しのテンプレートもあるので、コピペで簡単に使用できます。

かえるくん
この記事を読んで、ブログで使用できるHTMLや自作の目次の作成方法を知ろう!

そもそもHTMLとは?

【コピペでOK】ブログ記事でよく使うHTMLテンプレート!目次や見出し
基本的に全てのWebページはHTMLで作成されていると言っても過言ではありません。

文字に色を付けたり、文字の色を濃くしたり、画像を貼り付けるのもHTMLで作成されています。
【コピペでOK】ブログ記事でよく使うHTMLテンプレート!目次や見出し
上記の画像ですと、「あああああ」と太い黒字で表記されたりします。

ブログを記入する際は、HTMLをマスターしなければ質の良い記事は書けないとも言えるでしょう。

ブログで使えるHTML

【コピペでOK】ブログ記事でよく使うHTMLテンプレート!目次や見出し
WordPressの旧テキストエディターで使用するHTMLですが、正しく記載できているでしょうか?

今回は、ブログで使用するHTMLのテンプレートや、プラグインを使用しない目次などを紹介していこうと思います。

かえるくん
コピペで使用できます!

旧テキストエディターを使用しよう

WordPressのプラグインはどれを入れておけばいいの?
テキストエディターを使用しましょう。なぜなら、SEOを意識したライティングをすることができ、検索エンジンに最適化することで、Google検索上位に上がることができるからです。

WordPressで旧テキストエディターを使用する方法は「【初心者向け】WordPressのプラグインはどれを入れておけばいいの?」こちらの記事からどうぞ

 

 

旧テキストエディターにいきなり変更するのは難しいことですが、徐々に慣れていきましょう!

追加CSSにて色付けをしたりする場合もあるので、先ほどのリンクから、追加CSSを追加するプラグインも有効化しておきましょう。

それを踏まえた上で、ブログでよく使うHTMLを紹介していきます。

文字を太くする

Strongタグbタグの2種類文字を太くするHTMLがあります。
基本はbタグを使用しましょう。

✔︎タグ
僕の名前はかえるくんです。
<span class="bold">僕の名前はかえるくんです。</span>

※strongはSEO的に多用してはいけません。多用しすぎるとGoogleからの評価が落ち、ペナルティ対象となる場合があります。

文字に色をつける

markerタグを使うことで文字に色をつけることができます。追加CSSにも記入することで、ショートカットすることができます。

✔︎タグ
僕の名前はかえるくんです。
<span class="marker">僕の名前はかえるくんです。</span>

追加CSSに記入することで、タグに色をつけることができます。

✔︎CSS

.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}

文字を傾ける

emタグを使用することで、文字を傾けることができます。

✔︎タグ
僕の名前はかえるくんです。
<em>僕の名前はかえるくんです。</em>

文字に下線を引く

insタグを使用することで、文字の下線を引くことができます。

✔︎タグ
僕の名前はかえるくんです。
<ins>僕の名前はかえるくんです。</ins>

リンクを貼り付ける

リンクタグを使用することで、リンクを貼り付けることができます。

✔︎タグ
僕の名前はかえるくんです。
<a href="URLを記入">僕の名前はかえるくんです。</a>

引用する

blockquoteタグを使用することで、引用する際の黒枠を作ることができます。

✔︎タグ
僕の名前はかえるくんです。

<blockquote>僕の名前はかえるくんです。</blockquote>

文字を大きくする

サイズタグを使用することで、文字サイズを変更することができます。

✔︎タグ
僕の名前はかえるくんです。
<span style="font-size: 150%;font-weight: 600;">僕の名前はかえるくんです。</span>

✔︎マークをつける

pointタグを使用することで、チェックマークをつけることができます。

✔︎タグ

僕の名前はかえるくんです。


<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 僕の名前はかえるくんです。</p>

黒枠で文字を囲む

preタグを使用することで、文字を黒枠で囲むことができます。

✔︎タグ
僕の名前はかえるくんです。
<pre>僕の名前はかえるくんです。</pre>

Ulタグで文字を囲む

ulタグを使用することで、文字を青枠で囲むことができます。

    ✔︎タグ

  • 僕の名前はかえるくんです。
  • 僕の名前はかえるくんです。
<ul>
	<li>僕の名前はかえるくんです。</li>

	<li>僕の名前はかえるくんです。</li>
</ul>

また、ulタグをolタグに変更することによって、「・」から「番号」に変更することができます。

    ✔︎タグ

  1. 僕の名前はかえるくんです。
  2. 僕の名前はかえるくんです。
<ol>
	<li>僕の名前はかえるくんです。</li>

	<li>僕の名前はかえるくんです。</li>
</ol>

目次や見出しのHTMLテンプレート

【コピペでOK】ブログ記事でよく使うHTMLテンプレート!目次や見出し
次は、ブログ内のHTMLの目次や見出しを自分で作成します。

プラグインでも目次などを作成することができますが、プラグインを入れすぎると重くなったり、ウイルスや、ハッキングされやすくなるため、自作の目次や見出しを使用します。

目次

目次タグは、チェックタグと、ulタグliタグを使用して作成します。

Contents

1章

1章です

2章

2章です

3章

目次タグを使用すると、記事内で移動することが可能になります。

<ul>
<p class="point"><i class="fa fa-check" aria-hidden="true"></i> Contents</p>
   <li><a href="#01">1章</a></li>
   <li><a href="#02">2章</a></li>
   <li><a href="#03" >3章</a></li>
</ul>
<h2 id="01">1章</h2>
1章です
<h2 id="02">2章</h2>
2章です
<h2 id="03">3章</h2>

見出し

見出しは目次タグh2タグh3タグなどで使用します。

<h2>僕の名前はかえるくんです。</h2>

<h3>僕の名前はかえるくんです。</h3>

画像トーク

画像トークタグのテンプレートを使用することで、画像があたかも話しているかのようにすることができます。

かえるくん
僕の名前はかえるくんです。
<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
	<img src="画像のURL" alt="" class="img-responsive img-circle">
</div>
<div class="col-md-9 col-xs-9 text">
	<p><span class="bold">名前</span>「僕の名前はかえるくんです。」</p>
</div>
</div>

まとめ:目次や見出しのHTMLテンプレート!ブログ記事【コピペでOK】

【コピペでOK】ブログ記事でよく使うHTMLテンプレート!目次や見出し

かえるくん
ここまで読んでいただきありがとうございました!

ブログ記事でよく使うHTMLタグの使い方が理解できたでしょうか?

目次や見出しなど、自分で自作するとSEO対策となるので、是非自作目次を作成しましょう。

HTMLタグをもっと効率よく使用するためにはAddquicktagを使用する必要性があります。

Addquicktagの使い方は「【WordPress】AddQuicktagインストールとダウンロードを解説!」こちらの記事からどうぞ!

こちらも読みたい

 

 

-WordPress
-

© 2020 Flog Blog(かえるブログ)