アフィンガー5おすすめの使い方を3つご紹介!ブログ運営を効率化

 

本記事にピッタリな方

  • AFFINGER5をもっと効率的に使いたい
  • 便利なプラグインがあるってきいた

 

さるくん

分かりやすく教えてください!

 

とっておきが3つありますよ!

ばっちり解説しますね!

michi

 

本記事の内容

 

今回は上記3つを具体的にわかりやすく解説いたしますね。

 

メリットはそれぞれ下記です。

  • ステ子→執筆スピード30%アップ
  • jet→トップページ記事の自動カード化、インフィード広告にも最適(インフィードはデメリットもあり)
  • ブログカードを作る→記事を見た目をグッと上げる、内部リンクの確率を上げる

 

本記事を見ていただければ、アフィンガー5をもっと効率的に使えるようになりますよ!

 

すべて実用的です!ぜひ最後までご覧ください。
michi

 

※本記事ははAFFINGER5(アフィンガー5)専用です。

WordPressテーマ『AFFINGER5』をまだ購入されていない方はAFFINGER5と無料テーマの違いを1年使用している私が解説!を先にご覧ください。

 

アフィンガー5プラグイン『ステ子』の使い方

 

アフィンガー5プラグイン『ステ子』の使い方

 

まずは私がもっともおすすめするプラグイン『ステ子』のご紹介から。

 

ステ子のメリットは下記です。

記事の作成スピードが上がる

 

たった1つなんですが、めちゃくちゃ効果が大きいです。

 

有料なので私も初めはどうかな~と思っていましたが、使い始めたら『何で今まで入れてなかったんだろ』と後悔しましたね(笑)

 

体感ですが『ステ子』のおかげで記事作成のスピードが30%以上アップしました!!

間違いなく3,000円以上の価値はあります。

 

ステ子はウインドウズのイルカみたいなただのアシスタントじゃありません。

 

このあとすぐにステ子をご紹介いたしますね!

 

アフィンガー5プラグイン『ステ子』って何?

アフィンガー5プラグイン『ステ子』って何?

 

『ステ子』は有料WordPressテーマAFFINGER(アフィンガー)5専用のプラグインで価格は3,000円(税込)です。

 

機能をザックリ言うと『登録したテンプレートをすぐに呼び出せる』こと。

 

ブログを執筆しているとショートコードを使う時ってたくさんありますよね。

 

通常は下記の5ステップでやっているはずです。

  1. 『AFFINGERタグ』or『STINGERタグ』へ移動する。※AFFINGERタグ管理マネージャーorプラグインインストール済みが前提。
  2. 使いたいショートコードを検索する。
  3. ショートコードをコピーする。
  4. 投稿ページに戻る。
  5. 貼り付けする。

短くても20秒はかかるかと。

 

対して『ステ子』の場合は下記。

  1. 投稿ページ内(ココ重要)で『ステ子を呼ぶ』をクリックする。
  2. 使いたいショートコードを選ぶ。

たったこれだけなので3、4秒もあれば設置できます。

 

 

記事作成で使う回数はかなり多いので『ステ子』があれば時間短縮になるし、検索してもなかなか見つからないイライラからも解放されます。

 

機能としてはこれでほぼ全部なので有料はちょっとな~という方もいると思いますが、一度使ったらやめられないですよ。
michi

 

プラグイン『add Quicktag』との違い

プラグイン『add Quicktag』との違い

 

どうしても無料がいい!という方にほぼ同じ機能のプラグインで『add Quicktag』があります。

 

主な違いは下記です。

①『add Quicktag』は画像、表が登録できない。

②『add Quicktag』はカテゴリ分けができない。

 

①は一旦ショートコード化した上で『add Quicktag』に登録すれば解消できますが、カテゴリ分け出来ないのが意外と見づらいんですよね。

 

登録数が少なければ問題ないですが、増えてきたら『ステ子』の方が良いですね。

 

私の感覚ですが登録も『ステ子』の方が直感的にできますよ。
michi

 

プラグイン『ステ子』登録の仕方

プラグイン『ステ子』登録の仕方

 

まず『ステ子』をインストールしましょう。

 

ステ子(テンプレート管理プラグイン)[PRO]を開いてくださいね。購入からインストールまでの仕方も載っています。

 

それでは早速登録をしてみましょう。

 

ちなみに

ショートコード

HTML

テキスト

画像

などだいたい何でも登録できますよ。

 

画像にするとこちらです。すでに100個以上登録しているのでカテゴリ分けできるのが良いんですよね。

『ステ子』の登録例

 

登録の手順

登録はかんたんです。何度も言っていますが直感的にできますよ。

 

①ダッシュボードから『ステ子』→『記憶させる』をクリックする。

