初心者でも使いこなす!AFFINGER6の使い方・初期設定入門ガイド

※記事内に商品プロモーションを含む場合があります。

悩める人

Affinger6にしましたが、私には難しくて困っています。

きつねコード

初めて有料テーマにするとその設定の多さに戸惑うのは当然です!ワードプレス初心者でも時間をかければ大丈夫です。Affinger6は一度慣れれば無双ツールになるので、効率的に初期設定や使い方をマスターしていきましょう!

この記事でわかること

  • Affinger6の初期設定の全て
  • Affinger6の基本の使い方
  • 効率的にAffinger6に慣れるためのコツ

この記事を書いているきつねコードは、ワードプレスを触り始めてから10年以上、このブログを作ってからも毎日ワードプレスを触っています。他のテーマも検討した結果、当サイトではAffinger6を利用しており、今後も使い続ける予定です。

Affinger6には大きなメリットがある反面、ちょっと慣れない部分も確かに存在するかもしれません。ですが、初心者さんでも必ず慣れますし、一度慣れれば本当に良いテーマですので、使い方を覚えていきましょう。

遠回りせずに、できるだけ近道できるように「最初にこれだけは覚えておきたい使い方」としてまとめています。

関連記事
現役ブロガーがAFFINGER6を徹底評価
AFFINGER6のメリット・デメリットや購入方法を現役ブロガーが徹底解説!

この記事でわかること Affinger6のどこが良いのか 実際に使っていて感じるAffinger6のメリットとデメリット Affinger6のデメリットを相殺す ...

前置きの説明を飛ばして、
すぐに「初期設定の手順・使い方の解説」を読みたい方は下のボタンから飛べます。

すぐに初期設定・使い方まで飛ぶ

人気テーマAffinger6とは

Affinger6は、昔から人気あるwordpressテーマの一つですが、

設定が難しくて、全然使いこなせていません。

初心者にはきついです。

といった声も少なからず聞こえてきます。

私もAffinger6ユーザーですが、確かに他のテーマに比べて使い方が難しいと感じる部分があることは否めません。

万人向けのテーマではないのかなと、正直に思っています。

ただし、収益を上げたい人、本気でやっていきたい人にとっては最適なテーマです。

それは間違いないので安心してください。初心者でも上級者でも、長期的に続けるなら私は「良い選択」だと思います。

一番大変なのは慣れるまでの最初の時間です。

その壁さえ一度乗り越えれば、万能ツールとして出来ることが増えます。1年後、2年後にサイトを大きく成長させていくことも見えてくるでしょう。

私も、Affinger6に変えてからモチベーションにより火がついたので皆さんも勢いよく進めていきましょう!

きつねコード

使い方を覚えれば、サイト・ブログ運営が楽しくなりますよ!

Affinger6は初心者には不向きですか?

このような質問がよくあります。

「初心者には難しい」とよく言われますが、確かにそれは言えるかもしれません。

ただ結論を先に言うと、

初心者だから、上級者だから、向き不向きがあるという話よりも、
収益化したいかどうか、本気でやっていきたいかどうかがAffinger6を使う判断軸になるのかなと感じています。

アフィンガーは、ワードプレスをある程度扱える中級者や、コードの知識が多少ある上級者であっても、初めてテーマを触るとその設定の多さに面食らってしまうケースは多いと思います。初心者さんであれば、なおさらですよね。

Affinger6を使ってみたけど私には難しすぎたので、他のテーマに移行しましたという方も実際にいます。

私の意見ですが、Affinger6が難しいと言われる理由は3つあります。

AFFINGER6が難しいと言われる理由

  1. 多機能すぎるから
  2. カスタマイズ性が柔軟すぎるから
  3. 古臭くなっている部分があるから

1と2に関してはメリットの裏返しです。Affinger6は超多機能で、カスタマイズ自由度もMAXに高い設計となっているため、その分最初慣れるまでは大変な面があります。

3に関しては、最近の他の人気テーマたちに比べるとAffingerの歴史は古く、それだけ実績があり、完成度も高い状態であることは間違いありませんが、一部古い設定が残っていたり、旧仕様が残っている箇所があります。これも慣れれば気になりませんが、最初戸惑うひとつの原因になっています。

(それらを加味しても、私はアフィンガーが一番良いかなと思っているので、Affinger6を使ってます。)

Affinger6にはデメリットを補っても有り余るぐらいの、メリットがあります。それは

カスタマイズ性が圧倒的に高いこと、収益化の道を探りやすいことです。

初心者さんともなると確かに使い方に苦労はしますが、結論

誰でも、時間をかければ必ず慣れます(笑)

根性論に聞こえるかもしれませんが、管理画面を触っていれば本当に扱えるようになります。

とにかく時間をかけて、テーマを触ってみてください。さわる時間に比例して、レベルも上がっていきます。
(私、プログラミングを人に教えたりもしてるのですが、wordpressも一緒です。とにかく触っている時間がものを言います。時間、量です。)

一度慣れれば、本気でやりたい人にとっては本当に良いテーマです。

大変なのは最初だけです。何もわからない、ちんぷんかんぷんな状態が一番つらいです。

そこさえ乗り越えられれば、メリットを十分に享受できるようになりますので、長期的に1年先を見てやっていきたい人はこのままAffinger6をマスターするのが私はおすすめです。

きつねコード

挫折しないでね笑!きっと大丈夫!

こんな人にはAffinger6は向かないかもしれません

一方で、下記が当てはまるケースは、他のテーマを検討した方が上かもしれません。

Affinger6があまり向かない人

  • シンプルな機能しか必要としない人
  • 趣味ブログ、収益化を目指さない人
  • とりあえずワードプレスを始めたい人
  • 使いやすさ重視の人
  • とにかく時短したい人
  • wordpressの勉強に時間をかけたくない、記事さえ書ければ良い人
  • カスタマイズの自由度はいらない人
  • サイト構成・デザイン・記事の装飾にはこだわらない人

もしそのような場合には、
無料テーマで、ブログならcocoon
無料テーマで、ホームページならLightning
有料テーマで、万人向けならswell

このあたりで選んでおくと、今は間違いはないかなと思います。

関連記事
wordpressのおすすめテーマはこれ
素人でも集客力を上げる!おすすめのWordPressテーマ6つ

結論:私がおすすめするWordPressテーマはこれ! 最初に、結論をお伝えすると 私が本気でおすすめしているのは「Affinger6」というテーマになります。 ...

関連記事
cocoonからswellに移行する全手順
初心者向けに分かりやすく解説!cocoonからswellに移行する全手順

他のテーマからswellへ移行する場合でも、確認することとしては大体同じ手順となります。ご参考にしてみてください。 結論:cocoonとswellどっちが良い? ...

ワードプレス初心者がAffinger6をマスターするためのコツ

ここからは、「ワードプレス初心者がAffinger6を使っていくならば」という視点で、

3点ほど、先にポイントを解説します。

Affinger6を使うための考え方①サイト構成とデザインは最初ミニマム、後からリッチに

早い話が、

最初にあまり手をかけすぎない

やり方が私はおすすめです。

ご自身の性格にもよるとは思いますが、初めからあまりこだわりすぎるとドツボにはまることが多いです。Affinger6は、特にそうです。

ぶっちゃけSEO的にはデザインはあまり関係ないですので、良いコンテンツを作ることがまずは優先です。

優先順位は、「デザイン<コンテンツ」です。

これは絶対なので、忘れないようにしましょう。

デザインにこだわりを入れて、個性あるサイトを作っていくで、間接的にSEOにも好影響が出てきたり、ファンがついてきたり、自分のモチベーションや愛着も上がってきたりするなど、もちろん良いことはたくさんあります。

ただし、最初からそれをやる必要はありません。徐々に作り込めば良いので、段々とテーマにも慣れてきた段階で気になった箇所を一つずついじっていく方が効率的だと思います。

サイトの見た目や構成は、初期は最低限の状態からスタートする形で全然OKです。

Affinger6を使うための考え方②記事を書く際の自分の型を早く完成させる

テーマをAffinger6にしてから、まず最初に目指すべきは

記事コンテンツを最低限書き始められる状態

です。

まずは、上述した通り「サイト構成」や「サイトデザイン」を最低限の状態に整えましょう。

次に、もう記事を書き始めるわけですが、Affinger6で使える機能やデザイン装飾は異常に多いです。

私も今でも、「え、こんなのあったの?」と思うほどです。

ですが全部の機能を使うわけではありませんよね。私自身もそうですが、自分がよく使う装飾を決めたら、大体毎回同じパターンでそれを使い回すはずです。

記事を書くときの、自分の「型」を固めましょう。

どの機能を使うのか、どのブロックを使うのか、どういう色とカスタマイズにするのか、最初の5記事〜10記事を書く間にお気に入りの形を決めていきましょう。

最初は、いろいろと目移りして迷ってしまいますが、「デザイン<コンテンツ」であることを思い出してください。

読者ユーザーさんが読みやすければ、それほど大差はありませんので、一刻も早く記事コンテンツを量産できる体制を整えましょう

コツコツ記事を書きながら、装飾などに関しては運営途中でもし気になれば、都度変えていくのでも良いですね。

Affinger6を使うための考え方③息抜きの時間として新しい使い方を覚える

大切なことなので繰り返しますが、

サイト・ブログで成果を出すためには、何よりもコンテンツが最重要

でしたね。

そのため、時間配分としてもコンテンツ制作に一番時間を割き続けるべきです。

だから、最初はミニマムでサイトの状態を整えましょう、という話になります。

とはいえ既にサイト運営している方は分かると思いますが、淡々と記事コンテンツを作っていると、飽きてくるというか(笑)、疲れてくる瞬間もありますよね。

個人的には、記事づくりと記事づくりの合間の息抜きがてらの作業として、サイト構成を変えてみたり、デザインを変えてみたり、まだ使っていない機能を試してみたりすると良いかなと思います。

徐々にデザインやサイト構成を最適化させていくことも、もちろん成果にプラスになります。

色々と調べながら触っていると勉強にもなるので、wordpressを扱うレベルもどんどん上がっていきますよ。

きつねコード

まずは最低限で整えて、徐々にリッチにしていくってことだね。

Affinger6の購入手順・他テーマから移行する手順

これからAffinger6を導入する方は、こちらの記事を参考に購入・インストール・移行を行なってください。
どのテーマから変更するときも、確認すべき手順としては大体同じになります。

関連記事
cocoonからaffinger6への移行手順
次のレベルに押し上げる!cocoonからAffinger6に移行する手順完全ガイド

他のテーマからaffinger6へ移行する場合もチェック項目は大体同じですので、参考にしてみてください。 結論:cocoonとaffingerどっちが良い?移行 ...

\ 当サイトで利用のおすすめテーマ/

Affinger6の販売ページへ

※インフォトップの決済システムから購入できます。(会員登録→購入)


【保存版】Affinger6の初期設定と使い方

ここからは、Affinger6の初期設定と使い方について解説していきます。

私自身も当初は結構苦戦しましたので(笑)
できるだけ時間のロスを減らせるように説明を構成しています。

