WORDPRESS

【2021年】ACTION AFFINGER6の記事作成・投稿で”超実践的”なポイントを1から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド/第7章】

ACTION AFFINGER6の記事作成・投稿で”超実践的”なポイントを1から徹底解説
 

専業ブロガー4年目のあずきです🐥

 

あずきのワードプレスブログ「完全初心者」ガイド、【第7章】にあたる今回のテーマは…

WordPressで「記事」を作って投稿しよう

です

 

まずWordPressにおける記事作成というのは、お使いの「WordPressテーマ」によって…

  • 編集画面の仕様
  • 使用できるパーツ
  • カスタマイズ可能な範囲

などが、当然変わってくるんですね

 

で、ここでは当ブログガイドの第3章「テーマ」編でもご紹介していて…

WordPressで「本格的」にブログを作っていきたい!

ブログに広告を貼ったりして「収益化」もしていきたい!

といった【本気でブログをやっていきたい方】に超おすすめな高性能&人気テーマ、「ACTION AFFINGER6」を前提として解説していきます

ワードプレスの超有名テーマ!

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

具体的には、箇条書きや画像ファイルの挿入といった「基本スキル」も押さえたうえで…

  • WordPressテーマを問わず、記事作成において「事前に押さえておきたい」重要ポイント
  • 自分も実際に使っている、『ACTION AFFINGER6』固有の「おすすめパーツ」の使い方

といった、”実践性” を特に重視している内容です

ということで、さっそく見ていこー!
 

 

※お探しの内容がピンポイントで決まっている場合は、
こちらの【目次】を開いてジャンプしていただくとスムーズです ↓

Contents

【2021年】ACTION AFFINGER6の記事作成・投稿で”超実践的”なポイントを1から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド/第7章】

WordPress ヘッダー a-01

 

【重要】WordPress「投稿」と「固定ページ」の違いとは?使い分けのポイント

 

WordPressで記事を作るうえで、事前に押さえておきたい重要ポイントの1つが…

【投稿】と【固定ページ】の違いと使い分け

についてです

 

まずこの【投稿】と【固定ページ】というのは、WordPress管理画面の左側に表示されている…

 

WordPress「投稿・固定ページ」の違いとは?使い分けの実践的なポイント top-01

 

↑ こちらの2ヶ所のこと

どっちも開いてみると、似たような編集画面が出るよ
 

記事を作る際に、どちらを使えばいいか迷うかもですが、結論としては…

ブログ内の「新着投稿」などに載る、いわゆる通常の記事を作りたいとき

は、【固定ページ】ではなく【投稿】側の編集モードを使っていけばOKです

 

そんな【投稿】と【固定ページ】の違いについて、3つのステップで丁寧に解説していきます

  1. 「投稿」と「固定ページ」の違いと使い分けについて
  2. 「固定ページ」が活躍するシーンは、実質この3つ ※重要!
  3. 「固定ページ」は、どうすればブログ上で表示できるの?

【重要】WordPress「ビジュアルエディタ」と「テキストエディタ」の違いとは?使い分けのポイント

 

WordPressで記事を作るうえで、同じく重要ポイントの1つとなるのが…

【ビジュアルエディタ】と【テキストエディタ】の違いと使い分け

についてです

 

まず大前提として、現在のWordPressではここでご紹介する…

  • ビジュアルエディタ
  • テキストエディタ

という違い以前に、もっと大きな括りとして…

  • クラシックエディタ
  • グーテンベルグ(ブロックエディタ)

という「2タイプ」の投稿編集モードにわかれています

つまり、記事を作っていくときの「操作画面タイプ」のことだね!
 

関連

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

で!

 

前者の「クラシックエディタ」を選択してWordPressに導入した場合は…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント top-01

 

↑ WordPress管理画面 > 投稿 > 新規追加 で「記事作成の画面」を開いたら、そのなかの右上に表示されている…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント top-02

 

↑ こちらの…

  • ビジュアル
  • テキスト

という「2つの編集モード」を、好みや必要に応じて使い分けていく形になるんですね

これが今回の「ビジュアルエディタ」と「テキストエディタ」のこと!
 

これだけ聞くと、初心者さんにとっては「なんか面倒くさそう」と思うかもですが…

 

ビジュアルエディタ・テキストエディタの使い分けは「超簡単」

 

です(本当に)

【重要】WordPress「記事ごとで行うパーマリンク設定」のやり方と注意ポイント

 

WordPressで記事を作るうえで、こちらも重要ポイントの1つとなるのが…

記事ごとで行う「パーマリンク設定」

についてです

 

この「パーマリンク設定」を適当に放っておくと、あとから…

 

全記事のページURLを「リダイレクト」処理することになる

 

など、わりと面倒なことになりかねません

