アフィリエイト広告を利用しています。

WordPress講座

AFFINGER6 記事の書き方【ブログ初心者向け】

AFFINGER6(アフィンガー6)で記事を書く方法について。

  • AFFINGER6 を使っているけど、できることが多くて取捨選択ができない
  • 記事の書き方を知りたい

上記のような方に向けて、実際に AFFINGER6 を使っている管理人が解説します。

\ 本気でブログ収益化できるテーマ! /

AFFINGER6

※限定特典が欲しい方は、特典付き購入ページ へ。

タカさん
記事を書いている管理人( @takafumi_net )の経歴は、以下の通りです。
  • WordPress歴、10年以上
  • 基本情報技術者資格所有者(ソフト開発の国家資格)
  • Withマーケ会員(2022年10月入会)

AFFINGER6 で記事を書く前に

AFFINGER6(アフィンガー6)で記事を書く前に、WordPress(ワードプレス)のエディタについて。

WordPress でブログを書いている人は、以下のどちらかのエディタを使っているかと思います。

  • クラシックエディタ(旧エディタ)
  • ブロックエディタ(WordPress 5.0 以降のエディタ)

AFFINGER6 は、ブロックエディタ、クラシックエディタ、どちらも対応しています。

タカさん
好きな方を使っていただいて構いません。

HTML、CSS が少しでもわかる方は、高機能なエディタは必要ないので、クラシックエディタでも問題ありません。

クラシックエディタを使うためには、専用プラグインをインストールする必要があります。

クラシックエディタ

これからブログを始める方は、無理してクラシックエディタを使う必要はありません。

ブロックエディタを使ってみましょう。

専用無料プラグイン、Gutenbergプラグイン2 をインストールして、有効化すれば、機能が拡張されます。

ただ、AFFINGER(アフィンガー)は歴史が長いので、昔から実装されている機能もあります。

これらの機能は、クラシックエディタの方が相性が良いです。

クラシックエディタ、いつまで使える?

クラシックエディタは、2021年末でサポートを終了すると言われていました。現状は、2024年までもしくは必要なくなるまで使えると公式で発表されています。コードを編集する人はこちらのエディタの方がシンプルで使いやすいので、無理してブロックエディタを使う必要はありません(使えなくなったら、その時考えましょう)。

AFFINGER6 記事の書き方【設定編】

AFFINGER6 記事の書き方【設定編】

タカさん
AFFINGER6 を使った、WordPress 記事の書き方を解説します。

記事を投稿するときの基本設定を解説します。

  • タイトルを設定する
  • パーマリンクを設定する
  • titleタグ、メタディスクリプションを設定する
  • アイキャッチ画像を設定する

タイトルを設定する

タイトルを設定する

※ クラシックエディタ使用時の画像

記事のタイトルを設定します。

タカさん
このタイトルは、HTML で言うと、titleタグではなく、h1タグになります。

パーマリンクを設定する

パーマリンクを設定する

※ クラシックエディタ使用時の画像

パーマリンクを設定します。

WordPress の初期設定が終わっていること(パーマリンク設定が投稿名になっていること)を前提で解説します。

もし、まだ初期設定が終わっていない方は、以下の記事をご参照下さい(重要)。

タカさん
パーマリンクは、半角英数字とハイフン(-)の組み合わせで設定します。

記事の内容がわかるような、英単語を組み合わせると、読者にもわかりやすくなります。

titleタグ、メタディスクリプションを設定する

titleタグ、メタディスクリプションを設定する

※ クラシックエディタ使用時の画像

AFFINGER6 は、titleタグ、メタディスクリプションを設定することができます。

タカさん
内部SEO対策として、設定することをおすすめします。

アイキャッチ画像を設定する

アイキャッチ画像を設定する

※ クラシックエディタ使用時の画像

アイキャッチ画像を設定します。

タカさん
サイズは、以下を推奨している方が多いです。
1,200px × 630px

デフォルトだと、記事タイトルの直下に表示されます。

このくらいの大きさがあれば、問題ない人がほとんどです。

Google が大きな画像は、幅 1,200 px 以上を推奨しています。

ここから、アイキャッチ画像の推奨サイズが決まっている可能性が高いです。

AFFINGER6 記事の書き方【本文装飾編】

AFFINGER6 記事の書き方【本文装飾編】

タカさん
AFFINGER6(アフィンガー6)の本文装飾について、解説していきます。
  • 見出しを設定する
  • 文字を装飾する
  • クリップメモを使う
  • 吹き出しを使う
  • 箇条書きリストを使う
  • 表(テーブル)を使う
  • 画像を挿入する
  • リンクを挿入する
  • マイボックスを使う

ブロックエディタとクラシックエディタで操作が大きく変わるので、どちらも紹介していきます。

見出しを設定する

見出しを設定する

※ ブロックエディタ使用時の画像
タカさん
見出しを設定する方法です。

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → 見出し

クラシックエディタなどで、コードを使う場合。

例えば、h2 は、以下のように設定します。

<h2>テキスト</h2>

見出しのデザインは、以下から設定することができます。

外観 → カスタマイズ → 見出しタグ(hx)/ テキスト

hタグ(見出し)の使い方について、詳しく知りたい方は、以下の記事をご参照下さい。

文字を装飾する

文字を装飾する

※ ブロックエディタ使用時の画像
タカさん
文字を装飾する方法です。

ブロックエディタの場合、コード以外の方法がおすすめです。

アンダーラインマーカーなら、以下の方法で装飾することができます。

テキスト選択 → さらにブロックツールを表示 → マイ細マーカーA(もしくは、マイ細マーカーB)

マイ細マーカーの色設定は、以下から変更することができます。

AFFINGER 管理 → Gutenberg 設定 → 全般 → カラー設定

ハイライトのマーカーなら、以下の方法で装飾することができます。

テキスト選択 → ブロック → テキストの色 → 文字背景色

クラシックエディタの場合、コードで装飾するのがおすすめです。

例えば、ハイライトのマーカー(赤)は、以下のコードです。

<span class="rmarker">テキスト</span>

文字の装飾(マーカーなど)について、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 で文字にマーカーを引く方法
関連記事AFFINGER6 で文字にマーカーを引く方法

AFFINGER6(アフィンガー6)で文字にマーカーを引く方法を解説します。 文字を装飾したい マーカーを引きたい 上記のような方に向けて、実際に AFFINGER6 を使っている管理人が紹介します。 ...

コードを調べる方法

AFFINGER6 には、記事作成パーツ確認用ダミーページというものが用意されています。クラシックエディタを使っている方でコードが知りたいという方は参考にすると良いです。

クリップメモを使う

AFFINGER6 でクリップメモを使う方法

※ ブロックエディタ使用時の画像
タカさん
クリップメモを使う方法です。

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → STINGER:メモ

クラシックエディタなどで、コードを使って呼び出す方法は以下の通りです(当サイトでよく使っているクリップメモ)。

[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]テキスト[/st-cmemo]

クリップメモを使う方法について、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 でクリップメモを使う方法【コードも解説】
関連記事AFFINGER6 でクリップメモを使う方法【コードも解説】

AFFINGER6(アフィンガー6)でクリップメモを使う方法を解説します。 クリップメモを使いこなしたい どんな種類があるのか知りたい 上記のような方に向けて、実際に AFFINGER6 を使っている ...

吹き出しを使う

吹き出しを使う

タカさん
吹き出しを使う方法です。

会話アイコンの画像は、以下から設定することができます。

AFFINGER 管理 → 会話アイコン

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → STINGER:会話ふきだし

クラシックエディタなどで、コードを使って呼び出す方法は以下の通りです(アイコン画像1)。

[st-kaiwa1]テキスト[/st-kaiwa1]

吹き出しを使う方法について、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 で吹き出しを使う方法【会話アイコン】
関連記事AFFINGER6 で吹き出しを使う方法【会話アイコン】

AFFINGER6 で吹き出しを使ってみたい 会話アイコンを挿入して、読者に親近感を与えたい 記事に緩急をつけたい 上記のような方に向けて、AFFINGER6 で吹き出し(ふきだし)を使う方法を解説し ...

箇条書きリストを使う

タカさん
箇条書きリストを使う方法です。

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → リスト

ブロックの設定を確認すると、色々な種類があるので好みのものを選びましょう。

クラシックエディタなどで、コードを使って呼び出す方法は以下の通りです(当サイトで使っている箇条書き)。

<div class="st-list-circle st-blackboard">
<ul>
<li>テキスト</li>
</ul>
</div>

表(テーブル)を使う

表(テーブル)を使う

※ ブロックエディタ使用時の画像
タカさん
表(テーブル)を使う方法です。

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → テーブル