既に出来ている部分は読み飛ばしながら、順番にご確認してみてください。
参考になれば嬉しいです。

・初心者さん向けに丁寧に書いています。情報は取捨選択してください。
・全機能を網羅しているわけではありませんが、この記事で全体像は掴めます。

つまづくポイントは、大体みんな同じだと思いますので、それらを最初に潰してしまいましょう。

きつねコード

では、いきましょう!

Affinger6初期設定と基本の使い方①付属プラグインもインストールしているかをチェック

アフィンガー付属のプラグインは入れましたか?

まず初めにアフィンガーでは、専用プラグインなるものがたくさん存在します。

専用プラグインをインストールするだけでAffinger6の機能がさらに増えていく仕組みとなっています。

欲しい場合は基本的には全て有料になりますが、「必ず買うべきプラグイン」というもの無いので、心配しなくて大丈夫です。もし今後欲しいものが出てきた時だけ、都度買い足す形でOKです。

ただし、注意点があります。それは、付属プラグインの存在です。

Affinger6(通常版14800円)を単体購入すると、おそらく専用プラグインの無料お試し版なども付属で付いてきたかと思います。

セット購入された方もいるので、人にもよると思いますが、私の場合はこんな感じですね↓。
(※中身やファイル名は、セット・時期などにもより異なります。

Affinger6をパソコンにダウンロードした時のフォルダです。
テーマ本体以外に合計4つの付属プラグインが含まれています。。

affinger6に付属の無料お試しプラグイン
付属の無料プラグインたち

zipファイル形式のものがプラグインです。

無料で付いてきたプラグインはとりあえず全部入れましょう!

wordpress管理画面「プラグイン」≫「新規プラグインを追加」から1つずつzipファイルをインストールしていけばOKです。
(※この事例では、4回インストールすることになります。

affingerの専用プラグインをwordpressにインストールする

特に「Gutenberg用プラグイン」のst-blocks.zipは必ず入れたほうが良いと思います。これを入れないと、ブロックエディターで編集したときにカスタマイズするための設定項目が出てきませんので。

きつねコード

私も最初購入したときは「ん?なんだこれ」と混乱しましたが、とりあえず付いてきたプラグインも全部導入しちゃいましょう!

Affinger6初期設定と基本の使い方②パーマリンク設定を更新しよう

Affinger6導入後にパーマリンク設定の「変更を保存」を1回クリックすればOKです。

初期設定として、アフィンガーを導入したら管理画面「設定」≫「パーマリンク」を開いて、「変更を保存」ボタンを1回クリックしましょう。

affinger6に変更した後のパーマリンク初期設定

URLを正常に生成するための作業になります。.htaccessファイルの一部が更新されます。

パーマリンク設定を変更してください、という意味では無いです。あくまで保存ボタンを1回押すだけです。

既にサイト運営をしている人は、途中でパーマリンク設定を変更するとURLが変わってしまい、それはNGですので気をつけてください。設定はそのままで、変更を保存するだけです。

サイトを作ったばかりの方は、設定を変えても構いません。1番のおすすめは「投稿名」です。

関連記事
wordpressのパーマリンクとは?設定方法とおすすめ設定
wordpressのパーマリンクとは?設定方法やおすすめの設定も紹介

wordpressにあるパーマリンク設定とは何か ワードプレスには「パーマリンク設定」というのがあります。 パーマリンクというのは、webサイト内の投稿ページや ...

Affinger6初期設定と基本の使い方③管理画面「設定」を再確認しよう

設定を変更する必要は特にありませんが、管理画面の「設定」をひと通り再チェックしておきましょう。

テーマをAffinger6へと移行した方は、特に設定を変える必要はありません。間違った箇所がないかを一応見ておきましょう。

wordpress管理画面の「設定」

サイトのタイトル」「キャッチフレーズ」「WordPressアドレス」などありますのでざっと全て流し見してください。

特に、下記2点は必ず確認しましょう。

  • 管理画面「設定」≫「一般」≫「タイムゾーン」が「東京」になっているか
    • PVモニターの動作に影響するので、東京にしてください。
  • 管理画面「設定」≫「表示設定」≫「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていないか
    • チェックありだとnoindexになるので絶対ダメです。チェックなしが正解です。

ちなみに、サイトを作ったばかりの方は下の記事でwordpressの初期設定について解説していますので、最低限の項目を設定してください↓。(「メニュー」と「ウィジェット」に関しては、当記事でやるので無視してOKです。)

関連記事
wordpress初期設定の完全ガイド
WordPress初期設定まとめ!私が記事を書き始めるまでにやったこと完全ガイド

この記事でわかること wordpressの基本の初期設定 記事を書き始める前にやるべきこと この記事を書いているきつねコードは、ワードプレスを触り始めてから10 ...

Affinger6初期設定と基本の使い方④アフィンガーの基礎知識を理解しよう

Affinger6の設定は、「AFFINGER管理」「外観≫カスタマイズ」「メニュー」「ウィジェット」この4つで構成されていることを理解しましょう。

まず前提となる知識を頭に入れておくと、全体像が見えてきて作業がやりやすくなります。

Affinger6にテーマを変えましたが、私には難しすぎて心が折れそうです。

ですよね…。わかります。

確かに、アフィンガーは他のテーマと比べても設定項目が多いですが、初期設定で触るのは下記4つがほとんどです。

AFFINGER6の構成要素

  1. AFFINGER管理
  2. 外観≫カスタマイズ
  3. メニュー
  4. ウィジェット

ここですね↓

affinger管理画面の主な設定場所

実は、アフィンガーのサイトデザインサイト構成は、この4つの設定でほぼ全て成り立っています。

Affinger6では設定があちこちに散らばっているように見えますが、探す場所は限られています。

ですので、

設定を変える場所としては「外観≫カスタマイズ」「AFFINGER管理」もしくは「外観≫ウィジェット」「外観≫メニュー」のどこかにある

とだけ覚えておいてください。

外観カスタマイズAFFINGER管理はテーマ特有の設定ですが、ウィジェットメニューに関しては他のwordpressテーマと使い方は全く同じです。

これら4つの使い方をマスターすれば自由にカスタマイズしていくことができるということですね。

きつねコード

ややこしく見えるけど、実はシンプルなんですよ。

Affinger6初期設定と基本の使い方⑤サイト構成とデザインを決めていこう!

サイト構成とデザインの大枠を固めていきましょう。

まず初めに、サイトの全体的な構成とデザインを決める方法についてご説明します。

Affinger6では、テーマを導入した初期はこのように非常にシンプルな画面となります。

最初は真っ白!

これは、どんな方向にでもカスタマイズができるようにこうなっていると考えてください。

真っ白なので、柔軟に変えていくことができます。

ちなみに、Affinger6ではHTMLやCSSを使って行う、中・上級者が行うようなカスタマイズも比較的やりやすいです。構造的にいじりやすいように作られているからです。自由度の高さを感じるので、将来的な変更にも対応できますね。

さて、サイト全体のデザインを決めていく方法は主に4つの手段があります。ここは大切なので、よく確認してください!

Affinger6で全体のデザインを設定する方法

  1. 一から自分の手で設定していく柔軟性高い、手間はかかる
    • 細かい設定をとにかく1つ1つ重ねていくやり方です。
    • 時間をかけてもよい、こだわりたい人におすすめです。
  2. デザインパターン機能を使う柔軟性高い、手間は楽
    • 用意された項目からテーマ・カラーを選び、ワンクリックでサイト全体に適応させるやり方です。超簡単です。その後に各所カスタマイズしていくことで個性も出せます。
    • とりあえず最低限の見た目に整えたい人におすすめです。
  3. デザイン済みデータ綺麗なサイトになる、導入の手間とお金が少しかかる
    • 用意されたサンプルから好きなものを選び、自分のサイトに導入するやり方です。スタートデザインとしてプロ並みの綺麗なサイトが完成します。
    • 最初から完成度の高いデザインを求める人におすすめです。3000円ほど必要です。
  4. デザインカード綺麗なサイトになる、導入の手間は少しかかる
    • 用意されたサンプルから好きなものを選び、自分のサイトに導入するやり方です。1つ上の”デザイン済みデータ"とほぼ同じ機能ですが、新機能なので導入手順が簡素化されてます。スタートデザインとして綺麗なサイトが完成します。
    • 最初から完成度の高いデザインを求める人におすすめです。無料でできます。

ご自身の作りたい方向性に合わせて、どれでも好きなやり方を選べばOKです。

ただし、3つ目と4つ目の「デザインデータデザインカード」に関しては、Affinger6の"初期状態"で利用することを想定されています。そのため実質的に運営途中で使うことはできなくなる(使っても良いけど設定が面倒くさい)ので、どれが良いかを始めにチェックしておきましょう。

きつねコード

ちなみに、きつねは2つ目でやっています。
もし最初から綺麗なサイトを完成させたいなら「デザインカード」がおすすめかな。

それぞれの方法について、簡単に確認しますね。

AFFINGER6のデザイン決定方法①一から自分の手で設定していく

1つ目は、デザインを一から自分の手で設定していくやり方です。

手間はかかりますが、自分の好きなようにカスタマイズが可能です。

方法としてはとても単純で、

テーマで用意されている設定項目を1つ1つ細かく見ていき、好きに設定していくだけです。

それらを積み重ねていけばサイト全体のデザインやサイト設計が決まってきます。

アフィンガーの設定は、下の4つで出来ているのでしたね。
これらを編集していくことになります。

AFFINGER6の構成要素

  1. 管理画面「AFFINGER管理」
  2. 管理画面「外観」≫「カスタマイズ」
  3. 管理画面「外観」≫「メニュー」
  4. 管理画面「外観」≫「ウィジェット

こんな人向け

  • デザインやサイト構成にこだわりたい
  • 個性あるサイトにしたい
  • 時間をかけてもよい
  • Affinger6の使い方を早めに全て把握したい

具体的にどんな設定項目があるのかについては、次の「カスタマイズしてみよう」の章で確認します。

AFFINGER6のデザイン決定方法②デザインパターン機能を使う

2つ目は、デザインパターン機能を使うやり方です。

手間は非常に簡単で、かつ柔軟なカスタマイズも可能です。

他のwordpressテーマにもよくありますが、Affinger6にもいくつかのデフォルトのデザインパターンが用意されています。

基本的には、すべて「シンプル」なデザインとはなりますが、

ボタンをワンクリックするだけで、サイト全体に統一感のあるデザインが適用されます。

デザインパターンを適用した後は、各所細かい設定を1つ1つ変えていくことも可能ですので、変えたければいつでもカスタマイズしていくこともできますよ。

こんな人向け

  • 統一感のあるデザインを自分で作る自信がない。
  • とりあえず、時間をかけずに最低限の見た目を整えたい。
  • Affinger6の使い方を細かく覚えるのは、これからで良い。

私も、当初はこの方法で始めています。簡単ですので、手順を解説します。


  • step.1

    管理画面「AFFINGER管理」の「全体設定」を開きましょう。
    選ぶ項目は2つだけ。「カラーパターン」と「デザインパターン」のみです。それぞれ好きなものを選びsave」ボタンをクリックします。

    affinger管理「デザインパターン」と「カラーパターン」の設定

    そうすると、すぐにサイトに適用されます
    今回はピンク(やさしい)と、キューティーを選んでみました。

    どれを選んでも大体下と同じようなパターンです。色と、見出しなどの雰囲気が若干変わります。

    affinger6で「デザインパターン」と「カラーパターン」を適用した事例

    シンプルですが、統一感があって綺麗ですよね。

    記事ページの中に入っても、このようにデザインが適用されています↓

    affinger6で「デザインパターン」と「カラーパターン」を適用した事例。記事ページ

    ご自身のやりたい方向性にもよると思いますが、これだけでも必要最低限で、十分綺麗なサイトですので、このまま記事制作をスタートさせても全然大丈夫です。

    あとは、次章「カスタマイズしよう」で紹介するように好きなように修正していけば良いです。

    例えば、記事ページの見出し(h2、h3、h4)なども簡単に変更することができます。

    最初に全て見る必要はないので、運営しながら気になったタイミングで変えていくと良いかもしれませんね。


きつねコード

僕は、デザインにあまりこだわらないのでこの方法で。
一瞬で終わりました笑

AFFINGER6のデザイン決定方法③デザイン済みデータを導入する

3つ目は、デザイン済みデータを導入するやり方です。

プロのデザイナーが作ったようなサイトデザインを自分のサイトにも反映させることが出来ます。

導入するためには、やや面倒な手間と費用(※専用プラグイン2980円が必要)はかかりますが、最初からプロ並みの綺麗なデザインでスタートしたい人にはとても魅力的だと思います。

事例を眺めていると本当に綺麗なものが多いですね。

affinger6のデザイン済みデータの例
affinger6のデザイン済みデータの例
affinger6のデザイン済みデータの例
affinger6のデザイン済みデータの例

デザイン済みデータのサンプルページ≫

上のようなデザインを自分のサイトでも実現することができます。

こんな人向け

  • プロ並みのサイトデザインを最初から実現したい
  • 自分で1つ1つ設定していくのは自信がない
  • 3000円の費用負担なら問題ない

実は、「デザイン済みデータ」の導入には、下記4つの設定をそっくりそのまま自分のサイトに読み込む、ということをやります。

  1. AFFINGER管理の設定
  2. 外観≫カスタマイズの設定
  3. ウィジェット機能の設定
  4. メニュー機能の設定

そうです。

ここまで読み進めている方は、なんとなく理解できてきましたよね。

お察しの通り、デザイン済みデータ(と次で説明するデザインカードも)実は、自分でゼロから設定しても全く同じデザインを再現することは可能です。

つまり、Affinger6を使いこなすと、これぐらい綺麗なものが誰でも作れますよ」というお手本でもあるということですね。

HTMLやCSSなどの高度なカスタマイズが含まれているわけではありません。

全てアフィンガーの設定によって成り立っています。

そのため、「デザイン済みデータ」の方法が使えるのは、affinger6初期状態の人だけです!設定がリセットされたり、上書きされるため、既に運営途中の人は実質的に使えません。(初期状態に戻っても良いなら使ってもOKですが、調整が面倒です。)

関連記事
AFFINGER6デザイン済みデータの導入方法
AFFINGER6初期設定「デザイン済みデータ」を使ってサイトデザインを導入する方法

この記事でわかること Affinger6「デザイン済みデータ」機能とは何か デザイン済みデータを使うメリット デザイン済みデータを使用して、サイト全体に綺麗にデ ...

AFFINGER6のデザイン決定方法④デザインカードを導入する

4つ目は、デザインカードを導入するやり方です。

綺麗に整ったサイトデザインを自分のサイトに反映させることが出来ます。

これも上で紹介した「デザイン済みデータ」と仕組みはほぼ一緒です。こちらは2023年に導入された新機能になります。導入の方法は比較的簡単で、費用はかかりません。
("簡単"といっても、見た目を調整する手間はややかかります)

デザイン済みデータにするか、このデザインカードにするかは、
事例を見てみて、「好きなデザインがある方を選ぶ」という選び方でも良いと思います。

とにかくまず、気に入ったデザインを探してみましょう。

affinger6のデザインカードの例
affinger6のデザインカードの例
affinger6のデザインカードの例
affinger6のデザインカードの例

デザインカードのサンプルページ≫

これも綺麗ですよね。導入すればすぐに自分のサイトでも実現できます。

デザイン済みデータと比べると「ややシンプルかな」という印象を僕は持ちますが、構成やデザイン的にはほぼ一緒です。デザインカードもAFFINGERの設定だけで出来てるわけですので、当然といえば当然ですね。

こんな人向け

  • スタートデザインとして、ある程度整った状態から始めたい
  • 自分で1つ1つ設定していくのは自信がない
  • 費用をかけたくない。できるだけ簡単に導入したい

「デザインカード」も使えるのは基本、affinger6初期状態の人だけです!多くの設定が上書きされるので、気をつけてください。(設定は1つ1つ見ていけば戻せるので、まあいいやって人は使用しても良いです)

関連記事
AFFINGER6デザインカードの導入方法
AFFINGER6初期設定「デザインカード」で簡単にサイトデザインを導入する方法!

この記事でわかること Affinger6「デザインカード」機能とは何か デザインカードを使うメリット デザインカードを使用して、サイト全体にデザインテンプレを適 ...


以上で、Affinger6のサイト構成とデザインを決める4つの方法について解説しました。

まとめます。

  1. 一から自分の手で設定していく
  2. デザインパターン機能を使う
  3. デザイン済みデータを導入する
  4. デザインカードを導入する

どの方法で進めても構いません。

復習になりますが、結局のところ

・管理画面「AFFINGER管理」
・管理画面「外観」≫「カスタマイズ」
・管理画面「外観」≫「メニュー」
・管理画面「外観」≫「ウィジェット」

これら4つの設定でもってアフィンガーのサイトを作っていく、自由にカスタマイズしていくという点ではどれも共通しています。

多機能ですが、実は見るべき箇所は限られているので1つ1つ使い方をマスターしていけば必ず大丈夫です。

きつねコード

次はどんな設定があるのか、具体的に見てみます!

Affinger6初期設定と基本の使い方⑥カスタマイズしてみよう!

サイト構成サイトデザインを自由にカスタマイズしてみましょう。(任意なので飛ばし読みでも可)

(※ここで言う"カスタマイズ"とは、Affinger6の設定で用意されている項目のことです。HTML・CSS・PHPなどを使用した高度なカスタマイズではありません。

この章では、「Affinger6の設定で何ができるのか」「どのようにカスタマイズを進めていくのか」を具体的に解説します。

全機能を紹介するのはムリなので、主要な機能をかいつまんでご紹介します。

「これは使える!」と思える設定を見つけたらご自身でやってみましょう。最初に全て把握する必要性は全然ないので読み飛ばしても大丈夫ですよ。

これから紹介するのはあくまで「設定の事例」ですので、どの設定を使うかはご自身で取捨選択してください。

重要な項目から順番にいきます。

AFFINGER6のカスタマイズ①メニューを調整(ヘッダー・フッターなど)

ここは皆さん作業が必要なはずです。
アフィンガーの構成要素4つのうちの1つ管理画面「外観」≫「メニュー」ですね。

「メニュー」機能では、ヘッダーメニューやフッターメニューを自由自在に作ることができます。

使い方は、アフィンガー特有ではなくてどのwordpressテーマを使っていても同じです。便利な機能なので、理解があいまいな人は必ずここでマスターしておきましょう!


  • step.1

    「メニュー」基本の使い方をまとめると、下の図の通りです↓

    affinger6のメニューの使い方
    1. メニューを選ぶ
      • まず最初にどのメニューを編集するのかを選んでから作業します。
      • 青文字の”新しいメニューを作成しましょう"から新規作成もできます。
      • メニューは何個でも作れます。
    2. ページを追加する
      • 画面左から、画面右へと挿入することで「メニュー項目」となります。
      • お好きな固定ページ、投稿ページ、カテゴリーページ、カスタムURLなどなんでも使えます。
      • 画面右へと挿入した後は、ブロックを動かして自由に順番を変えられます。
      • ↑上の事例のように階層構造にすることも可能です。
      • 項目の▼マークを押すと、「項目名」(ラベル)も書き換えられます。
    3. メニュー表示場所を選ぶ
      • 最後に、今選択しているメニューをどこに出すのかを、項目にチェックを入れます↓。
      • 複数にチェックを入れてもOKです。
      • この項目だけは、テーマ機能に依存します。つまり、wordpressテーマによって異なります。
    affinger6のメニュー、トップページに関わる設定項目

    ちなみにきつねコードの場合は、
    ・ヘッダー用メニューを作って、「ヘッダーメニュー」と「スマホスライドメニュー」に設定
    ・フッター用メニューを作って、「フッターメニュー」と「スマホフッターメニュー」に設定

    しています。


以上で、メニューの基本的な使い方は完了です。

ヘッダーとフッターには、メニューを表示させる人が多いと思いますので、まずはそこを調整すると良いかなと思います。

メニューは、ヘッダー・フッター以外の場所にも結構自由な使い方ができますので、慣れてきたら模索してみても良いかもしれませんね。

きつねコード

メニュー機能は重要です!

AFFINGER6のカスタマイズ②ウィジェットを調整(サイドバーなど)

ここも皆さん作業が必要になるはずです。
アフィンガーの構成要素4つのうちの1つ管理画面「外観」≫「ウィジェット」です。

「ウィジェット」機能では、サイドバーをはじめ、スクロール広告、記事上、記事下、固定記事上、固定記事下、トップページ上など様々な場所に好きなパーツを挿入することができます。自由自在にサイト構成を変更できます。

ウィジェット機能もとても便利な機能で、マスターするのは必須と言えます。

1つ上で解説した「メニュー機能」と同様に「ウィジェット機能」も、どのwordpressテーマでも使い方は同じです。

ただし、「利用できるパーツ」と「挿入できる場所」は、テーマ機能に依存します。Affinger6では選択肢がとても多いので、それだけ出来ることの幅も広がります。


  • step.1

    ウィジェット機能の基本の使い方は、下の図の通りです↓

    affinger6のウィジェット設定画面

    使い方としては、画面の左にある好きなウィジェットブロックを、画面の右にある好きな場所へと挿入するだけです。

    ブロックを挿入した後は、▼マークをクリックすると各種設定を編集することができます。
    (用意されている設定項目は、ブロックによって異なります。)

    affinger6のウィジェット設定画面

以上で、ウィジェットの基本の使い方は完了です。

どんなウィジェットブロックが使えるのか」「どの場所に出すことができるのか」は、気になるものを1つ1つ実際に挿入して確かめてみるのが一番早いです。

最初から全て把握する必要は全然ありません。試しに色々とさわりながら、理解を進めていきましょう。

まずは、「サイドバートップ」や「スクロール広告用」あたりに好きなブロックを入れてみると良いかなと思います。

きつねコード

ウィジェットも重要です!

関連記事
wordpressのウィジェット使い方ガイド
初心者のためのWordPressウィジェット設定完全ガイド

この記事でわかること ウィジェットの使い方 利用する「wordpressテーマ」によってウィジェット機能は変わる 効率的にウィジェットを活用するコツ ウィジェッ ...

AFFINGER6のカスタマイズ③「AFFINGER管理」の設定

次は、アフィンガーの構成要素4つのうちの1つ管理画面「AFFINGER管理」の設定です。
ここでは、主にサイト構成に関わる設定が用意されています。

カスタマイズするタイミングとしてはいつでも良いので、この章は読み飛ばしても構いません。

なお管理画面「AFFINGER管理」のSEOに関連する初期設定については、別途のちほど取り上げます。

ここでは、”見た目”に関係するAFFINGER設定だけを、いくつかピックアップしてご紹介しますのでご参考まで。

きつねコード

Affinger6ではたとえばこんなことができるよ!という紹介です↓

トップページに記事スライドショーを出す

トップページに記事のスライドショーを設置するカスタマイズです。お好みでどうぞ。

Affinger6で設置できるスライドショーは数パターン存在します。設置を検討している方は、下の記事で全パターンをチェックしてみてください。

関連記事
AFFINGER6スライドショー機能の設定方法
ブログの印象を変える!AFFINGER6でスライドショーを設置する全ステップ

この記事でわかること Affinger6「スライドショー」機能の活用事例 Affinger6で記事スライドショーをTOPページに入れる方法 Affinger6で ...


  • step.1

    一例だけご紹介します。
    管理画面「AFFINGER管理」の「ヘッダー」をクリックします。

    affinger6管理画面「affinger管理」の「ヘッダー」

    ヘッダーに記事をスライドショーで表示する」という項目にチェックを入れて、保存しましょう。

    affinger6「ヘッダーに記事をスライドショーで表示する」

    これだけで、トップページのヘッダー部分に「記事スライドショー」が表示されます↓。自動で一発でこんな綺麗なパーツができるなんて、すごいですね!

    affinger6「記事のスライドショー」を入れた状態

    これは投稿記事が出ているわけなので、もちろん記事が複数入った状態で確認してください。また、各記事の「アイキャッチ画像」が出てくるので、毎回綺麗な画像を用意する必要がありますね。



トップページを1カラムにする

トップページを1カラムにするカスタマイズです。

カラムとは、「列」のことです。サイドバーを削除して、1列で見せたい人は試してみてください。


  • step.1

    管理画面「AFFINGER管理」の「トップページ」をクリックします。

    affinger6「AFFINGER管理」のトップページ設定

    「トップページのレイアウト」を「1カラム」に変更してみましょう。

    affinger6でトップページのレイアウトを「1カラム」に変更

    そうすると、元々はこのようなデフォルト状態だったものが、

    affinger6でデフォルトの状態

    トップページが、1カラムになります↓。

    affinger6でトップページを1カラムにした状態

    1カラムにしているワードプレスサイトはたまに見かけます。広々と使えるので、これはこれで見やすいですよね。

    他の設定との組み合わせで色々できるので、あとは1カラムにした状態で何を表示させていくかということにもなります。



トップページにタブ式カテゴリー記事一覧を出す

トップページに「タブで切り替えができる記事一覧」を設置するカスタマイズです。

任意のカテゴリーごとに、記事の一覧を見せたい人は試してみてください。設置を検討している場合は、下の記事でより詳しく説明しています。

関連記事
AFFINGER6でタブ式カテゴリー記事一覧の設定
トップページの見た目を変える!AFFINGERタブ式カテゴリ記事一覧の設置方法

この記事でわかること Affinger6「タブ式カテゴリー記事一覧」の使い方 Affinger6「タブ式カテゴリー記事一覧」の活用事例 この記事を書いているきつ ...


  • step.1

    管理画面「AFFINGER管理」の「トップページ」をクリックします。

    affinger6「AFFINGER管理」のトップページ設定

    まず「タブ式カテゴリー記事一覧をフロントページに表示する」にチェックを入れてください

    次に、カテゴリーA、B、C、Dの箇所に出したいカテゴリーのID番号を入れていきます。

    affinger6のタブ式カテゴリー記事一覧の設定

    wordpressにおける『カテゴリーID』というのは、自動で割り振られる固有の番号のことです。
    管理画面「投稿」≫「カテゴリー」から確認することが可能です↓

    wordpressにおけるカテゴリーIDの確認

    今回の事例では、カテゴリーの3、4、5(wordpress、cocoon、ブログ運営)をタブ式カテゴリーの設定に入れてみました。

    そうするとこのようにトップページに、カテゴリーごとにタブで切り替えができる記事一覧が表示されます。
    素人っぽいサイトから印象がだいぶ変わりますね。

    affinger6でタブ式カテゴリー記事一覧を表示した状態

    先ほど上で紹介した「1カラム」などで併せて使っても良いかもしれませんね。



ヘッダー下カードを出す

トップページにヘッダー下カード(4枚のリンクカード)を表示させるカスタマイズです。

Affinger6ユーザーは結構使っている人が多い印象です。おすすめのリンクを置きたい場合に便利です。画像の設定などに手間取りそうであれば、下の記事で詳しく解説しています。

関連記事
affinger6のヘッダーカードの設定方法
初心者でも簡単!AFFINGER6ヘッダーカードの設定&カスタマイズ方法

この記事でわかること Affinger6「ヘッダーカード」機能の使い方 ヘッダーカード機能で可能なカスタマイズについて ヘッダーカードに使用する画像サイズについ ...


  • step.1

    こちらが、「ヘッダー下カード」です↓。最大で4枚まで設定できます。

    affinger6のおすすめカード

    管理画面「AFFINGER管理」の「ヘッダー下/おすすめ」をクリックします。
    一番上にあるヘッダーカードが設定箇所です。

    affinger6のヘッダーカード

    イメージ画像」と「テキスト」と「記事URL」をそれぞれ入れていくだけで設定完了です!

    私の場合は実際こんな感じの設定になっています↓

    affinger6の

    画像については、私はcanvaという無料ツールで自作しました。
    ロゴ素材でも風景画像を使ってもなんでも好きな背景画像で構いません。

    テキスト部分にある、<br>というコードは改行を意味します。
    役立つので知っておくと良いでしょう。(wordpressのどこでも使えるわけではありませんが、htmlが効く場所であれば使えるので。)
    もちろん「サブテキスト」の項目を利用しても構いません。


  • 画像URLを調べるには?

    画像のURL」の調べ方が分からない方は、管理画面「メディア」をクリックしてみてください。使いたい画像を選択、もしくはアップロードします。

    wordpress管理画面「メディア」

    画像を選択したら、「ファイルのURL」という箇所が画像URLになります。ここを全文コピーして貼り付ければOKです。

    wordpress「画像のURL」の調べ方


トップページやサイドバーにおすすめ記事一覧を出す

一つ上で紹介した「ヘッダー下カード」ととてもよく似ていますが、「おすすめ記事一覧」をトップページなどに表示するカスタマイズです。

これも見せたいおすすめ記事を目立つ場所に出すことができます。デザインが違うので好きな方を使えば良いでしょう。

関連記事
affinger6のおすすめ記事一覧の設定方法
AFFINGER6でおすすめ記事の表示方法を初心者向けに解説!

この記事でわかること Affinger6「おすすめ記事一覧」機能の使い方 おすすめ記事一覧機能で可能なカスタマイズ内容 おすすめ記事一覧を、サイドバーもしくは任 ...


  • step.1

    こちらが、「おすすめ記事一覧」です↓。ヘッダ下カードとは見え方が全然違いますね。

    affinge6のおすすめ記事一覧

    管理画面「AFFINGER管理」の「ヘッダー下/おすすめ」をクリックしてください。

    affinger6「affinger管理」の「ヘッダー下/おすすめ」

    「おすすめ記事一覧」が設定箇所です。

    表示するタイトルテキスト」と「記事のID」と「表示したい場所」を選択しましょう。

    affinger6のおすすめ記事一覧の設定

    今回の事例では、記事ID52、40、54の3つの記事をおすすめとして出してみます。

    affinger6のおすすめ記事一覧の設定

    おすすめ記事一覧をトップページに出すと、このようになります↓。

    affinger6でおすすめ記事一覧を表示した状態

    サイドバーに出したり、記事ページの下に出すことも可能です。

    また、ショートコード[st-osusume]と書いてあげると、記事内でもウィジェットでもどこでも表示させることが可能です。(ただし、出す場所によっては表示デザインが崩れる場合はあります。)


  • 記事IDを調べるには?

    記事のIDを調べるには管理画面「投稿一覧」でチェックすることができます。

    IDの項目が存在しないときは、表示オプションから変更できます。



以上、「AFFINGER管理」の中で見た目に関わる設定を5つほど取り上げました。

できることが多くてなんだかややこしいですか…?

最初から完璧を目指す必要もないですし、好きな風にカスタマイズしていけば大丈夫ですよ。

きつねコード

アフィンガーでは色々できますね笑

AFFINGER6のカスタマイズ④「外観≫カスタマイズ」の設定

アフィンガーの構成要素4つのうちの最後の1つは管理画面「外観」≫「カスタマイズ」です。

カスタマイズするタイミングとしてはいつでも良いので、この章も読み飛ばしても構いません。

外観のカスタマイズではデザインを細かく変更することができます

外観≫カスタマイズで開く画面は、”テーマカスタマイザー”と呼ばれる画面になりますが、Affinger6のテーマカスタマイザーは設定項目がめちゃくちゃ多いです。

それだけデザインを変更できる箇所も多いということです。

最初から全て見る必要はないので、ここも運営しながら気になった所を都度修正していくやり方で良いかなと思います。

きつねコード

こんなことができるよ、という機能をいくつか挙げるよ

サイト全体に背景画像を入れる

サイト全体に背景画像を入れるカスタマイズです。好き嫌いが分かれると思うので、お好みで検討しましょう。

印象がガラッと変わります。ポイントは用意する「画像・素材」ですね。


  • step.1

    管理画面「外観」≫「カスタマイズ」をクリックします。

    先ほどまでは「AFFINGER管理」を触っていましたが、今回からは「外観のカスタマイズ」ですね。
    wordpressで、『テーマカスタマイザー』と呼ばれる画面が開きます。

    wordpress管理画面「外観のカスタマイズ」

    この通り↓、他のテーマに比べるとAffinger6のテーマカスタマイザー画面はめちゃくちゃ項目が多いのが特徴です。
    今回は「背景画像」を開いてみましょう。

    affinger6テーマカスタマイザー「背景画像」

    使い方自体は、すごく簡単ですのでどれも直感的に操作できます。
    サイトの背景に使いたい画像を選んでみましょう。

    affinger6テーマカスタマイザー「背景画像」

    例えば、下のような画像を設定すると、このようにサイト全体に背景が適応されます↓。一気にデザインが変わります。
    (背景はサイト下のフッターまでずーっと続いています。)

    affinger6「背景画像」を設定した状態

    もしこの機能を使うのであれば、「web壁紙 フリー素材」などで検索すると良い感じの背景素材はいっぱい出てきます。
    風景画像とかも使えなくもないですが、切れた部分で永遠に繰り返されるので上手くハマらない可能性が高いと思います。



記事ページの見出しデザインを変える

「見出し」のデザインを変更するカスタマイズです。

なんとh2〜h5までそれぞれ設定することができます。おそらくAffingerユーザーは皆んな使っていると思うので、ここはチェックした方が良いでしょう。


  • step.1

    管理画面「外観」≫「カスタマイズ」を開き、今回は「見出しタグ」をクリックします。

    affinger6テーマカスタマイザーの「見出しタグ」

    テーマカスタマイザー画面では画面右側のサイト内をクリックすればそのままページ遷移することも出来ます。
    今回は記事ページの中を見たいので、どれかの記事をクリックしてください。

    wordpressのテーマカスタマイザー画面

    見出しデザインをh2からh5までそれぞれ変えることが出来ます。項目がたくさん用意されているので、好きなようにポチポチと選んでみてください。

    スタイル、文字色、背景色、ボーダー色などの組み合わせで様々変わります。

    affinger6

    見出しのデザインはどの記事でも影響してきますので、見た目の印象としては結構大事です。

    お気に入りのデザインになるようにh2からh5までそれぞれ自分で設定してみると良いでしょう。



Affinger6のテーマカスタマイザーは設定項目が本当に多いですよね(笑)

一部には、管理画面「AFFINGER管理」の設定にも関わってくる項目もありますので、

サイト構成サイトデザインに関しては、管理画面の「AFFINGER管理」と「外観≫カスタマイズ」を相互に確認しながらカスタマイズを進めてください。1つ1つ細かい設定を重ねることで個性あるサイトが完成していきます。

HTMLやCSSなどを使った高度なカスタマイズは基本的にはしなくても大丈夫です。

まずは用意されている設定でどんなことができるのかを時間の許す限り見てみると良いでしょう。

最初はややこしいですが、触っているうちに段々と分かってくるのでまず手を動かしてスタートしましょう。満足いくサイトが完成したら、感動ものですよ。

きつねコード

挫折しないでね(笑)

Affinger6初期設定と基本の使い方⑦「AFFINGER管理」の初期設定(SEO関連)

管理画面「AFFINGER管理」の、SEOに関する設定変更を行いましょう。

ここまで、”見た目"に関係する設定はいくつか見てきました。

この章では、管理画面「AFFINGER管理」のSEOに関連する初期設定をしていきます。

当サイトでは、下記の通りに設定していますので、真似したい方は踏襲してみてください。(任意です)

ただし乱暴な言い方をすると、そのままでもAffinger6のSEO対策はバッチリ出来ています。設定がデフォルトの状態でも別に問題はないので、お好みで対応してください。設定うんぬんよりも、コンテンツの方が百倍重要です。


  • 【AFFINGER管理】

    管理画面「AFFI NGER管理」を開いてください。
    上から順番に、設定をデフォルトから変更する箇所だけを見ていきます。

    当記事で扱わなかった設定に関しても、ご自身で自由に変更して構いません。見た目は好きになるように徐々にカスタマイズしていけばOKですよ。

    wordpress管理画面「AFFINGER管理」

    なお、あくまでもSEO的な観点での初期設定なので基本的には全て「任意」です。

    きつねコード

    ガンガン進めていきましょう!


  • 【AFFINGER管理≫全体設定】

    AFFINGER管理の「全体設定」ページを開いてください。
    「フォントの種類」の下記項目を変更してください。

    ・「Googleフォントに"display=swap"を付与」にチェック
    ・「記事タイトル・見出し・ウィジェットボタンなど」には「使用しない」を選択

    AFFINGER管理「全体設定」のフォントの種類

    特殊なフォントを使わないようにするための設定です↑。

    前提知識として、特殊なフォントを読み込んだり、より大きな画像に変えたり、枚数を多く画像を読み込んだり、”動きやアニメーション”を数多く入れたりすることは、「サイトスピード」を落とすことにつながります。サイトスピードが落ちれば、もちろんSEO的にはマイナスです。(あくまで速度だけの話)

    デザインサイトスピードの兼ね合いは悩ましいところですが、「何もしないシンプルなページが一番早い」ということは知識として念頭においても良いかなと思います。まあ、そこまで神経質になる必要はありませんが…。

    きつねコード

    次へ!


  • 【AFFINGER管理≫ヘッダー】

    AFFINGER管理の「ヘッダー」を開いてください。
    下記を変更してください。

    ・「TOPページのh1タグをサイト名に変更する」にチェック

    AFFINGER管理「ヘッダー」の「TOPページのh1タグをサイト名に変更する

    サイトトップページにおいて、サイト名をh1タグに入れるための設定です↑。

    サイトの各ページにおいて、h1、h2、h3…と、見出しタグの構成が整っていることはSEOにおいてとても重要です。

    きつねコード

    次へ!


  • 【AFFINGER管理≫投稿・固定記事】

    AFFINGER管理の「投稿・固定記事」のページを開いてください。
    「この記事を書いた人」の項目を下記のように変更してください。

    ・「この記事を書いた人を有効化する」にチェック
    ・「この記事を書いた人及びライター情報を固定ページでも表示する」にチェック
    ・プロフィール情報にhtmlタグを許可するにチェック
    ・著者情報を表示するにチェック

    見た目に関する項目は、任意です。どちらでも良いです。

    AFFINGER管理「投稿・固定記事設定」の「この記事を書いた人」の設定

    「著者プロフィール」を記事ページに出すための設定です。

    チェックを入れると、こんな感じになります↓

    affinger6でこの記事を書いた人を表示した状態

    「誰が書いているのか」を記事ページ上か下に明示することはSEOにおいてとても重要です。

    ちなみに、プロフィールの中身はここから変更できます↓

    ・管理画面「ユーザー」≫「プロフィール」→表示名とプロフィール文
    ・管理画面「外観≫カスタマイズ」≫「オプション」≫「プロフィールカード」→プロフィール画像


    また、AFFINGER管理「投稿・固定記事」ページの下へ進みこの設定も変更しましょう。

    ・「投稿一覧(管理画面)にサムネイル・文字数を表示」にチェック

    AFFINGER管理「投稿・固定記事設定」の「投稿一覧に文字数を表示」の設定

    こうすると管理画面で投稿記事の「文字数」が見えるようになります。

    affinger管理画面の投稿一覧で文字数を確認

    キーワードによって全然違いますが、「上位表示するために必要な文字数」みたいなものは暗黙で大体決まっていたりするので、その辺の感覚は磨いたほうが良いと思います。

    きつねコード

    次へ!


  • 【AFFINGER管理≫SNS・OGP】

    AFFINGER管理の「SNS・OGP」のページを開いてください。
    ページ一番下にある「トップページアイキャッチ画像」を設定しましょう。

    ・「トップページアイキャッチ画像」にイメージ画像をアップロードする

    AFFINGER管理のトップページ「OGP画像」の設定

    これは、トップページのOGP画像のことです。OGP画像とは、SNSなどでシェアされたときに出てくるイメージ画像です。何も設定するものがなければ、自分のサイトのTOPページをキャプチャして設定してあげれば良いでしょう。

    SNS運用に力を入れている方は、この辺りはきちんと調べて対応しましょう。私はやってないので、力を抜いています笑

    きつねコード

    次へ!


  • 【AFFINGER管理≫SEO】

    AFFINGER管理の「SEO」を開いてください。
    下記の通りに設定してください。ここは重要なので対応必須です。

    ・「トップタイトルを書き換え」にサイト名
    ・(メタキーワードは昔の古い設定なので今は不要)
    ・「トップ用のメタディスクリプション」に説明を書く(キーワードも適度にねじ込む)
    ・「パンクズのHOMEを書き換え」にサイト名をねじ込む
    ・「記事タイトル末尾に付くタイトル変更」にサイト名短縮版を入れる(任意)
    ・「カテゴリーをindexしない」にチェック(任意)

     (チェックするとnoindexになります。低品質だと思う場合はnoindexが良いです)
    ・「タグをindexしない」にチェック(任意)
    ・「日本語パーマリンクを自動変換する」にチェック(任意)

    AFFINGER管理「SEO」の各種設定

    SEO周りの設定なので、真似したい人は真似してください。

    続けて、「構造化データ」の項目も設定しましょう。これもめちゃくちゃ重要です。

    ・「Webサイト情報を出力する」にチェック
    ・「投稿・固定ページで記事情報を出力する」にチェック

    AFFINGER管理「SEO」の構造化データ設定

    構造化データとは、検索エンジン向けに送る情報のことです(サイトの見た目的には何も変わりません。)

    SEOにも関係するので、チェックを入れておく方が良いかと思います。

    一番下に、「表示速度優先(β)」の項目が用意されていますよね↑。
    結論から言うと、「使用しない」のがおすすめです。理由は一度「有効化」を押すと、確かに早くはなりますが、一部の機能が使えなくなるからです。これを有効化すると、機能よりも速度を優先して、勝手にあちこちの設定が変更されるという仕組みになっています。

    よく使用される「スクロール広告」なども機能しなくなります。
    (そして、元に戻すボタンがないので設定を戻すのが非常にめんどくさい笑。)
    どこがどう設定が変わったのかをいちいち探さなければなりません。なので使用しない方が無難です。

    Affinger6のサイトスピード(高速化)について

    余談ですが、affinger6のサイトスピードは遅くはありませんが、モバイルに関してはなかなかスピードを上げにくい一面もあるかなと私は思います。コンテンツ内容にもよりますが、私の場合は当初モバイル60点~70点代をうろうろしていました。PCが80点〜90点代ぐらいでした。

    ページスピードインサイト
    (測ったことのない方は、自分のサイトのURLを入れれば測ることができます)

    さすがに50点を下回っていると低いと思いますが、ある程度の数字が出ていれば十分とは言えるので、無理に急いで何かする必要は全然ありません。コンテンツ次第で上位表示は可能です。気になる方は、別途SEOやサイトスピードについて調べて対応するのが良いかと思います。後回しでも良いです。

    きつねコード

    次へ!


  • 【AFFINGER管理≫Google広告/AMP】

    AFFINGER管理の「Google広告/AMP」のページを開いてください。
    外部ツールとの連携を行いましょう。

    ・アナリティクスコード(GA4と連携する)
    ・サーチコンソールHTMLタグ(サーチコンソールと連携する)

    AFFINGER管理のGoogle連携

    マストというわけではないですが、Googleアナリティクス(GA4)サーチコンソール2大解析ツールでみんな登録しています。

    ぶっちゃけると僕はGA4はほぼ使っていません(笑)。
    (後で解説しますが、アフィンガーには解析ツールが内在しているからです。)

    サーチコンソールは、インデックス登録・クリック数や被リンクの確認などに使うので登録した方が良いでしょう。

    あと「AMP」に関しては、古い昔の設定なので調べる必要も対応する必要もないです。無視してOKです。

    関連記事
    wordpressでサーチコンソールを設定する方法
    WorePressサイトでGoogleサーチコンソールを設定する方法!初心者でも迷わずできるやり方を解説

    Googleサーチコンソールとは? GoogleサーチコンソールとはGoogleが提供する無料ツールの一つで、ウェブサイトの所有者が検索結果におけるパフォーマン ...

    関連記事
    wordpressでアナリティクスを設定する方法
    WordPressにグーグルアナリティクスを設定し、最初のステップを開始しよう!

    Googleアナリティクスとは? GoogleアナリティクスとはGoogleが提供する無料ツールの一つで、ウェブサイトのさまざまなデータを確認することができる分 ...

    きつねコード

    次へ!


  • 【AFFINGER管理≫その他】

    最後に、AFFINGER管理の「その他」のページを開いてください。
    「遅延読み込み」の項目を状況に応じて設定してください。

    ・wordpress本体のLazyLoadを有効にするにチェック(重複しない場合のみ)

    AFFINGER管理の遅延読み込み設定

    遅延読み込みとは、サイトスピードに関わる設定です。もちろんSEOにも関係します。画像を遅延して読み込みさせることで、ページ表示スピードを上げる効果が期待できます。

    ただし、この遅延読み込みは、機能を重複させないことが重要です。

    SEO系のプラグインで、画像の遅延読み込み機能が付いているプラグインは多数存在します。

    そして、wordpressバージョン5.5以降からはwordpress本体にもデフォルトで画像遅延読み込み機能が搭載されました。(↑上のこの設定は、その本体機能を使うかどうかということです)

    ですので、すでにSEO系プラグインを1つでも入れていて、プラグインの遅延読み込み機能をONにしている人は、不要(チェックなし)です。遅延読み込みの機能を重複させると、不具合が出ることもよくありますので、気をつけてください。

    きつねコード

    ちなみに私は、「チェックあり」で本体機能だけ使っています。



お疲れ様でした!!

以上で、管理画面「AFFINGER管理」の初期設定は完了です。

きつねコード

これで初期設定は大体終わりです。ここから記事制作へと入っていきます!

Affinger6初期設定と基本の使い方⑧記事の書き方をマスターしよう

この章では、記事を書いていくの使い方について解説します。

最初は「ややこしい!」と感じるかもしれませんが、一度慣れれば絶対に誰でも使いこなせますので乗り越えていきましょう!

みんながよく詰まるであろう点にポイントを絞ってお話しします。
Affinger6で記事を書くにあたり下記の知識は押さえておきましょう!

Affinger6記事の書き方ブロックエディタとクラシックエディタの使い分け

もはや昔の話になりつつありますが、実はワードプレスには2種類のエディタ(記事編集画面)が存在します

・ブロックエディタ(別名グーテンベルク:新式2019年〜)
・クラシックエディタ(旧式)

wordpress本体も毎年アップデートを重ねているわけですが、2019年に記事を編集する際の操作画面が劇的に変化しました。
そこで導入されたものがブロックエディタ(グーテンベルク)と呼ばれる今の仕様です。

結論から言うと、クラシックよりも今のブロックエディタの方が使いやすいです。

※ただし、最近(2019年以降)wordpressを始めたという前提で今お話ししています。
昔からwordpressを扱っている人は、好きこのんでクラシックを使い続けている人もいますよ。要は「慣れ」の問題でもあります。

こちらが、ブロックエディタです↓。いつもの編集画面ですね。

affinger6のブロックエディタ

一方こちらが、クラシックエディタです↓。メニュー項目が沢山並んでいますが、ここから色々と追加したり、カスタマイズしたりできます。

affinger6のクラシックエディタ

問題なのは、
Affinger6では「ブロックエディタ」と「クラシックエディタ」が併存している

ことにあります。これがややこしく感じさせる最大のデメリットだと私は思っています。

両方に対応はしているのですが、

  • クラシックエディタでしか使えないパーツも一部存在する
  • 同じパーツを両方のエディタで使えるが、ブロックと、クラシックで仕様が異なるパーツもある

もうややこしいですよね(笑)

なぜかというと、Affinger6は歴史古くて実績のあるテーマだからです。昔から改善しながらやっているので、結果として今こうなっています。

一応開発者視点で言うと、本来は新式に統一したいのもありますが、旧式を使っている人もまだいっぱいいるわけなので完全には無くせないわけですね。運営歴の長い『システム』にはよく付きまとう頭の痛い問題ですね(笑)


え、ブロックエディタとクラシックエディタで使えるパーツ(装飾など)が違うのですか?

結局、どちらを使えば良いのですか?

結論としては、

ブロックエディタの使い方をメインで覚えて、必要な箇所だけ(クラシックでしか対応できない時だけ)クラシックエディタを部分的に使う形が良い

だろうと思います。

もう少し具体的に見ていきますね。

きつねコード

既に理解してる人は読み流してね。

Affinger6記事の書き方ブロックエディタの基本の使い方

まずは、Affinger6でのブロックエディタの基本の使い方をマスターしていきましょう。


  • step.1

    記事編集ページにて、要素を入れたい箇所で「ブロックを追加」をクリックします。

    affinger6の記事編集ページでブロックを追加

    すべて表示」をクリックしましょう。

    affinger6の記事編集ページでブロックを追加

    ブロックは色々と用意されていますので、どれでも好きなブロックを探して入れましょう。

    「どんなブロックがあるのか」については、1つ1つ実際に使ってみて、お気に入りものを探しましょう!

    affinger6の記事編集ページでブロックを追加

    今回の事例では、「AFFINGER:メモ」ブロックを入れてみます。
    もしこのとき画面右側にメニューが出ていなければ、右上ボタンで表示させてください。

    affinger6の記事編集ページでブロックのメニューを表示

    画面右側のメニューでブロックのカスタマイズが可能です。実際に触ってみましょう。

    ・該当するブロックを選択している状態で、右側メニューは表示されます。
    ・メニューは「投稿タブ」ではなく「ブロックタブ」にあります。
    ・ブロックによって、用意されているカスタマイズ項目は全然違います。

    affinger6の記事編集ページでブロックをカスタマイズ

    例えば「AFFINGER:メモ」ブロックでは、アイコンを変えたり、注釈をつけたり、枠の色、背景色など、結構なんでも変えられますよ。

    「どうカスタマイズできるのか」についても、実際に1つ1ついじりながら確認してみてください。カスタマイズも自分のお気に入りを決めていきましょう!

    affinger6の記事編集ページでブロックをカスタマイズ

    Affinger6におけるブロックエディタの使い方に関しては、基本これだけです。設定は多いですが、見るべき場所は限られるのでシンプルです。

    • ブロックを入れる
    • 右側メニューでカスタマイズする(※カスタマイズがほぼ何も出来ないブロックもあり

    この流れだけ覚えましょう。

    最初の5〜10記事ぐらいで、”自分の型”を作っていけばOKです!一度型ができれば、記事制作の効率はぐんと上がります。


  • step.2

    加えてもう一箇所だけ、ブロックエディタの基本の使い方を確認しましょう。

    下の画像は、地のテキスト文を選択している状態ですが、その時にすぐ上にメニューが出てきます。

    ブロックすぐ上のメニューで「文字装飾」や「スタイル」などを変えることが出来ます。

    affinger6の記事編集ページで文字装飾をする

    下の画像の通り、さまざまな文字装飾が可能です↓。自分でもいろいろと触って確認してみてください。

    affinger6の記事編集ページで文字装飾をする

    ちなみに、間違えた時やテキスト装飾が反映されない時には一度「装飾クリア」を押すと良いですよ。消しゴムマークです。

    また、この時にも右側のメニューでカスタマイズ設定は用意されています。
    ブロックによってできることが異なるので、画面右側のメニューにも目を通してみると良いです。枠線をつけたり、スタイルを変えたり出来ます。

    affinger6の記事編集ページでテキストのカスタマイズをする

    このようにスタイルが用意されているので、テキストの簡易的な装飾が可能です。

    affinger6の記事編集ページでテキストのカスタマイズをする

    ほかにも例えば、「リスト」ブロックの場合のメニューの様子です。
    ブロックすぐ上のメニュー項目も、画面右側のカスタマイズ設定も違いますよね↓

    affinger6の記事編集ページでリストのカスタマイズをする

    リストでは、こんな風なスタイルが用意されています。
    やはり、ブロックによって設定が異なるのでそれぞれ見てみて確認するのが良いですね。

    affinger6の記事編集ページでリストのカスタマイズをする

    Affinger6でのブロックエディタの使い方は、これ全てです。

    見るべきところは大体わかりましたよね。

    とにかくカスタマイズ項目が用意されているので、ポチポチしてみれば分かります(笑)

    自分でさわってみないことには感覚が掴めませんのでガンガンいじってみてください!


きつねコード

初心者の人は、まずブロックエディタを覚えようね!👆

Affinger6記事の書き方クラシックエディタを部分的に利用する使い方

正直なところ、ブロックエディタさえ使えれば、クラシックエディタは一切使わなくても何も問題はありません

ただし、クラシックも使いこなせれば、出来ることが増えるのは間違いありません。

こちらも、一度慣れれば便利なので余力があれば触ってみると良いでしょう。


  • step.1

    Affinger6のブロックエディタでは、部分的に『クラシックエディタ』を呼び込んで使うことができます。
    ブロックを追加から、「クラシック」をクリックしましょう。

    affinger6のクラシックブロック

    そうすると、このように部分的にクラシックブロックが呼び出されます↓。

    他の部分はあくまでブロックエディタです。

    affinger6のクラシックブロック

    もしメニューが表示されていなければ、「ツールバー切り替え」マークを押せば出てきます。

    affinger6のクラシックブロック

    クラシックエディタでは、すべてこのツールバーに様々な設定が詰まっています

    例えば、文字を書いて「段落」から「見出し」へと変えることができます↓

    affinger6のクラシックブロックで見出しへ変更

    テキストを選択した状態で、「スタイル」から「赤字」などへ変えることができます。

    affinger6のクラシックブロックでテキストを赤字にする

    赤文字に変更されましたね↓

    affinger6のクラシックブロックで赤文字に変更した状態

    ご自身で色々と探してみて欲しいですが、このような「アニメーション」などもつけることなんかもできますよ。

    クラシックエディタでしか使えない装飾も、結構あります。まあ、お好みで。

    affinger6のクラシックブロックでアニメーションを変更

    様々な装飾パーツが使えますが、探す場所としては「スタイル」もしくは「タグ」にあることが多いです。見切れないほど、めちゃくちゃありますよ(笑)。

    クラシックでどんな装飾が使えるのかは、実際に出して保存してみて表示を確認してみましょう!

    affinger6のクラシックブロック

    クラシックエディタの基本の使い方は、これだけです。

    次のセクションでもう少し詳しくチェックしてみましょう!


きつねコード

初めて使うと「むずっ」と思うかもしれませんが、これも慣れですね。

Affinger6記事の書き方(上級編)ショートコードの使い方も覚えよう

上の解説の続きになります。ここは任意ですので、読み飛ばしても構いません。

「ショートコード」を理解すると、wordpressで出来ることの幅が更に一段階UPします。

「ショートコード」は、ブロックエディタでもクラシックエディタでも使用できます。

解説しますね。


  • step.1

    たとえば、クラシックエディタで「会話ふきだし」を使ってみましょう。

    affinger6のクラシックブロックで会話ふきだしを使う

    「会話ふきだし」が下のように追加されます。
    [ ]で囲まれているタグに挟まれているのがわかると思います。これが、ショートコードです。

    ショートコードにも種類がありますが、とにかく[]のカッコで囲まれているものだと認識してください。

    ショートコードでテキストを記述する場所は、開始タグと終わりタグに挟まれている部分であることをまず覚えてください。

    affinger6のクラシックブロック

    見てみると、こうなります↓

    affinger6のクラシックブロックで吹き出しを表示した

    この種類のショートコードは、開始タグと終わりタグのセットで機能していますので、もしどちらかのコードを壊してしまうと正常に機能しなくなります。気をつけてください。

    ショートコードには、単独で機能するもの(開始タグと終わりタグ2つではなく、1つだけのもの)もあります。


  • step.2

    もう一つ、事例を見てみましょう。
    クラシックブロックで、「クリップメモ」を使ってみましょう。

    affinger6のクラシックブロックで、クリップメモを使う

    すると、このようにショートコードが出ます↓。
    今回は長いですが、構成自体は一緒です。開始タグと終わりタグがあるので、そこにテキストを書きます。

    affinge6のクラシックブロック

    みてみると、こうなります↓。

    affinger6のクラシックブロックでクリップメモを表示

    ショートコードではカッコの中に入っている" "で囲まれた部分が各種設定(カスタマイズ)となっています。

    例えば、bgcolorは「背景色」です。#fafafaを別の色#add8e6に変えてみます。(ネット検索で「カラーコード」と調べればすぐ調べられます)

    affinger6のクラシックブロックでショートコードのカスタマイズを行う

    カスタマイズすると、こうなります↓。

    affinger6のクラシックブロックでショートコードのカスタマイズを行う

    カスタマイズ設定をすべて覚える必要はありません。変えるべき場所は結構限られるので、都度ネット検索で調べながら勉強していくと良いでしょう。

    このあたりのコードの知識は、wordpressに限らず役立つので覚えておくと可能性が広がるかなと思います。


  • step.3

    きつねコード

    最初からここまで完璧に理解しなくても大丈夫ですよ!ここはおまけです。

    affinger6のクラシックブロックで、もう1つ事例をみてみましょう。
    「タグ」に用意されている「タイムライン≫ステップ」というパーツを使った場合がこちらです↓。

    affinger6

    長いですよね(笑)。

    ショートコードは、入れ子構造(階層構造)を作ることも可能です。
    上の事例の場合は、全体の「タイムライン」という箱の中に、ステップ1とステップ2が入っているような状態です。

    この構造は見える人にとっては一瞬で見えるようになります。とにかくどこが開始タグで、それに呼応する終わりタグはどこなのかという視点を磨いてください。

    ここまで理解できてくると、こんなことも可能になります↓。

    affinger6のブロックエディタでショートコードを活用した例

    ↑これは、タイムラインのショートコードを分割して記述しています。

    僕はできる限りクラシックエディタを使いたくない(よくバグが出るからイヤ)なので、このようなやり方で書いています。

    開始タグと終わりタグの構造・順番が正しければ、もちろんこれでも正しく機能します。

    部分的にクラシックエディタは使用しますが、できるだけ最小限に留めているということですね。


きつねコード

これ、全然初心者向けではないので無視しても全然OKです。すみません。

Affinger6記事の書き方記事のメタディスクリプションは必ず書こう(SEO)

最後に、2点ほど記事を編集するときにやるSEO対策を補足します。

記事編集ページの一番下に「メタディスクリプションがありますので、ここは100文字〜120文字程度で毎回埋めてから公開するようにしましょう。読者ユーザーがクリックしやすく、かつキーワードが自然に入るような形であればベストです。

affinge6の記事編集ページ下にあるメタディスクプション設定

「titleタグ」には記事タイトルが自動で入りますので、空欄のままでも構いません。
また、「メタキーワード」は今はもうGoogleは使っていないので空欄で大丈夫です。

Affinger6記事の書き方画像のalt属性は設定しておこう(SEO)

これも記事編集を行う時のSEO対策です。

affinger6で「画像」を使うときには、「代替テキスト」にその画像の説明を入れてあげると良いでしょう。

「代替テキスト」の内容がalt属性という検索エンジンに情報を伝えるためのデータになります。正直なところ、今のSEOに効果があるかどうかはわかりませんが、私は一応全ての画像にaltは書いています。(アップロードする時でも良い)

affinger6で画像にalt属性を設定する方法

画像をアップロードした際や、管理画面「メディア」からも「代替テキスト」(alt属性)は設定できますよ。


以上で、Affinger6における記事の書き方については完了です。

ここまで読み進めた方は、かなり理解度が上がってきているはずです。もう一息ですので頑張りましょう!!

きつねコード

一息つきましょう。

Affinger6の基本の使い方⑨吹き出しの使い方

次に、よく使われる機能である「吹き出し」の使い方だけサクッと確認しておきます。


  • 会話アイコンを登録

    Affinger6では、よく使う吹き出しを登録することができます。
    管理画面「AFFINGER管理」の「会話アイコン」をクリックしましょう。

    affinger管理の「会話アイコン」

    「画像」と「名称」をそれぞれ設定するだけでOKです。
    8つまで登録することができます。

    affinger6の会話アイコン登録

    登録できたら、忘れずに保存しましょう。


  • 【記事ページで会話アイコンを出す】

    次に、記事の編集ページにて挿入したい場所で「ブロックを追加」をクリックします。

    affinger6の編集ページ

    "会話"と検索すれば出てくるので、AFFINGER:会話ふきだし」ブロックを見つけて追加してください。

    affinger6の記事編集ページでブロックを追加

    会話ふきだしが挿入されました。ブロックを選択した状態で、
    画面右側メニューで設定を変えることができます。登録した中から該当するアイコンを選べば完了です。

    affinger6で会話アイコンを表示

    吹き出しのデザインは、管理画面「外観≫カスタマイズ」≫「オプション(その他)」≫「会話ふきだし」からカスタマイズもできますよ。


関連記事
AFFINGER6吹き出しの設定と使い方
始めてのAFFINGER6「会話ふきだし」~基本から応用まで徹底解説

この記事でわかること Affinger6「会話ふきだし」機能の基本の使い方 Affinger6「会話ふきだし」機能のカスタマイズ例 この記事を書いているきつねコ ...

きつねコード

次は、大事なところです!

Affinger6の基本の使い方⑩Affingerタグ(広告タグ)の使い方

次は、Affingerタグの使い方です。ここは絶対に覚えましょう!
affinger6の真髄と言っても過言ではありません。収益化を狙っていくにあたりとても重要な機能です。

「AFFINGERタグ管理マネージャー」という専用プラグインが必要です。Affinger6を単体購入した時に付属する無料お試し版でもまずはOKです。

これを使って出来ることは、主にこの2つです。

AFFINGERタグ管理マネージャーで出来ること

  • 広告の一括管理
  • 広告のクリック計測

[正式版]と[無料お試し版]の違いは、「データの保存期間」です。

無料版だと7日間しか計測データが保存されません。正式版を購入すると、データは消えないので「先月との比較」や「前年との比較」が可能となります。つまり、「伸びているのか」が分かります。おそらく、無料版を使っていると自然とその必要性を感じてくるはずです。正式版も良い値段がするので無理をすることはありませんが、良きタイミングで先行投資するのが良いかなと思います。

なお、この[正式版]と[無料お試し版]の違いは次のセクションで紹介する『PVモニター』という専用プラグインも全く同様です。PVモニターも正式版にすると、PVデータが7日間で消えずに残るので、月を通してPVの推移をチェックできます。

いずれにしても、Affinger6のメリットを最大限に活かし収益化を目指すならば、遅かれ早かれつとも必須なプラグインです。セットで買う方が安いので、AffingrerタグとPVモニターは私もセットで購入しました。

\ きつねコードも使ってます!6/30までセール中!/

Affingerタグ管理マネージャーとPVモニターのセット

※インフォトップから購入できます。29880円セールにつき24800円

では、使い方を見ていきましょう!


  • step.1

    管理画面「AFFINGERタグ」≫「AFFINGERタグ一覧」をクリックします。

    wordpress管理画面「affingerタグ」

    「新規追加」をクリックしましょう。

    affingerタグの新規追加

    AFFINGERタグを作るときは、記事の編集ページと使い方は全く同じです。
    広告にしたい部分だけを、パーツとして作成すると思ってください。

    今回は、購入ボタンを入れてみましょう。

    affingerタグを作成する画面

    ボタンには、広告のURLを忘れずに貼り付けましょう。
    (「新しいページで開く」は好きに決めて構いません。今のアフィリエイトはどちらでも計測されるはずです。)

    affingerタグを作成する画面

    できたらすぐに公開してOKです↓。

    affingerタグを作成

    ・AFFINGERタグのタイトルは、表には出ません。自分の管理する用なので分かりやすいように命名すれば大丈夫です。
    ・複数ブロックを入れても構いません。

    ちなみに、こんな感じでAFFINGERタグを作ることも可能ですよ↓
    (画像に、リンクはもちろん貼ってくださいね)

    affingerタグの作成例

  • step.2

    次に、「AFFINGERタグ一覧」に戻り、ステップ1で作成したものの「ショートコード」(短い方だけをコピーしましょう。

    affingerタグのショートコードをコピー

    次に、実際に広告を表示させたい記事の編集ページを開きます。
    広告ボタンを出したい位置で、『ショートコード』ブロックを呼び出しましょう。

    affingerタグを呼び出す

    『ショートコード』ブロックに、先ほどコピーしたAFFINGERタグのコードを貼り付けます。

    affingerタグをのショートコードを貼り付ける

    保存して、表示を確認してみましょう。
    ちゃんとボタンとして読み込まれていますね↓。

    affingerタグを呼び出して使っている状態

AFFINGERタグの使い方としては、基本はこれだけです。

  1. AFFINGERタグで、パーツを作る
  2. 使いたい場所で、該当するAFFINGERタグを呼び出す

だけです。
この辺りは、ご自身で運用しながらコツを掴んでいけば大丈夫ですが、一応ポイントも載せておきます。参考までに。

AFFINGERタグの運用のコツ

  • 広告リンクは基本「AFFINGERタグ」で作成しておくと後々ラク。(一括編集ができるから)
  • もう1つの目的は、「クリック計測」をしたいから。計測したいリンクは必ず「AFFINGERタグ」で作っておく。
  • 基本はたとえば、[購入ボタン-商品A][購入ボタン-商品B][購入ボタン-商品C][購入バナー-商品A][購入バナー-商品B]のようにAFFINGERタグを作っていく。
  • 不必要に細分化しすぎない方が最初は吉。
    • 例えば、[購入ボタン-商品A(青)][購入ボタン-商品A(赤)]もしくは[購入ボタン-商品A(記事上)][購入ボタン-商品A(記事下)]のような分け方は、最初はあまりおすすめしない。実際に比較検証を行うならやっても良いが、管理が面倒になる。

「クリック計測」に関しては、正直見ればわかるぐらいの話なので、実際に使ってみてください(笑)

Affingerタグで広告リンク(ボタンでもテキストリンクでも画像リンクでも可)を作っておくと、クリックが計測されるようになります。

例えば、こんな感じですね↓

管理画面「ホーム」からも、「クリック計測」からもどちらでも見れます。私はいつも「ホーム」画面で見ています。

affingerタグのクリック計測
affingerタグのクリック計測

ちなみに、上の画像にある「アクセス追跡」を押すと、「そのクリックしたユーザーが、どのページにアクセスしたのか」という足跡を確認することも可能です。
(※PVモニタープラグインも入れている場合に限ります
(※ログが取れないことありますが、その場合はbotである可能性も高いです

これ、本当に最高ですよ。

そうすると、「このボタンが20クリックぐらい押されたら1件ぐらいは収益が発生するな」とかが見えてくるわけです。

じゃあ、どうやってクリック数を伸ばそうか、このボタンは全くクリックされてないから変えようか、クリックはされてるけど全く売れてないからダメだなとか、色々見えてくるわけですね。

Affinger6にしてこの機能を使っていないのは、もったいなすぎるので必ず使ってください(笑)

きつねコード

あ、ちなみにPVがある程度大きくないとクリックはなかなか発生しませんよ!クリック0の場合はまずPV伸ばしましょう!

関連記事
AFFINGERタグ管理マネージャーとPVモニター
初心者でも収益化を狙える?Affinger6タグ管理マネージャーとPVモニター

この記事でわかること 初心者に、「タグ管理マネージャー&PVモニター」が良い理由 Affinger6の専用プラグイン「タグ管理マネージャー」の使い方 Affin ...

Affinger6の基本の使い方⑪PVモニターの見方

続けて、PVモニターの使い方です。こちらも非常に重要な機能です。

「PVモニター」という専用プラグインが必要です。Affinger6を単体購入した時に付属する無料お試し版でもまずはOKです。

これを使って出来ることは、主にこの3つです。

AFFINGERのPVモニターで出来ること

  • PVの確認(リアルタイムで確認)
  • ランキング(どの記事にアクセスがあるか)の確認
  • アクセスログの確認

「AFFINGERタグ管理マネージャー」と同様に「PVモニター」も無料版では7日間しか計測データが保存されません。

また、正式版にするとPVランキングが何件でも表示できるようになるなどの違いもあります。

\ きつねコードも使ってます!6/30までセール中!/

Affingerタグ管理マネージャーとPVモニターのセット

※インフォトップから購入できます。29880円セールにつき24800円

PVモニターに関しては、特に自分で設定をすることはほぼなく自動で全て出てくるので実際に使ってみれば分かります。


  • step.1

    こんな感じで、リアルタイムでその日のPVと、アクセスランキングが見れます。(無料版だと3位まで)

    管理画面「ホーム」からも、「PVモニター」からもどちらでも見れます。

    affinger6のPVモニター

    これ、リアルタイムなので本当に最高です。いつものwordpress画面で把握できるわけですからね。

    何時何分にどのページにアクセスがあったのかも、このように確認できます↓

    affinger6のPVモニターのアクセスログ

    PV数から、きちんと狙っている通りにサイトが伸びているかを確認することが大切です。


きつねコード

特にグーグルアナリティクスをほぼ使っていない人は、「AFFINGERタグ管理マネージャー&PVモニター」はぜひ使い倒しましょう!半年後、1年後の収益化の可能性が全然変わってきますよ。

関連記事
affinger6のPVモニター計測がおかしい
Affinger6のPV計測がおかしいと思った時の対処法

Affinger6プラグイン「Affingerタグ管理マネージャー」と「PVモニター」について Affinger6には、 ・Affingerタグ管理マネージャー ...

Affinger6の基本の使い方⑫マイブロックの使い方

これで最後です!マイブロック機能の使い方です。

記事制作を効率化させるために、大事な機能になります。

マイブロック機能は、自分がよく使うパーツをあらかじめ登録しておける機能です。

活用シーンとしては主に2つあります。

マイブロック機能の活用シーン

  1. 使い回す共通パーツ(ブロックのかたまり)を丸ごと登録しておいて、呼び出す
  2. いつも使う装飾(カスタマイズ)を登録しておいて、簡単に呼び出す

それぞれ、手順を解説していきますね。


  • 1つ目のマイブロックの使い方

    管理画面「マイブロック」≫「新規追加」をクリックしましょう。

    affinger6マイブロック

    マイブロックの登録画面も、通常の記事編集と同じです。
    どの記事でも共通して使い回すようなパーツ(プロフィール・広告用の誘導パーツなど)を自由に作って「公開」まで行いましょう。

    affinger6マイブロックを作成

    次に、実際に表示したい記事の編集ページにて、「ブロックを追加」≫マイブロック」を呼び出します。

    affinger6マイブロックを呼び出す

    そうすると、あらかじめ作っておいたマイブロック項目が出てくるので選ぶだけです。

    affinger6マイブロックを呼び出す

    保存して表示を確認してみましょう。
    このようにマイブロックがきちんと反映されていますね。

    affinger6マイブロックを作成

    これが基本の使い方です。

    ・マイブロックを作成
    ・各記事で「マイブロック」として呼び出す

    ですね。

    「マイブロック」として共通パーツにしておくと、毎回同じことを書かなくて済むので時短になります。また、一括編集できるわけなのでリライト編集もラクになります。

    ただし、この1つ目のやり方でマイブロックを呼び出した場合には、各記事で個別に編集することは不可です。

    個別に編集したい場合は、次のやり方で行います。


  • 2つ目のマイブロックの使い方

    マイブロックの2つ目の使い方です。

    管理画面「マイブロック」≫「新規作成」から、今度は自分がよく使う装飾ブロックを、カスタマイズした形で登録してみましょう。(中身のテキストは空っぽのままで良いです。)

    affinger6マイブロックを作成

    次に、実際に表示させたい記事の編集ページにて、「ブロックを追加」≫「すべて表示」をクリックします。

    affinger6マイブロックを呼び出す

    左側メニューの中にある「パターン」をクリックしてください。

    affinger6マイブロックを呼び出す

    そうすると、あらかじめ登録したマイブロックが出てきますので、選ぶだけです。

    affinger6マイブロックを作成

    このように、登録しておいたマイブロックを呼び出せましたね。
    この場合には、自由に編集することも可能なので記事制作に役立てることができます。

    affinger6マイブロックを呼び出す

    自分がよく使う装飾の色・枠線・スタイルなどをあらかじめカスタマイズした形でマイブロックに登録しておくと、毎度毎度カスタマイズする必要がなくなるので時短になります。(これ結構でかいので、面倒でもやったほうが良いですよ)

    あくまで、「カスタマイズに手間取るブロックだけ」を厳選して登録しておくと良いでしょう。

    ただし、使う装飾ブロックによっては、わざわざマイブロックに登録しなくても、都度呼び出しても変わらないものも多いです。


まとめると、マイブロックには呼び出し方が2通りあるということですね。復習です。

マイブロック機能の活用シーン

  1. 使い回す共通パーツをマイブロックに登録
    • 各記事で「マイブロック」として呼び出す。(編集は不可)
  2. いつも使う装飾(カスタマイズ)をマイブロックに登録
    • 各記事で「すべて表示」≫「パターン」から呼び出す。(編集も可)
きつねコード

大体慣れたら、あとは使い方次第です!自由にやってみましょう!

Affingerタグとマイブロック機能の使い分けについて

「Affingerタグ」「マイブロック」は出来ることが似ているので、混乱する人も多いです。

改めて確認しておくと両者の一番の違いは、

クリック計測が出来るかどうか

です。つまり、広告リンクはクリック計測すべきなので基本的に「Affingerタグ」で作りましょう。

それ以外の使い回したい共通パーツや、カスタマイズ装飾は「マイブロック」で登録しておけば時短につながります。

なお、マイブロックの中で、「Affingerタグ」を呼び出して使うことも可能ですよ。

こんな感じです↓(中〜上級者向けです)

affinger6マイブロック機能の使い方
affinger6マイブロック機能の使い方

まとめ

お疲れ様でした!長かったですね。

Affinger6の初期設定と使い方についてマスターできましたでしょうか?

量が多かったので大変に感じたかもしれませんが、
「初めてアフィンガーを使う方もできるだけ遠回りにならないように」と思いながら説明を加えてきたつもりです。

覚えることは多いですが、1つ1つ進めていくことが遠回りなようで近道です。

読んでいるだけでは曖昧な部分も多いでしょう。

実際に触ってみて、解説を読んでみて、を繰り返していくと段々とマスターしていけるかなと思います。

時間さえかければ誰でも使いこなせるようになります!

そして一度マスターできれば、Affinger6は最強ツールとなりますので、
ぜひ最初だけは根気よく向き合ってみてくださいね。ぜひとも素敵な自分だけのサイトを作ってみてください!

Affinger6専用プラグインで収益を次の段階へ

\ きつねコードも使ってます!6/30までセール中!/

Affingerタグ管理マネージャーとPVモニターのセット

※インフォトップから購入できます。29880円セールにつき24800円

タグ管理マネージャーとPVモニターの活用方法はこちら>>

おすすめテーマランキング[PR]

【第1位】AFFINGER6 ¥14,800円

affinger6バナー

正直、万人向けとは言えないが、「稼ぐサイトを作りたい人」はこのテーマが良い。収益化をサポートするための仕掛けが本当に良く出来ているので、使いこなせれば無双状態に。カスタマイズ自由度もMAXなので個性も出せる。当サイトで利用中。もちろんSEOにも強い。

【第2位】swell ¥17,600円

こちらは万人向け。いま一番売れてる有料テーマ。多機能ながらも直感的な操作ができるので、「とにかく使いやすい」。初心者〜上級者にも愛用され、導入してすぐオシャレなサイトになる。SEOにも強くバランスが良いと言える。

【第3位】Cocoon 無料

cocoonバナー

一言で言えば「コスパ最強」。なんでこれが無料?必要十分な機能で、シンプルなので初心者にもgood。費用をかけずとりあえずサイトを始めたい人に最適。ゼロからサイトを作る人は、レンタルサーバーの「Xサーバー」で、wordpressクイックスタート機能というのを使うのがおすすめ。即cocoonサイトができる。2個目のブログにも。

  • この記事を書いた人

きつねコード

webディレクター/プログラマー。 web系の経験が10年以上あり、webサービスの立ち上げやメディア運営などをやっていました。若い時に起業していた時期もあるので、守備範囲は結構広めです。パソコンが苦手な人からの質問も受けるので、参考になればとの想いで当ブログを始めました。

PICK UP!

wordpressのおすすめテーマはこれ 1

結論:私がおすすめするWordPressテーマはこれ! 最初に、結論をお伝えすると 私が本気でおすすめしているのは「Affinger6」というテーマになります。 ...

ラッコキーワードの使い方を徹底解説! 2

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

現役ブロガーがAFFINGER6を徹底評価 3

この記事でわかること Affinger6のどこが良いのか 実際に使っていて感じるAffinger6のメリットとデメリット Affinger6のデメリットを相殺す ...

-Affinger, ブログ・wordpress運営
-, ,