記事を公開する前に、ここでちゃんと覚えておこう!
 

重要

ご紹介する内容は、あらかじめ…

パーマリンクの【初期設定】

を済ませている前提で解説していきます

 

「パーマリンクの初期設定ってなに…?」という場合や「そもそもパーマリンクってなに…?」という場合は、お先にこちらからどうぞ ↓

WordPressのパーマリンク設定とは?初期設定のやり方
【2021年】WordPressのパーマリンク設定とは?初期設定のやり方を初心者向けに解説【スラッグの「共通設定」方法】

続きを見る

【重要】WordPress「見出し」とは?見出しの作り方と『H1・H2・H3…』の使い分けのポイント

 

WordPressにおける「見出し」というのは、実際のブログ画面上だと…

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け top-01

↑ この「青枠で囲った箇所」を指します

つまり、記事のなかに大小いくつか設置する「タイトル」部分のこと!
 

ブログ記事を作成するときには、これらの各種「見出し」を正しい使い方で設置していくことが大前提となります

 

なぜなら「見出し」の使い方がそもそも間違っていると、どれだけ記事内容にこだわっていても…

  • ブログを訪れたユーザーが、記事の構成を掴みづらく困惑してしまう
    (→満足度に悪影響)
  • 検索エンジンのクローラーも、同様にマイナスの評価を下してしまう
    (→SEO面で悪影響)

となる可能性が高いからですね

と言っても、要点はいたってカンタンだよ!

【重要】WordPress「段落」と「改行」とは? 違いと入れ方、実践的な使い分けのポイント

 

実際のブログ画面上で見ると、まず【段落】を使った場合が…

 

WordPress「段落と改行」の違いとは?入れ方と使い分けの実践的なポイント top-01

 

↑ こちらで、【改行】を使った場合が…

 

WordPress「段落と改行」の違いとは?入れ方と使い分けの実践的なポイント top-02

 

↑ こちらです

 

この【段落】と【改行】の違いをよく知らないままだと、例えば…

  • 行間の余白が不足しているせいで、ブログ訪問者にとって読みづらいレイアウトになる
  • もしくは余白が過剰にあるせいで、「間延び」したレイアウトでかえって見づらくなる

といったことにもなりかねません

この「段落」と「改行」も、使い分けの要点はカンタンだよ!

ACTION AFFINGER6「記事タイトル」と「見出し」のカスタマイズ方法

 

「記事タイトル&見出し」のカスタマイズとは、実際のブログ画面上で見ると…

 

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 top-01

 

↓(設定後の一例)

 

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 top-02

 

↑ 例えばこのような感じですね

記事タイトルは、上の例だと「Hello spring!」のとこだね!

ACTION AFFINGER6「会話ふきだし」の使い方とカスタマイズ方法

 

ACTION AFFINGER6における「会話ふきだし」とは、実際のブログ画面上で見ると…

 

AFFINGER6「会話ふきだし(会話アイコン)」の使い方と、色&デザイン設定のカスタマイズ方法 top-01

AFFINGER6「会話ふきだし(会話アイコン)」の使い方と、色&デザイン設定のカスタマイズ方法 top-02

AFFINGER6「会話ふきだし(会話アイコン)」の使い方と、色&デザイン設定のカスタマイズ方法 top-03

 

↑ このようなもの

 

こうした「会話ふきだし」を記事内にバランスよく差し込むことで、ブログに「個性」や「柔らかい雰囲気」を加えることができます

前後のテキストを「区切る」役割にもなって、視覚的にも読みやすくなるよ!
 

そんな「会話ふきだし」について、3つのステップで解説していきます

  1. 「会話ふきだし」アイコンの設定方法
  2. 「会話ふきだし」の使い方(反対向きのやり方も)
  3. 「会話ふきだし」色やデザイン設定のカスタマイズ方法

ACTION AFFINGER6「箇条書きリスト」の使い方とカスタマイズ方法

 

ACTION AFFINGER6における「箇条書きリスト」というのは、実際の画面上で見ると…

 

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-01-a

↓(カスタマイズ後の一例)

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-01-b

 

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-02-a

↓(カスタマイズ後の一例)

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-02-b

 

↑ このようなもの

 

こうした「箇条書きリスト」は、ブログを訪れたユーザーに記事内容を整理してわかりやすく伝えるのに極めて便利です

ACTION AFFINGER6「マイボックス」の使い方とカスタマイズ方法

 

ACTION AFFINGER6における「マイボックス」というのは、実際の画面上で見ると…

AFFINGER6「マイボックス」の作り方と、色&デザイン設定のカスタマイズ方法 top-01-a

AFFINGER6「マイボックス」の作り方と、色&デザイン設定のカスタマイズ方法 top-01-b

↑ こういったものになります

 

