KAKI blog Written by KAKI

【超便利】タグの使い方をまとめました【Manablog Copy】

ブログ運用

「Manablog Copyには【タグ】がたくさんあるけど、どうやって使ったらいいんだろう?」

 

Manablog Copyをダウンロードしたけど、初めはタグがたくさんあっても、何をどのように使って良いのかわからないと思います。

僕も、マナブさんのようにきれいなブログを作りたいけど、装飾が思うようにいかなくて、初めは戸惑っていました。

そこで、初心者の方でもわかりやすく、「Manablog Copyタグの使い方」をまとめてみました。

慣れていくとだんだん簡単になるのですが、初心者の頃はタグやコードを見ても馴染みがなく、拒否反応がでてしまうこともありますよね。

ブログを楽しく継続していくためにも、「タグやコード」を上手に使いこなせると断然楽しくなります。

ぜひ皆さんもタグやコードを理解する上でも、この記事を参考書のように活用してみてください!それでははじめていきましょう!

 

スポンサードサーチ

【Manablog Copy】タグの使い方

 

 b 】:意味を強調する

名称:strong
内容:意味を強調するタグ
例:ABC
開始タグ:<strong>
終了タグ:</strong>

 i 】:斜め文字

名称:em
内容:イタリック体にするタグ
例:ABC
開始タグ:<em>
終了タグ:</em>

【 link 】:リンク

名称:link
内容:クリックすることで違うページに飛ぶ(リンク)ようにするタグ
例:ABC
開始タグ:<a href=”記事URL”>
終了タグ:</a>

【 b-quote 】:引用

名称:blockquote
内容:引用を表示するタグ

ABC

開始タグ:<blockquote>
終了タグ: </blockquote>

【  del  】:削除

名称:delete
内容:文書を修正する際に、どの部分を削除したのかを示す場合に使用するタグ
例:ABC
開始タグ:<p><del datetime=”2021-09-18T14:01:25+00:00″>
終了タグ:</del></p>
(<del>文章</del> でもOK)

【 ins 】:修正

名称:insert
内容:文書を修正する際に、どの部分を追加したのかを示す場合に使用するタグ
例:ABC
開始タグ:<p><ins datetime=”2021-09-18T14:01:25+00:00″>
終了タグ:</ins></p>
(<ins>文章</ins> でもOK)

【 img 】:画像

名称:image
内容:文書内に画像を表示するためのタグ
例:
タグ:<img src=”画像のURL” alt=”” /><img src=”画像のURL” alt=”画像の説明” />

【 ul+li 】:「・」のリスト

名称:ul=unordered list(順序がないリスト)、li=list item
内容:ul=順序がない箇条書きのリストを表示する際に使用するタグ、li=リストの項目を表示するために使用するタグ
例:

  • ABC
  • DEF
  • GHI

タグ:まずリスト全体を「<ul></ul>」で囲み、その後、各リスト行を「<li>○○○</li>」で囲む。

<ul>
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ul>

【 ol+li 】:「数字」のリスト

名称:ol=ordered list(順序のあるリスト)、li=list item
内容:ol=順序のある番号付きのリストを表示する際に使用するタグ、li=リストの項目を表示するために使用するタグ
例:

  1. ABC
  2. DEF
  3. GHI

タグ:まずリスト全体を「<ol></ol>」で囲み、その後、各リスト行を「<li>○○○</li>」で囲む。

<ol>
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ol>

【 code 】:コード

名称:code
内容:codeタグで囲まれたところに書き込んだ内容が、プログラムのソースコードであることを意味する。短いコード例を固定ピッチフォントで表示。なお、改行や空白などを保持して、行数の多い固定ピッチのテキストを表示するには pre要素;(整形済みテキスト要素)を使う。
例:ABCDEFGHI
開始タグ:<code>
終了タグ:</code>

【 more 】:抜粋文・広告表示

名称:more
内容:
1)一覧ページなどの抜粋文で、「ここまでの文章を表示し、ここからは、続きを読む(READ MORE)」を表示させる印として使う
2)「広告を表示するための位置」を示すために使う
例1):

開始タグ:<!–more–>
終了タグ:なし

【 タグを閉じる 】:タグを閉じる(色々なタグに対応)

内容:開始タグ(色々なタグ)+文章(単語)+「タグを閉じる」タグ「勝手に色々なタグに対応して、タグを閉じてくれる」

【 marker 】:蛍光ペン

名称:marker
内容:蛍光ペンのようなマーカー
例:ABCDEFGHI
開始タグ:<span class=”marker”>
終了タグ:</span>

【 nmb 】:class=”nmb”

名称:class=”nmb”
内容:HTMLのタグ内に、「class=”class名(クラスの名前)”」と書くことでタグにclass名をつけることができます。class名は自分で好きにつけることができます(ただし、半角英数字に限ります)。
真価を発揮するのが、CSSを書く時ですclassは、1ページ内でも何度でも使えるのが大きな魅力です。複数の要素を同じ見栄えにしたい時、classをつけてあげれば一気に指定することができます
開始タグ: class=”nmb”
終了タグ:なし

【 P 】:段落

名称:Paragraph
内容:段落(文章中のまとまり)」を示す
開始タグ:<p>
終了タグ:</p>

【 P nmb 】:p class=”nmb”

名称:p class=”nmb”
内容:class=”nmb” 同様CSSを書くときに使用
開始タグ:<p class=”nmb”>
終了タグ:</p>

【 point 】:チェックマーク

名称:point
内容:行頭にチェックマークを入れる
例:

ABCDEFGHI

開始タグ:<p class=”point”><i class=”fa fa-check” aria-hidden=”true”></i>
終了タグ:</p>

【 Pre 】:編みかけ

内容:編みかけで囲む
例:

ABCDEFGHI

開始タグ:<pre>
終了タグ:</pre>

【 Pre_Like 】:編みかけ

内容:編みかけで囲む
例:

ABCDEFGHI

開始タグ:<div class=”pre”>
終了タグ:</div>

※Preとの違い:div
・divタグはそれ単体では意味を持たない特殊なタグです。囲った部分をブロック要素としてまとめて扱うことができます。
(違いがよくわかりませんでした^^;)

【 programming 】:シンタックスハイライター

名称:シンタックスハイライター
内容:シンタックスハイライトは意味がある文字列や構文に色を付けることで、ソースコードの可読性を向上させるものです。別に色を付けなくてもコードの実行には全く影響ありません。ソースコードをシンタックスハイライト表示したら何となくカッコイイから(笑)と言うのは半分冗談ですが、読者ファーストを考慮したら、ソースコードは見やすいに越したことはないからです。
例:

/*マーカー機能の追加*/
.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}

開始タグ:<pre><code class=”language-php”>
終了タグ:</code></pre>

【 table 】:テーブル

名称:table
内容:表を作成するためのタグ
例:

辻さん SEO界隈だと知らない人はいない。
nanapiのSEOで検索流入の約4倍にしたことでも有名。
バズ部 コンテンツマーケ界のトップに君臨するSEO会社。
SEOライティングに強い。

タグ:

<div class=”table-responsive”>
<table class=”table”>
<tbody>

<tr>
<td style=”background-color: #fafafa;”><a href=”http://webweb.jp/”>辻さん</a></td>
<td>SEO界隈だと知らない人はいない。
<a href=”https://nanapi.jp/”>nanapi</a>のSEOで検索流入の約4倍にしたことでも有名。</td>
</tr>

<tr>
<td style=”background-color: #fafafa;”><a href=”http://bazubu.com/”>バズ部</a></td>
<td>コンテンツマーケ界のトップに君臨するSEO会社。
SEOライティングに強い。</td>
</tr>

</tbody>
</table>
</div>

【 talk 】:吹き出し

内容:吹き出し様表現の表示例。
例:

怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」

タグ:

<div class=”talk clearfix”>
<div class=”col-md-3 col-xs-3 img”>
<img src=”https://manablog.org/wp-content/uploads/2016/11/animal.jpg” alt=”” class=”img-responsive img-circle”>
</div>
<div class=”col-md-9 col-xs-9 text”>
<p><span class=”bold”>怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

【 太字 】:太字

名称:太字
内容:文字を太くする
例:ABCDEFGHI
開始タグ:<b>
終了タグ:</b>

Manablog Copyの「bタグ」と「太字」の違い:

「bタグ」→ <strong>○○○○○○</strong> →「意味を強調」