テンプレートの登録方法

  1. テンプレート名を入力する。
  2. 記憶したい内容を入力する。(例・アフィリエイトリンクのボタン、文・内部リンク付きの文・枠線)など
  3. 『カテゴリー名』を入力する
  4. 『公開』をクリックする。

 

登録はこれだけでOKです。

 

投稿ページなどで『ステ子を呼ぶ』をクリックすすればいつでも使えますよ。

『ステ子』の使い方

 

以上です。

 

Proから付いたおすすめの便利機能

Proから付いたおすすめの便利機能

 

現在ステ子はアップグレードされて『ステ子Pro』になっていますが、色々な機能が追加されています。

 

特におすすめなのが『囲むショートコード』といって元あるテキストを装飾する機能。

 

『囲むショートコード』を入力して有効化すると、テキストの位置を変えなくても間に挟んでくれるのでくれるのでとても便利。

 

例えば

①使いたいショートコードを登録する。

ショートコードを登録

  1. 使いたいショートコードを入力する。
  2. 『有効化』をチェックする。
  3. 登録する。

 

②投稿ページなど使いたい場所を開く。

  1. 装飾したいコンテンツを全選択する。
  2. 登録したテンプレートをクリックする。

 

③下記になればOK。

囲むショートコードを使用

 

こんな感じで細かいんですが便利ですよね。

 

ぜひ有効に使ってください。

ステ子の紹介はココまでです。次はjetに進みます。
michi

 

アフィンガー5プラグイン『JET』の使い方

アフィンガーJETでトップページを一瞬でカード化!18画像で解説フィンガー5ならJETがおすすめ! 記事一覧を一瞬でカード化

 

次はアフィンガー『JET』の使い方についてお話いたしますね。

 

JETを使えばトップページの記事一覧をすぐにブログカード化できます。

 

こんな感じです。

 

『JET』を使う前

カード化前

 

JETを使った後

カード化後

 

これがやりたかったって人多いんじゃないかな~と(私もそうでした)

 

ちなみにアフィンガーで、記事一覧をブログカード化するには2パターンがありまして

  1. HTML、CSSを理解して自力でやる
  2. 『JET』を使う

 

自力でやる場合はHTMLの知識が必要になるので、『JET』でサクッとやっちゃうのがおススメですよ!

 

JETは4,980円とちょっと高いんですが、望んでいたことが一瞬で出来たのでありがたかったですね。

むしろ悩んでいた時間で4,980円稼げたわ~って感じです。

 

本記事を見ていただければ、アフィンガー専用子テーマ『JET』を使い、すぐにトップページの記事一覧をカード化できますよ!

 

投稿内の内部リンクをカード化したい方はアフィンガー5で『ブログカードを作る』方法へお進みください。

 

アフィンガー『JET』の使い方は3ステップ

アフィンガー『JET』の使い方は3ステップ

それでは早速『JET』を使いましょう。

 

ステップを3つに分けます。

  1. 『JET』購入
  2. 『JET』のインストール
  3. 『JET』の設定

 

画像付きで順番に説明いたしますね。

 

ステップ1:『JET』購入

まずは公式サイトで『JET』を購入してダウンロードします。(価格は税込4980円)

※『アフィンガー5用』と『スティンガープロ2用』があるので間違えないようにしてくださいね。

 

①ZIPファイル『jet_affinger5_file.zip』を展開する。

『jet_affinger5_file.zip』を展開

 

②その中から『affinger5-jet-child.zip』を取り出す。

『affinger5-jet-child.zip』の取り出し

 

③使うのは『affinger5-jet-child.zip』

affinger5-jet-child.zipを使用

 

ステップ2:『JET』のインストール

①ダッシュボードから『外観』→『テーマ』をクリックする。

JETをインストール

 

②『テーマのアップロード』をクリックする。

 

③『JET』をインストールする。

  1. 『ファイルを選択する』をクリックする。
  2. 『affinger5-jet-child.zip』を開く。
  3. 『今すぐインストール』をクリックする。

 

④下記画面が出たあと『有効化』をクリックする。

JETインストール完了

 

以上でインストールが完了しました!続いて設定の説明です。

 

ステップ3:『JET』の設定

ダッシュボードから『JET』→『JET管理』をクリックしてください。

JET設定画面

 

おすすめはの設定は下記です。

  • トップ及びアーカイブページの第一投稿を大きくしない
  • 記事タイトルを省略しない
  • 記事カードに影(シャドウ)を追加
  • 記事カード回りの余白を大きくする(5px→10px)
  • 日付の表示位置を下にする
  • 記事一覧のサムネイルをフルサイズにする

 

最後に『save』をクリックして完了です。

 

