ブログノウハウ(学ぶ)

【完全初心者向け】最速でブログを書くために必要なダグを取捨選択しましょう

2021年2月1日

  • ブログの構築は終わったけど、どうやってブログを書けばいいかわからない
  • WordPressでブログを書く方法が分からない
  • いろんな記事を読んでも、完全初心者は結局どう書けばいいのか分からない

こんな悩みを持つ方向けに記事を書きました。

この記事を読むことで、

  • ブログの記事の書き方が分かります
  • ブログの記事を書くために必要なWordPressの使い方が分かります
  • WordPressでブログの記事を書くのに必要な「タグ」が分かります

僕は普段、情報分析をしたり、情報を論理的に整理して、会社が持つ問題を解決する仕事をしています
今回はブログを始める初心者の方が必ず知っておく必要のある「記事の書き方」のなかでも、「タグ」について説明します

ブログ初心者の方が迷わないように、徹底的にシンプルに必要な「タグ」は何か、一緒に整理していきましょう

1.タグとは

「タグ」は、WordPress上2つの異なる意味で使われますが、今回の記事では2番目意味の「タグ」について説明します

  1. 記事を分類する際の区分としての「タグ」
  2. WordPressで文章を書く際に、文章の見え方を調整したり、記事を構造化する際に使う機能としての「タグ」

具体的には下の写真の赤枠の1つ1つが「タグ」です。
記事の文章にタグを設定することで、ブログ記事の見え方を調整したり、記事を構造化する際に使います

2. タグを整理することのメリット

タグを整理することで、下記のようなメリットがあります

記事を作成する側のメリット

  • 記事作成の効率化
  • 無駄なタグがなくなり記事作成画面のノイズがなくなる

記事を読む側のメリット

  • ブログの見え方が構造化され読みやすい
  • 同ブログ内の別の記事も同じ構造で書かれることで、記事の内容理解の促進

3.必要なタグを選び整理しよう

画像の赤枠には「タグ」がたくさん設定されていますが、こんなに必要ありません。
必要なものだけを厳選して、自分が効率的に記事を書くための「タグ」のみ設定しましょう

4.普段使いで必要十分な使うタグ一覧

普段使いで必要十分なタグは下記の「タグ」です

  • h2
  • h3
  • h4
  • グレーボックス
  • ナンバリング(番号付きリスト)
  • チェックリスト(番号なしリスト)
  • チェックボックス(番号なsしリスト)
  • マーカー(※色は1色に絞る)
  • グレーボックス
  • link
  • 太字

上記で取り上げた「タグ」以外にも、時々使う「タグ」は設定しておいてもいいかもしれません。

5.その他のタグ一覧

下記の「テスト文章」タグで囲んだ際に、どのようなデザインになるのか確認できます。

テスト文章
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

前提

  1. WordPressをインストールした状態のデフォルトで設定されているタグは、全て消した状態から始めています
  2. 筆者は「Affinger5」を使用しているので、「Affinger5」のテーマをインストール後のデフォルトの状態のタグ一覧化しました
  3. Affinger5」のデフォルト設定意外のタグもありますが、私以外にもタグを整理している方がいたので、その方のタグのリストをインポートしている状態です(インポートしたタグのリストと、タグのリストを作成した方のブログ)

タグ一覧

■br
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■talk
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■table
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

Aのについて はろー
Bについて こもえすたす

■pulldown
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

はろー
こんにちは
なんですか
項目

■programming

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■pre_like

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■pre

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■inyou
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト※引用:ここに記事タイトル

■150%
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■nmb
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト class="nmb"

■p link
こちらをクリックすると導入部分に移動しますテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■p nmb

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■p
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■bold
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■koumoku-link
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■koumoku-no
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■koumoku
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■code
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■point

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■h3_nmb

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■h3

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■h2_nmb

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■h2

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■→
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■>>
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト»

■nofollow
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト rel="nofollow"

■イベント
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストonclick="ga('send', 'event', 'linkclick', 'click', 'hoge');"

■コメントアウト

■CSSNO
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストclass="st-css-no"

■タグSlug
[st_af name="テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト"]

■タグID
[st_af id="テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト"]

■ランキングエリア背景

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ランキング大見出し

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■全サイズ左右30:70%
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

左側のコンテンツ30%

右側のコンテンツ70%

■全サイズ左右50%
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

左側のコンテンツ50%

右側のコンテンツ50%

■PCとTab左右50%
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

左側のコンテンツ50%

右側のコンテンツ50%

■PCとTab左右40:60%
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

左側のコンテンツ40%

右側のコンテンツ60%

■PCに表示しないボックス

■スマホに表示しないボックス
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■装飾なしテーブル

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■table中央配置

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■width100%リセット
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ulタグを囲む均等横並び

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■チェックボックス(番号なしリスト)

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■チェックリスト(番号なしリスト)

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ナンバリング(番号付きリスト)

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■引用風

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■カードスタイルB

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■カードスタイル

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■グレーボックス

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■table風スクロールボックス

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■薄赤ボックス

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■黄色ボックス

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■下に余白

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■センター寄せ(スマホのみ)

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■センター寄せ

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■回り込み解除

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■まとめ

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ボタンB
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ボタンA
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■YouTubeID


テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■YouTube URL 直接貼り付け

■ブログカード風

■スター
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■目次(TOC+)
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト[toc]

■マイボックス

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■フリーボックス
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

タイトル(全角15文字)

ここに本文を記述

■オリジナルSC
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■アドセンス
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

スポンサーリンク

■code
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■カウントのリセット範囲

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■カウント

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ラベル

おすすめ
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ポラロイド風

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■写真に枠線
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■必須
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■参考
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■参照リンク

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■赤マーカー
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■黄マーカー
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■ドット線
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■小文字

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■%指定
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■大文字
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■太字(赤)
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■赤字
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■太字
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■P
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■code
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■del
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■b-quote

テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテスト

■link
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

  • この記事を書いた人

とみー (tomoyamizobe)

■【Firehub(ファイヤーハブ)編集長】 FIREを目指される全ての方にとって、少しでもお役に立てるような情報を毎日発信しておりますので、FIREまでの道のりのお供として、参考にして頂けたら幸いです。 ■【経歴】 元ホームレス ▷ 米国テキサス州の大学を卒業 ▷ 外資コンサルティングファームに就職 ▷ 複業家 (外資コンサル/資産運用/中国輸入ブログ運営などのメディア配信) ※好物はケンタッキーです

-ブログノウハウ(学ぶ)

© 2021 Firehub (ファイヤーハブ)