「太字タグ」→ <b>○○○○○○</b> →「文字を太く」

見かけ上の違いはまったくないですが、SEO対策上では違いがあります!

「SEO対策では<strong>タグに効果がある」と言われています。
strong タグを使用するとそのキーワードが論理的にも強調されますので、検索エンジンでヒットしやすくなる傾向があります。

その一方で、strong タグを多用しすぎるとペナルティーを受けてしまい、ページがインデックスされなかったり、検索順位が下がるといったケースもあります。

なので、strong タグを使いすぎるとよくありませんが、適度に使用するようにすると、検索エンジンのSEO対策にある程度の効果があるということです。

使い方としては、H2などの見出しタグの直下で、SEOキーワードを使用したりすると若干の効果のある傾向があります。

【 h2 】:h2見出し

名称:h2見出し
内容:ユーザーと検索エンジン双方の利便性を高めるために使用。
開始タグ:<h2>
終了タグ:</h2>

【 h3 】:h3見出し

名称:h3見出し
内容:ユーザーと検索エンジン双方の利便性を高めるために使用。
開始タグ:<h3>
終了タグ:</h3>

【 h2_nmb 】:h2見出し

名称:h2見出し
内容:nmbを何かに置き換えたら、何かが変わるのですが、、、すみません、よくわかりませんでした。。。
開始タグ:<h2 class=”nmb”>
終了タグ:</h2>

【 h3_nmb 】:h3見出し

名称:h3見出し
内容:nmbを何かに置き換えたら、何かが変わるのですが、、、すみません、よくわかりませんでした。。。
開始タグ:<h3 class=”nmb”>
終了タグ:</h3>

【 mokuji 】:もくじ

内容:すみません、よくわかりませんでした。。。
post通信:アクセスしたユーザーが入力したデータをサーバー側に引き渡す。入力フォームの値を受信して処理することが出来る、とあります。これが関係しているのかも。
開始タグ:<p id=”post-22″>
終了タグ:</p>

【 150% 】:1.5倍

名称:150%
内容:文字が1.5倍に拡大される
例:ABCDEFGHI
開始タグ:<span style=”font-size: 150%;font-weight: 600;”>
終了タグ:</span>

【 code 】:コード

名称:code
内容:codeタグが2つあるが、両方とも同じものでしたw
例:ABCDEFGHI
開始タグ:<code>
終了タグ:</code>

【 bold 】:太字

名称:bold
内容:太字になる
例:ABCDEFGHI
開始タグ:<span class=”bold”>
終了タグ:</span>

【 Youtube 】:YouTube

名称:YouTube
内容:YouTubeの埋め込み画像が、レスポンシブになる
例:

開始タグ:<div class=”YoutubeWrapper”>
終了タグ:</div>

【 br 】:半角スペース・改行禁止

名称:ノーブレークスペース(no-break space, non-breaking space, NBSP)
内容:HTMLの文中に &nbsp; を挿入すると半角スペース分の間隔を空けてくれる。実は &nbsp; の本来の役割は「半角スペースの代わり」ではありません。本来は「改行の禁止(=当該空白部分での自動的な改行を防ぐ)」という機能を果たすもの。
開始タグ:&nbsp;
終了タグ:なし

その他、よく使うタグ

【 >> 】:右角引用符

名称:右角引用符
内容:リンクを挿入する上で、これがあるとクリックされる可能性が高くなる。
例:» お問い合わせ
開始タグ:<a href=””>&raquo; 
終了タグ:</a>

【 目次 】:本記事の内容

名称:目次
内容:プラグインで目次機能を追加することもできますが、manablogではタグ打ちにより目次を追加しています。
タグ:

<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 本記事の内容</p>
<ul>
   <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>

スポンサードサーチ

まとめ

いかがでしたでか?たくさんあって、初めは戸惑うかもしれませんね。

記事を書きながら使っていれば、少しずつ慣れていきますので、この記事を参考に「タグ」を使いこなしてみて下さい。

これ以外にも、自分好みのタグを追加していくと、さらにブログ運営が楽しくなりますよ。

ぜひブログ運営を楽しんでくださいね^ ^ 次の記事でお待ちしています♪

人気記事【資産運用】インデックス投資家が老後も失敗しない5つの理由を解説!

人気記事【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!