ほかにも色々できるので、自分に合ったカスタマイズをしてみましょう!
michi

 

トップページのインフィード広告について

トップページのインフィード広告について

 

アフィンガー『JET』の特徴として、Googleアドセンスのインフィード広告との一体感があります。

 

下記が例です。

インフィード広告の例

 

ぱっと見『記事』と『アドセンス広告』との違いが分かりませんよね。

 

上記のように機能としては優れていますが、私の経験上トップページのインフィード広告はお勧めしません。

 

理由は2つ。

記事のコンセプトに影響が出てしまう

サイトスピードが落ちる

 

順番に説明いたしますね。

 

サイトのコンセプトに影響が出てしまう

トップページのインフィード広告は、サイトのコンセプトに良くも悪くも影響します。

 

なぜならGoogleアドセンスは広告の内容が自動的に決められてしまうから。

 

例えば

『ブログ』の記事が9個の中に『ファッション』の広告1個とか。

 

トップページはほとんどの方がサイトのコンセプトを統一しているはず。

その中でインフィード広告は違和感が出てしまうんですよね。

 

普段はGoogleアドセンスの広告ってラクなんですが、トップページではインフィードはあまりお勧めできません。

 

インフィードを使うなら、トップページ以外の例えば『記事の末尾』だとあまり違和感はないですよ。
michi

 

サイトスピードが落ちる

インフィード広告を入れるとサイトの表示スピードが落ちます。

 

最近はインフラ強化やPC、スマホの性能向上で影響を受けづらいですが、インフィード広告を入れすぎるとさすがにスピードが落ちますよ。

 

PageSpeed Insightsで調べた結果はこんな感じです。

 インフィード広告無しインフィード広告有り
PC9478
モバイル6745

※毎回同じ数値ではありません。

 

だいぶ違いますよね。

なかなか表示されないサイトはイライラするので注意しましょう。

 

それでも私はインフィード広告を作りたい! という方は「Googleインフィード広告」設定例(外部リンク)を参照してくださいね。
michi

 

どうしても無料でブログカード化したい方へ

どうしても無料でブログカード化したい方へ

 

『ブログカード化だけで4,980円も払いたくないよ!』という方はこちらの方法がおすすめです。

 

一応それっぽくはできますが、先にデメリットをお伝えします。

①記事末尾の『関連記事』はカード化できない。

②『新着記事』はカード化できない。

(厳密にはできるが自動表示されないので、いちいち手動で差し替える必要がある)

 

上記をふまえた上でご覧くださいね。

 

カード化の手順

ダッシュボードから『固定ページ』を開いてくださいね。

 

①『タグ』→『レイアウト』→『全サイズ』→『左右50%』をクリックする。

カード化の手順

 

②続いてレイアウト内をカード化。

カードスタイルを設定

  1. 赤枠内を選択する。
  2. 『スタイル』→『レイアウト』→『カードスタイル』をクリックする。

 

③下記部分に点線枠がでればOK(実際の色は黒)

点線枠がでればOK

 

④記事IDを入力する。

表示したい記事IDを入力

  1. 『カード』をクリックする。
  2. id="~~~"に表示したい記事IDを入力する。

 

⑤idの調べ方はダッシュボード内『投稿』をクリック後、下記を参照。

表示したい記事のIDをコピー

 

⑥『このテキストは最後に消して下さい』部分を消す。

『このテキストは最後に消して下さい』部分を消す

 

⑦プレビューで確認する。

プレビューで確認

 

これで完成です。

 

同じ要領で新着記事もカード化できますが、記事を投稿するたびに差し替えないといけないのが面倒ですね(JETなら自動)

 

JETの紹介はココまでです。次は『投稿』内の記事のカード化の説明をいたしますね。

 

jetはトップページ、これから説明にするのは記事内のカード化です。
michi

 

アフィンガー5で『ブログカードを作る』方法

アフィンガー5で『ブログカードを作る』方法

 

次はアフィンガー5投稿内で内部リンクをカード化する方法を紹介いたしますね。

 

後半ではブログカードの効果的な使い方も解説しています。

 

サクッと読めますのでぜひご覧ください。
michi

 

※トップページなどの記事一覧をブログカード化したい方はアフィンガー『JET』の使い方をご覧ください。

 

アフィンガーでブログカードを作るメリット

アフィンガーでブログカードを作るメリット

 

アフィンガーでブログカードを作るメリットは『目立つ』ことです。

 

実際にカード化したものが下記。

 

 

目立ちますよね!

 

デザイン性も高いしサムネイル画像もつけらます。

 

上記のようにブログカード化すると目立つので、リンク先に誘導できる確率を上げられますよ!

 

ブログカード化の方法【1分で完了】

ブログカード化の方法【1分で完了】

 

それでは早速ブログカード化してみましょう。

今回は一番かんたんなやり方を説明いたしますね。

 

※画像はクラシックエディタですが、ビジュアルエディタもほぼ同じやり方です。

 

『投稿ページ』を開いてください。

内部リンクをカード化

  1. 『カード』をクリックする。
  2. 赤枠内が表示される。

 

内容は下記。

①st-card myclass
CSSでの装飾に使う
⑦color
文字色(HTMLで指定)
②id
表示したい記事のID
⑧fontawesome
アイコンを文字として使う
③label
サムネイル画像に斜めがけでラベルを表示
⑨readmore
『続きを読む』の表示
④pc_height
PC閲覧時のカードの高さ
⑩thumbnail
サムネイル画像の表示
⑤name
記事タイトルの変更(未入力ならそのまま)
⑪type
様々な種別を指定する
⑥bgcolor
背景色(HTMLで指定)
  

 

色々ありますがとりあえず②、③だけ入力すればOKですよ。
michi

 

②idと③labelの入力方法

まずはidから。

 

①ダッシュボードから『投稿』をクリックし、リンクさせたい記事の『ID』をコピーする。

リンクしたいIDをコピー

 

②『id"~~~"』部分にidを貼り付ける(例【id="5373"】)

IDを入力

 

次にlabel。おすすめラベル名は『関連記事』。

ラベルを入力

下記のように【label="関連記事"】と入力する。

 

これで完成です。下記のように表示されますよ。

 

ちなみにアフィンガー5専用プラグイン『ステ子』で登録しておけば、いちいち変える必要がなくなるのでさらにラクになります!

 

ブログカードの効果的な4つの使い方

ブログカードの効果的な4つの使い方

 

次にブログカードの効果的な使い方を説明いたしますね。

 

具体的には次の4つです。

  1. 収益記事につなげる
  2. テキストリンクの後
  3. ユーザーの悩みが解決された後
  4. 記事の最後

 

私が150記事ほど書くなかで1番効果的でした。

 

順番に説明いたしますね。

 

収益記事につなげる

収益が発生する記事にリンクさせてくださいね。

 

そもそも内部リンクの最終的な目的は

『稼げる記事=収益記事』

に誘導することだからです。

 

ブログカードは目立つのでその確率を上げられます。下記のように使うのが良いかと。

①集客記事→収益記事 〇

②集客記事→集客記事→収益記事 〇

③集客記事→収益記事→集客記事 ✖

 

最終的なリンク先を『収益記事』=『稼げる記事』にするのがポイントです。

 

なんでもかんでも内部リンクを設置するのではなく、誘導先を計算してくださいね。

 

集客記事と収益記事の違いについては下記をどうぞ。

 

テキストリンクの後

ブログカードをテキストリンクの後に設置するのも良いです。

 

なぜならテキストリンクだけだと気づかない可能性があるから。

テキストリンク

メリット  自然な流れなので、ユーザーが読むのを邪魔しない。

デメリット 読み飛ばしされやすいので、リンクに気づかない可能性がある。

 

具体的な使い方は下記です。

 

 

このようにダブルで配置するとクリック率を上げられますよ。

 

ユーザーの悩みが解決された後

ユーザーの悩みを解決する文章の後にブログカードを設置したほうが良いですね。

 

なぜなら一番離脱しやすいポイントだから。

 

特に

  • やり方
  • 場所

の説明後。

 

ほとんどのユーザーは悩みを解決したらページを離れるので、そこを狙ってブログカードを設置するのはアリですね。

 

逆に『概要』や『基本的な情報』はブログの構成上重要ですが、この辺りは読み飛ばしされやすいので内部リンクを貼っても効果が薄いかと。

 

記事の一番最後

記事の一番最後にブログカードを設置するのも有効です。

 

最後まで読んでくれたユーザーはあなたの記事への興味が高いから。

 

他の記事も読みたいと思っているので、ブログカードを設置して誘導しましょう。

 

まとめ:アフィンガー5を効率化してユーザーファーストなブログを作ろう!

まとめ:アフィンガー5を効率化してユーザーファーストなブログを作ろう!

 

本記事をまとめます。

 

今回はアフィンガー5を効率的に使う3つの方法をご紹介いたしました。

 

すべてあなたのブログ運営に役立ちます。

 

効率化できた時間を有効に使って、ユーザーファーストなブログをもっと書いてくださいね!

 

下記の記事ではさらにAFFINGER5のトップページカスタマイズ方法を載せています。

関連記事
アフィンガーのトップページをカスタマイズ!【michiブログ風】
アフィンガーのトップページをカスタマイズ【michiブログ風】

 

今回は以上です。

-ブログを始めたい

© 2021 michiブログ