この「マイボックス」というボックスデザインは…

  • クリック1つで呼び出し可能な「テンプレート」が、【基本・関連・ポイント・注意ポイント】など、実用的なデザインパターンで多数用意されている!

だけでなく…

  • それらのテンプレートをもとに、【タイトル・アイコン・背景・枠線】の色やデザインなど、ボックス1つ1つ自由に「カスタマイズ」できる!

という ”二段構え” の仕様になっています

AFFINGER6で使える色んなボックスデザインのなかでも、「最強に活躍するボックス」の1つだと思うよ!
 

カスタマイズした「マイボックス」の例 ↓

AFFINGER6「マイボックス」の作り方と、色&デザイン設定のカスタマイズ方法 top-02-a

AFFINGER6「マイボックス」の作り方と、色&デザイン設定のカスタマイズ方法 top-02-b

ACTION AFFINGER6「見出し付きフリーボックス」の使い方とカスタマイズ方法

 

ACTION AFFINGER6における「見出し付きフリーボックス」というのは…

AFFINGER6「見出し付きフリーボックス」の作り方とカスタマイズ方法・カスタマイズ例 top-01-a

AFFINGER6「見出し付きフリーボックス」の作り方とカスタマイズ方法・カスタマイズ例 top-01-b

↑ こういったものになります

「マイボックス」と並んで、AFFINGER6のボックスデザインのなかで「最も重宝するボックス」の1つ!
 

カスタマイズした「見出し付きフリーボックス」の例 ↓

AFFINGER6「見出し付きフリーボックス」の作り方とカスタマイズ方法・カスタマイズ例 top-02-a

AFFINGER6「見出し付きフリーボックス」の作り方とカスタマイズ方法・カスタマイズ例 top-02-b

 

「マイボックス」との組み合わせ例 ↓

AFFINGER6「見出し付きフリーボックス」の作り方とカスタマイズ方法・カスタマイズ例 top-03

ACTION AFFINGER6「Webアイコン」の使い方とカスタマイズ方法

 

ACTION AFFINGER6における「Webアイコン」というのは…

 

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-01-a

 

↓(カスタマイズ後の例)

 

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-01-b

 

↑ こういったものです

ACTION AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法

 

まず画像ファイルの貼り方そのものは、「WordPressテーマを問わず共通」でいたって簡単ですが…

  • 画像ファイルを貼るときに押さえておきたい、基本的なポイント
  • ACTION AFFINGER6で可能な、ブログに貼った画像のカスタマイズ

というのがいくつかあるので、実際に画像を貼り始めてしまう前に一通りチェックしておくことをおすすめします🐥

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 top-01

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 top-02

 

ちなみに【おまけ】として…

  • ブログに貼る画像のおすすめなサイズ(px)
  • ブログに貼る画像を「リサイズ=縮小」する方法

についても、あわせてご紹介しています🐣(重要です)

ACTION AFFINGER6「アイキャッチ画像」を設定するやり方とカスタマイズ方法

 

ブログにおける「アイキャッチ画像」とは、記事ごとの冒頭エリアに表示される…

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 top-01-a

 

↓(カスタマイズ後の一例)

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 top-01-b

 

こうした「見出し画像」のこと

記事タイトルと並んで、その記事の「顔」になる重要な部分だよ!
 

ちなみにこの「アイキャッチ画像」として設定した画像は、各記事ページの冒頭に「見出し画像」として表示されるだけでなく…

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 top-02

 

↑ このように、記事一覧エリアなどの「サムネイル画像」としても自動で反映されます

ACTION AFFINGER6「テキストリンク」&「画像リンク」の貼り方とカスタマイズ方法

 

WordPressブログにおける「テキストリンク」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…

 

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 top-01

 

↑ こういった、テキスト(青字部分!)内に埋め込まれたものを指します

 

そして「画像リンク」とは、そのまま「テキストリンク」の画像版です

つまり、「指定ページへのリンクが埋め込まれた画像」のこと!
 

ちなみに「テキストリンク」は、一般的に「ブルー」の文字色で表示されることが多いですが、ACTION AFFINGER6では任意の色にカスタマイズ可能です

ACTION AFFINGER6「ブログカード」の作り方とカスタマイズ方法

 

ACTION AFFINGER6における「ブログカード」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 top-01

↓(カスタマイズ後の例)

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 top-02

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 top-03

このように、「カード型」のデザインで作成できる機能です

本来の「リンク」機能としてはもちろん、記事のなかで「メリハリ」の役割にもなってくれるよ!

ACTION AFFINGER6「カスタムボタン」の作り方とカスタマイズ方法

 

ACTION AFFINGER6における「カスタムボタン」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…

 

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-01

 

このように「ボタン型」のリンクデザイン(リンクボタンと言います)で作成し、またその「カスタマイズ」もできる機能です