クラシックエディタの場合、以下から呼び出すことができます。

テーブル

表(テーブル)のデザインは、以下から設定することができます。

外観 → カスタマイズ → オプション(その他)→ table(表)

画像を挿入する

タカさん
画像を挿入する方法です。

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → 画像

クラシックエディタの場合、以下から呼び出すことができます。

メディアを追加

画像は、サーバーにアップロードする作業もあるので、コードではなく上記の方法がおすすめです。

画像の幅は、記事の幅に合わせることが多いです。

もし、記事の幅(サイトの幅)を変更するなら、早い段階(できれば初期設定)でやっておくべきです。

AFFINGER6 の初期設定について、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 の初期設定【初心者向け】
関連記事AFFINGER6 の初期設定【初心者向け】

AFFINGER6(アフィンガー6)の初期設定について。 AFFINGER6 をこれから使っていきたい テーマを有効化した後にすべきことを知りたい 最初に設定しておきたいことを知りたい 上記のような方 ...

サイトの幅を調整する方法も解説しています。

リンクを挿入する

タカさん
リンクを挿入する方法です。

ブロックエディタの場合、以下からリンクを設定することができます。

テキストを選択 → リンク

クラシックエディタの場合、以下からリンクを設定することができます。

テキストを選択 → リンクの挿入 / 編集

リンク設定をクリックすると、詳細な設定(例えば、リンクを新しいタブで開くなど)が可能です。

アフィリエイトリンクなど、ボタンリンクを作成したい方は、以下の記事をご参照下さい。

AFFINGER6 でアフィリエイトリンクをボタン化する方法
関連記事AFFINGER6 でアフィリエイトリンクをボタン化する方法

AFFINGER6 を使っていて、以下のように思った方いないですか? アフィリエイトリンクをボタン化したい ボタン化して成約率をアップさせたい AFFINGER6 でアフィリエイトリンクをボタン化する ...

マイボックスを使う

タイトルボックス(マイボックス)を使う

※ ブロックエディタ使用時の画像
タカさん
マイボックス(タイトルボックス)を使う方法です。

ブロックエディタの場合、以下から呼び出すことができます。

ブロックを追加 → STINGER:マイボックス

クラシックエディタなどで、コードを使って呼び出す方法は以下の通りです(当サイトで使っているマイボックス)。

[st-mybox title="タイトル" webicon="st-svg-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="0" titleweight="bold"]テキスト[/st-mybox]

タイトル

テキスト

マイボックスについて、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 でマイボックスを使う方法
関連記事AFFINGER6 でマイボックスを使う方法

AFFINGER6(アフィンガー6)でマイボックスを使う方法を解説します。 タイトル付ボックスを使いたい マイボックスを使いこなしたい 上記のような方に向けて、実際に AFFINGER6 を使っている ...

ブログ記事の装飾をする目的を考える

AFFINGER6(アフィンガー6)は、記事の装飾が豊富な有料テーマです。

だからと言って、色をたくさん使って、ごちゃごちゃ装飾するのはおすすめしません。

記事の装飾をする目的には、以下のようなものが考えられます。

  • コントラストをうまく利用して、記事を読みやすくする
  • 表現を変えて、内容をわかりやすくする

色がたくさんあるとどうでしょうか?

何色が重要なのか、どんな意味があるのかわかりません(書いている方も管理が面倒になる)。

マーカーを使う場合、2色くらいまでに抑える方がわかりやすいです。

タカさん
色のルールもある程度決まっていた方が、読者はわかりやすいです。

吹き出しも適度なタイミングで使えば、親近感を表現することができます。

テキストでわかりにくければ、表(テーブル)や画像で表現すれば、理解しやすくなるかもしれません。

色々なジャンルで使える有料テーマなので、豊富な装飾があります。

取捨選択して、なるべくシンプルに使うようにしましょう。

最後に

今回は、AFFINGER6(アフィンガー6)で記事を書く方法について、解説しました。

タカさん
個人的に AFFINGER6 は、記事装飾の取捨選択ができる点が気に入っています。

他の有料テーマだと、我慢して使うか、CSS を編集して自作するかしないと実現できないことがあります。

AFFINGER6 = 難しい という印象が払拭されれば、幸いです。

\ ブログ収益化に苦戦している方へ! /

質の高いスクールを探す

※ スクール専門サイトへ移動します。

-WordPress講座