本記事にピッタリな方
- AFFINGERをもっと使いこなしたい！便利なプラグインがあるってきいたんだけど。
- ちなみに5から6にした場合はどうなの？ちゃんと使える？
記事の信頼性
- 私はブログ歴2年以上でして、ブログ収益月間500万円以上を得ています。
こんなお悩みを解決します。
本記事の内容
今回は上記3つを具体的にわかりやすく解説いたしますね。
メリットはそれぞれ下記です。
- ステ子→執筆スピード30%アップ
- jet2→トップページ記事の自動カード化、インフィード広告にも最適(インフィードはデメリットもあり)
- ブログカードを作る→記事を見た目をグッと上げる、内部リンクの確率を上げる
本記事を見ていただければ、アフィンガーをもっと効率的に使えるようになりますよ！
ちなみにアフィンガー5からバージョンアップした場合でもすべて使えるので安心してくださいね。
※本記事ははAFFINGER(アフィンガー)専用です。
現行WordPressテーマ『AFFINGER6』をまだ購入されていない方は【購入特典付き】AFFINGER6のメリット、デメリットをレビューをさきにご覧ください。
アフィンガー専用プラグイン『ステ子』の使い方
まずは私がもっともおすすめするプラグイン『ステ子』のご紹介から。
ステ子のメリットは下記です。
記事の作成スピードが上がる
たった1つなんですが、めちゃくちゃ効果が大きいです。
有料なので私も初めはどうかな～と思っていましたが、使い始めたら『何で今まで入れてなかったんだろ』と後悔しましたね(笑)
体感ですが『ステ子』のおかげで記事作成のスピードが30％以上アップしました!!
間違いなく3,000円以上の価値はあります。
ステ子はウインドウズのイルカみたいなただのアシスタントじゃありません。
このあとすぐにステ子をご紹介いたしますね！
アフィンガー専用プラグイン『ステ子』って何?
『ステ子』は有料WordPressテーマAFFINGER(アフィンガー)専用のプラグインで価格は3,000円(税込)です。
機能をザックリ言うと『登録したテンプレートをすぐに呼び出せる』こと。
ブログを執筆しているとショートコードを使う時ってたくさんありますよね。
通常は下記の5ステップでやっているはずです。
- 『AFFINGERタグ』or『STINGERタグ』へ移動する。※AFFINGERタグ管理マネージャーorプラグインインストール済みが前提。
- 使いたいショートコードを検索する。
- ショートコードをコピーする。
- 投稿ページに戻る。
- 貼り付けする。
短くても20秒はかかるかと。
対して『ステ子』の場合は下記。
- 投稿ページ内(ココ重要)で『ステ子を呼ぶ』をクリックする。
- 使いたいショートコードを選ぶ。
たったこれだけなので3、4秒もあれば設置できます。
記事作成で使う回数はかなり多いので『ステ子』があれば時間短縮になるし、検索してもなかなか見つからないイライラからも解放されます。
プラグイン『add Quicktag』との違い
どうしても無料がいい!という方にほぼ同じ機能のプラグインで『add Quicktag』があります。
主な違いは下記です。
①『add Quicktag』は画像、表が登録できない。
②『add Quicktag』はカテゴリ分けができない。
①は一旦ショートコード化した上で『add Quicktag』に登録すれば解消できますが、カテゴリ分け出来ないのが意外と見づらいんですよね。
登録数が少なければ問題ないですが、増えてきたら『ステ子』の方が良いですね。
プラグイン『ステ子』登録の仕方
まず『ステ子』をインストールしましょう。
ステ子（テンプレート管理プラグイン）[PRO]を開いてくださいね。購入からインストールまでの仕方も載っています。
それでは早速登録をしてみましょう。
ちなみに
ショートコード
HTML
テキスト
画像
表
などだいたい何でも登録できますよ。
画像にするとこちらです。すでに100個以上登録しているのでカテゴリ分けできるのが良いんですよね。
登録の手順
登録はかんたんです。何度も言っていますが直感的にできますよ。
step
1ダッシュボードから『ステ子』→『記憶させる』をクリックします
- テンプレート名を入力する。
- 記憶したい内容を入力する。(例・アフィリエイトリンクのボタン、文・内部リンク付きの文・枠線)など
- 『カテゴリー名』を入力する
- 『公開』をクリックする。
登録はこれだけでOKです。
投稿ページなどで『ステ子を呼ぶ』をクリックすすればいつでも使えますよ。
Proから付いたおすすめの便利機能
現在ステ子はアップグレードされて『ステ子Pro』になっていますが、色々な機能が追加されています。
特におすすめなのが『囲むショートコード』といって元あるテキストを装飾する機能。
『囲むショートコード』を入力して有効化すると、テキストの位置を変えなくても間に挟んでくれるのでくれるのでとても便利。
例えば
step
1使いたいショートコードを登録します
- 使いたいショートコードを入力する。
- 『有効化』をチェックする。
- 登録する。
step
2投稿ページなど使いたい場所を開きます
- 装飾したいコンテンツを全選択する。
- 登録したテンプレートをクリックする。
step
3下記になればオッケーです
こんな感じで細かいんですが便利ですよね。
ぜひ有効に使ってください。
注意
ステ子をGutenbergで使う時は『クラシック版の段落』にしてください。
これで使えるようになります。
アフィンガー6専用子テーマ『JET2』の使い方
次はアフィンガー『JET2』の使い方についてお話いたしますね。
JET2を使えばトップページの記事一覧をすぐにブログカード化できます。
こんな感じです。
『JET2』を使う前
『JET2』を使った後
これがやりたかったって人多いんじゃないかな～と(私もそうでした)
ちなみにアフィンガーで、記事一覧をブログカード化するには2パターンがありまして
- HTML、CSSを理解して自力でやる
- 『JET2』を使う
自力でやる場合はHTMLの知識が必要になるので、『JET2』でサクッとやっちゃうのがおススメですよ!
JET2は4,980円とちょっと高いんですが、望んでいたことが一瞬で出来たのでありがたかったですね。
むしろ悩んでいた時間で4,980円稼げたわ～って感じです。
本記事を見ていただければ、アフィンガー専用子テーマ『JET2』を使い、すぐにトップページの記事一覧をカード化できますよ！
※投稿内の内部リンクをカード化したい方はアフィンガーで『ブログカードを作る』方法へお進みください。
アフィンガー『JET2』の使い方は3ステップ
それでは早速『JET2』を使いましょう。
ステップを3つに分けます。
- 『JET2』購入
- 『JET2』のインストール
- 『JET2』の設定
画像付きで順番に説明いたしますね。
JETをすでに持っている方
ステップ1:『JET2』購入
まずは公式サイトで『JET2』を購入してダウンロードします。(価格は税込4980円)
JET2は下記の2つがあるので間違えないようにしましょう。
- AFFINGER6版
- STINGER PRO3版
今回説明するのはAFFINGER6バージョンです。
step
1ダウンロードした中から、ZIPファイル『affinger-jet-child.zip』を展開
step
2その中から『affinger-jet-child.zip』を取り出します
ステップ2:『JET2』のインストール
step
1ダッシュボードから『外観』→『テーマ』→『新規追加』をクリックします
step
2『テーマのアップロード』をクリックします
step
3『JET2』をインストール
- 『ファイルを選択する』をクリックします。
- 『affinger-jet-child.zip』を開きます。
- 『今すぐインストール』をクリックします。
※直接ドラッグ＆ドロップでもできます。
step
4下記画面が出たあと『有効化』をクリックします
以上で有効化できました!
続いて設定の説明です。
ステップ3:『JET2』の設定
ダッシュボードから『JET』→『JET管理』をクリックしてください。
※画面はJETのものですが、JET2も同じです。
おすすめはの設定は下記です。
- トップ及びアーカイブページの第一投稿を大きくしない
- 記事タイトルを省略しない
- 記事カードに影（シャドウ）を追加
- 記事カード回りの余白を大きくする（5px→10px）
- 日付の表示位置を下にする
- 記事一覧のサムネイルをフルサイズにする
最後に『save』をクリックして完了です。
トップページのインフィード広告について
アフィンガー『JET2』の特徴として、Googleアドセンスのインフィード広告との一体感があります。
下記が例です。
ぱっと見『記事』と『アドセンス広告』との違いが分かりませんよね。
上記のように機能としては優れていますが、私の経験上トップページのインフィード広告はお勧めしません。
理由は2つ。
記事のコンセプトに影響が出てしまう
サイトスピードが落ちる
順番に説明いたしますね。
サイトのコンセプトに影響が出てしまう
トップページのインフィード広告は、サイトのコンセプトに良くも悪くも影響します。
なぜならGoogleアドセンスは広告の内容が自動的に決められてしまうから。
例えば
『ブログ』の記事が9個の中に『ファッション』の広告1個とか。
トップページはほとんどの方がサイトのコンセプトを統一しているはず。
その中でインフィード広告は違和感が出てしまうんですよね。
普段はGoogleアドセンスの広告ってラクなんですが、トップページではインフィードはあまりお勧めできません。
サイトスピードが落ちる
インフィード広告を入れるとサイトの表示スピードが落ちます。
最近はインフラ強化やPC、スマホの性能向上で影響を受けづらいですが、インフィード広告を入れすぎるとさすがにスピードが落ちますよ。
PageSpeed Insightsで調べた結果はこんな感じです。
| インフィード広告無し | インフィード広告有り | |
| PC | 94 | 78 |
| モバイル | 67 | 45 |
※毎回同じ数値ではありません。
だいぶ違いますよね。
なかなか表示されないサイトはイライラするので注意しましょう。
どうしても無料でブログカード化したい方へ
『ブログカード化だけで4,980円も払いたくないよ!』という方はこちらの方法がおすすめです。
一応それっぽくはできますが、先にデメリットをお伝えします。
①記事末尾の『関連記事』はカード化できない。
②『新着記事』はカード化できない。
(厳密にはできるが自動表示されないので、いちいち手動で差し替える必要がある)
上記をふまえた上でご覧くださいね。
カード化の手順
ダッシュボードから『固定ページ』を開いてくださいね。
※画面はAFFINGER5のものですが、6でもやり方は同じです。
またGutenbergの場合は『クラシック版の段落』を利用しましょう。
これで同じようにできます。
ではやり方を説明しますね。
step
1『タグ』→『レイアウト』→『全サイズ』→『左右50%』の順でクリックします
step
2続いてレイアウト内をカード化します
- 赤枠内を選択する。
- 『スタイル』→『レイアウト』→『カードスタイル』をクリックする。
step
3下記部分に点線枠が出ればオッケーです
step
4記事IDを入力します
- 『カード』をクリックする。
- id="～～～"に表示したい記事IDを入力する。
step
5idの調べ方はダッシュボード内『投稿』をクリック後、下記を参照してください
step
6このテキストは最後に消して下さい』部分を消してください
step
7プレビューで確認しましょう
これで完成です。
同じ要領で新着記事もカード化できますが、記事を投稿するたびに差し替えないといけないのが面倒ですね(JET2なら自動)
JET2の紹介はココまでです。次は『投稿』内の記事のカード化の説明をいたしますね。
アフィンガーで『ブログカードを作る』方法
次はアフィンガーの投稿内で内部リンクをカード化する方法を紹介いたしますね。
後半ではブログカードの効果的な使い方も解説しています。
※トップページなどの記事一覧をブログカード化したい方はアフィンガー『JET2』の使い方をご覧ください。
アフィンガーでブログカードを作るメリット
アフィンガーでブログカードを作るメリットは『目立つ』ことです。
実際にカード化したものが下記。
-
-
【購入特典付き】AFFINGER6のメリット、デメリットをレビュー
目立ちますよね！
デザイン性も高いしサムネイル画像もつけらます。
上記のようにブログカード化すると目立つので、リンク先に誘導できる確率を上げられますよ!
ブログカード化の方法【1分で完了】
それでは早速ブログカード化してみましょう。
今回は一番かんたんなやり方を説明いたしますね。
※Gutenbergの場合は『クラシック版の段落』を利用しましょう。
これで同じようにカード化できますよ。
それでは説明していきますね。
まずは『投稿ページ』を開いてください。
- 『カード』をクリックする。
- 赤枠内が表示される。
内容は下記です。
|
①st-card myclass
|
CSSでの装飾に使う
|
⑦color
|
文字色(HTMLで指定)
|
|
②id
|
表示したい記事のID
|
⑧fontawesome
|
アイコンを文字として使う
|
|
③label
|
サムネイル画像に斜めがけでラベルを表示
|
⑨readmore
|
『続きを読む』の表示
|
|
④pc_height
|
PC閲覧時のカードの高さ
|
⑩thumbnail
|
サムネイル画像の表示
|
|
⑤name
|
記事タイトルの変更(未入力ならそのまま)
|
⑪type
|
様々な種別を指定する
|
|
⑥bgcolor
|
背景色(HTMLで指定)
|
②idと③labelの入力方法
まずはidからです。
step
1ダッシュボードから『投稿』をクリックし、リンクさせたい記事の『ID』をコピーします
step
2『id"～～～"』部分にidを貼り付けます(例【id="5373"】)
step
3次にlabelです。おすすめラベル名は『関連記事』です
下記のように【label="関連記事"】と入力します。
これで完成です。下記のように表示されますよ。
-
-
【購入特典付き】AFFINGER6のメリット、デメリットをレビュー
続きを見る
ちなみにアフィンガー専用プラグイン『ステ子』で登録しておけば、いちいち変える必要がなくなるのでさらにラクになります!
ブログカードの効果的な4つの使い方
次にブログカードの効果的な使い方を説明いたしますね。
具体的には次の4つです。
- 収益を生む記事につなげる
- テキストリンクの後
- ユーザーの悩みが解決された後
- 記事の最後
私が150記事ほど書くなかで1番効果的でした。
順番に説明いたしますね。
収益記事につなげる
収益が発生する記事にリンクさせてくださいね。
そもそも内部リンクの最終的な目的は稼げる記事に誘導することだからです。
ブログカードは目立つのでその確率を上げられます。下記のように使うのが良いかと。
①集客記事→収益記事 〇
②集客記事→集客記事→収益記事 〇
③集客記事→収益記事→集客記事 ✖
※集客記事＝ユーザーを集める記事。収益記事＝稼ぐ記事
最終的なリンク先を『収益記事』にするのがポイントです。
なんでもかんでも内部リンクを設置するのではなく、誘導先を計算してくださいね。
テキストリンクの後
ブログカードをテキストリンクの後に設置するのも良いです。
なぜならテキストリンクだけだと気づかない可能性があるから。
メリット 自然な流れなので、ユーザーが読むのを邪魔しない。
デメリット 読み飛ばしされやすいので、リンクに気づかない可能性がある。
具体的な使い方は下記です。
もし上記の内容が気になる方はAFFINGER6のメリット、デメリットを利用中の私が解説しますをご覧くださいね。
-
-
【購入特典付き】AFFINGER6のメリット、デメリットをレビュー
このようにダブルで配置するとクリック率を上げられますよ。
ユーザーの悩みが解決された後
ユーザーの悩みを解決する文章の後にブログカードを設置したほうが良いですね。
なぜなら一番離脱しやすいポイントだから。
特に下記のようなポイント。
- やり方の説明後
- 場所の説明後
ほとんどのユーザーは悩みを解決したらページを離れるので、そこを狙ってブログカードを設置するのはアリですね。
逆に『概要』や『基本的な情報』はブログの構成上重要ですが、この辺りは読み飛ばしされやすいので内部リンクを貼っても効果が薄いです。
記事の一番最後
記事の一番最後にブログカードを設置するのも有効です。
最後まで読んでくれたユーザーは、あなたの記事への興味が高いから。
他の記事も読みたいと思っているので、ブログカードを設置して誘導しましょう。
まとめ:アフィンガーを効率化してユーザーファーストなブログを作ろう!
本記事をまとめます。
今回はアフィンガーを効率的に使う3つの方法をご紹介いたしました。
すべてあなたのブログ運営に役立ちます。
効率化できた時間を有効に使って、ユーザーファーストなブログをもっと書いてくださいね！
今回は以上です。