「お申し込みページ」へのリンクとかでよく見るデザインだね!
 

カスタマイズ例 ↓

 

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-02-a

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-02-b

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-02-c

【記事を公開する前に】WordPress「カテゴリー」&「タグ」の作り方と設定方法

 

WordPressブログにおける「カテゴリー」とは…

 

WordPress「カテゴリー&タグ」の作り方と、記事ごとで設定する方法 top-01-a

 

WordPress「カテゴリー&タグ」の作り方と、記事ごとで設定する方法 top-01-b

 

↑ このように、「記事ごとの冒頭エリア」や「サイドバーエリア」などに表示される…

「大小さまざまなジャンル」でブログ内の記事ページを分類する

ためのもの

例えば料理ブログなら、「和食」「フレンチ」「イタリアン」みたいな感じだね!
 

で、もう一方の「タグ」とは…

 

WordPress「カテゴリー&タグ」の作り方と、記事ごとで設定する方法 top-02

 

↑ このように、「記事ごとの末尾エリア」などに表示される…

「カテゴリーとはまた違った角度や属性」で記事ページを分類する

ための「さまざまなキーワード」を指します(例 時短レシピ / おすすめ料理グッズ )

 

こうした「カテゴリー」や「タグ」は、それぞれの記事ページが属している…

「ジャンル」や「キーワード」をユーザーに示すことができる

という役割に加えて、それらの「カテゴリーリンク」や「タグリンク」をクリックすると…

 

WordPress「カテゴリー&タグ」の作り方と、記事ごとで設定する方法 top-03-a

 

WordPress「カテゴリー&タグ」の作り方と、記事ごとで設定する方法 top-03-b

 

↑ このように、ブログ内で…

同じカテゴリーやタグに属している「記事一覧」ページ

に遷移することが可能です

つまり「カテゴリー」や「タグ」を追加していくたびに、それに該当してる記事群の「一覧ページ」が自動で作られるよ!

【記事を公開する前に】WordPress「INDEX」と「NOINDEX」とは?記事ごとの設定方法

 

「INDEX」と「NOINDEX」についてよくわかっていないまま記事を公開してしまうと、せっかく頑張って書いたその記事が…

  • Googleなどの「検索結果ページに記事が認識されない」ことで、検索からのアクセスがゼロになる
  • もしくは「検索結果に載らなくていい記事まで認識される」ことで、ブログ全体のSEOに悪影響を及ぼす

といった ”致命的なデメリット” にもつながりかねません

といっても、内容自体はちょー簡単だよ!
 

そんなWordPressブログにおける「INDEX」と「NOINDEX」について、3つのステップで丁寧に解説していきます

  1. 「INDEX」と「NOINDEX」とは?
  2. 「NOINDEX」をあえて使う具体例
  3. 記事ごとで「INDEX」or「NOINDEX」を設定する方法

【記事を公開する前に】WordPress「FOLLOW」と「NOFOLLOW」とは?記事ごと&リンクごとの設定方法

 

「FOLLOW・NOFOLLOW」を適当に設定してしまうと…

ブログの「SEO評価」に悪影響をもたらしてしまう

といったことにもなりかねません

「INDEX・NOINDEX」ほどじゃないけど、凄く大事な設定だよ!
 

そんなWordPressブログにおける「FOLLOW」と「NOFOLLOW」について、4つのステップで丁寧に解説していきます

  1. 「FOLLOW」と「NOFOLLOW」とは?
  2. 「NOFOLLOW」をあえて使う具体例
  3. 記事ごとで「FOLLOW」or「NOFOLLOW」を設定する方法
  4. リンクごとで「FOLLOW」or「NOFOLLOW」を設定する方法

【記事を公開する前に】WordPress「メタタイトル」と「メタディスクリプション」とは?記事ごとの設定方法と「文字数」の上限

 

「メタタイトル」と「メタディスクリプション」が適当な状態だと、記事の中身がどれだけ良くても…

それ以前に検索画面でクリックしてもらえない

といった機会ロスにもつながりかねない、とても重要な設定です

お店に例えるなら、メタタイトルとメタディスクリプションは入口の「看板」みたいなもの!
 

そんなWordPressブログにおける「メタタイトル&メタディスクリプション」について、3つのステップで丁寧に解説していきます

  1. メタタイトルとメタディスクリプションとは?
  2. 記事ごとで「メタタイトルとメタディスクリプション」を設定する方法
  3. メタタイトルとメタディスクリプションの「文字数」上限について

第7章「記事投稿」編における、そのほかの項目について【随時更新の予定です】

 

※そのほかの項目につきましては、現在「WING AFFINGER5」版から「ACTION AFFINGER6」版に工事中です。 あしからずご了承ください(随時更新予定です)

 

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS