初心者でも使いこなせる!AFFINGER6の使い方入門ガイド

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

悩める人

Affinger6にしましたが、訳がわからなすぎて心が折れそうです。

きつねコード

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

この記事でわかること

  • Affinger6の、基本の使い方の全て
  • 最初に覚えておくべき設定項目や機能について

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

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

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

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

Affinger6の販売ページへ

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

前置きを飛ばして、
すぐに使い方の説明を読みたい方は下のボタンから飛べます。

すぐに使い方をチェック

Affinger6とは

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

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

初心者にはきついです。

といった声も多く聞こえてきます。

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

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

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

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

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

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

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

きつねコード

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

Affinger6のレビュー記事はこちらに詳しくまとめています↓。

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

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

Affinger6は初心者に本当に不向きなのか?

「初心者には難しい」とよく言われますが、確かにそれは間違ってはいません。

ただ結論を先に言うと、

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

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

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

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

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

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

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

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

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

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

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

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

根性論に聞こえるかもしれませんが、マジです。

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

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

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

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

きつねコード

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

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

一方で、下記が当てはまるケースは、そもそも他のテーマを使った方が良いかもしれません。

Affinger6があまり向かないかも?

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

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

あたりだと今は間違いはないかなと思います。

関連記事
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(通常版14800円)を単体購入すると、おそらく専用プラグインの無料お試し版も付属で付いてきたかと思います。

こんな感じですね↓。(※中身やファイル名は購入時期などにもより異なります。

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

Affingerでは、専用プラグインが沢山存在します。

専用プラグインをインストールするだけで機能が増えていきますので、初め無料で付いてきたプラグインはとりあえず入れてみると良いでしょう。不要ならば、いつでも削除することも可能ですので。

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

affingerの専用プラグインをwordpressにインストールする
きつねコード

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

これだけは覚えたいAffinger6の使い方

ここからは、Affinger6の基本の使い方を解説していきます。

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

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

・初心者さん向けに書いています。
・全ての機能を網羅しているわけではありません。

(上述した通り、初期はミニマムで構わないという考え方です。)

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

きつねコード

では、いきましょう!

Affinger6の基本の使い方①設定を変える場所は「外観≫カスタマイズ」か「AFFINGER管理」の2つが基本

まずは前提となる知識ですが、すごく大まかに言うと

設定を変える場所は「外観カスタマイズ」もしくは「AFFINGER管理」のどちらかにある

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

affinger6の管理画面

プラグインも入れているとあちこちに散らばっているように見えますが、基本的に初期設定などで触るのは、この2つが多いです。探している設定はこのどこかには存在します。

  • 外観≫カスタマイズ
  • AFFINGER管理

これに加えて、下の2つも初期設定では必須の機能です。
(この使い方は、どのwordpressテーマを使っていても同じです↓)

  • 外観≫メニュー
  • 外観≫ウィジェット

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

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

まず初めに、ざっくり頭に入れておくと良いでしょう。

Affinger6の基本の使い方②全体的なデザインを設定する方法

次は、サイトの全体的なデザインを決める方法についてです。

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

最初は真っ白!

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

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

さて、サイト全体のデザインを決めていく方法は主に4つあります。
どれがおすすめかは特に無く、好き嫌いによるかなーと思います。

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

  1. 一から自分で設定していく柔軟性高い、手間はかかる
    • 細かい設定を1つ1つ重ねていくやり方です。
  2. デザインパターン柔軟性高い、手間は楽
    • 用意された設定項目からテーマ・カラーを選び、ワンクリックでサイト全体に適応させるやり方です。超簡単です。もちろんその後に各所カスタマイズしていくことも可能です。
  3. デザイン済みデータ:綺麗なサイトになる、導入の手間とお金が少しかかる
    • 用意されたデザイン済みデータのサンプルから好きなものを選び、自分のサイトに読み込ませるやり方です。費用が少し必要ですが、スタートデザインとしてプロ並みの綺麗なサイトが完成します。
  4. デザインカード:綺麗なサイトになる、設定の手間は少しかかる
    • 用意されたデザインカードのサンプルから好きなものを選び、自分のサイトに読み込ませるやり方です。こちらは無料で、工程もデザイン済みデータより簡単です。ややシンプルな印象はありますが、スタートデザインとして綺麗なサイトが完成します。

どれでも好きなやり方を選んでください!

きつねコード

ちなみに、きつねは2つ目だよ。
もし最初から綺麗なサイトを完成させたいなら「デザインカード」が良いかもね。

I. 一から自分で設定していく

1つ目は、デザインを一から自分で設定していくやり方です。手間はかかりますが、自分の好きなようにカスタマイズが可能です。

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

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

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

こんな人向け

  • デザインにこだわりたい
  • 個性あるサイトにしたい
  • 時間をかけても構わない
  • Affinger6の設定項目にできるだけ最初から多く触れておきたい

「例えばこんな感じの設定があるよ」とわかるように、いくつか機能をピックアップしてご紹介しますね。

きつねコード

もちろん全ては紹介しきれませんので、雰囲気が掴めればOKです

サイト修正を行う際には、ヘッダーフッターサイドバー、などの『構成要素』は存在する状態でデザインを確認した方が良いでしょう。(メニューやウィジェットから編集可)

投稿記事ももし数が少なければ、ダミー用の記事でも良いので、中身を入れた状態でサイト修正を行った方が分かりやすいです。

ヘッダー」とは、サイト上のタイトル部分などのことを指します。
フッター」とは、サイト一番下のコピーライト部分などのことを指します。
「ヘッダーのメニュー」「フッターのメニュー」は、管理画面「外観」≫「メニュー」機能から挿入することが出来ます。メニューの使い方自体は、どのテーマでも基本同じです。
「サイドバー」は、管理画面「外観」≫「ウィジェット」機能から挿入することが出来ます。これもウィジェットの使い方自体は、どのテーマでも同じです。

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

例)トップに記事スライドショーを追加

  • step.1

    管理画面「AFFINGER管理」の「ヘッダー」をクリックします。

    アフィンガーで設定変更する際は大体AFFINGER管理」もしくは「外観≫カスタマイズ」のどちらかにあるのでしたね!

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

    このページには色々と設定がありますが、
    ヘッダーに記事をスライドショーで表示する」という項目にチェックを入れてみます。

    毎回「save」で保存でするのを忘れずに!

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

    このようにトップページのヘッダー部分に「記事スライドショー」が表示されます↓。
    綺麗ですね。

    もしこの機能を使うならば、各記事のアイキャッチ画像(サムネイル)が表に出てくるわけなので、毎度アイキャッチに綺麗な画像を用意してあげる必要がありますね。

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

例)トップを1カラムにする

  • step.1

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

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

    ここにも色々と設定はありますが、「トップページのレイアウト」を「1カラム」に変更してみましょう。

    カラム』とは”列”のことを指します。

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

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

    affinger6でデフォルトの状態

    トップページが、1カラムになります↓。
    1カラムにしているwordpressサイトもたまに見かけますよね。広々使えて、これはこれで見やすいです。

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

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


例)トップにタブ式記事一覧を追加

  • step.1

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

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

    今回は、まず「タブ式カテゴリー記事一覧をフロントページに表示する」にチェックを入れます

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

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

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

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

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

    そうするとこのようにトップページに、カテゴリーごとにタブで切り替えができる記事一覧が表示されます。
    一気にちゃんとしたサイトにも見えてきますね。

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

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


例)サイト全体に背景画像を追加

  • step.1

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

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

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

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

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

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

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

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

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

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


例)記事見出しのデザインを変更

  • step.1

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

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

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

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

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

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

    affinger6

    見出しのデザインはどの記事でも影響してきますので、結構大事だと思います。

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


ここまで、「こんな設定があるよ」という事例を5つほどご紹介しました。

このように1つ1つの細かい設定を積み重ねていくことで、サイト全体が個性あるサイトに仕上がっていきます!

HTMLやCSSを使った高度なカスタマイズは基本的にはしなくても大丈夫です。まずは用意されている設定でどんなことができるのかを時間の許す限り見てみると良いでしょう。

Affinger6だと、プログラミングができなくてもかなり凝ったサイトが作れちゃいます。最初はややこしいですが、触っているうちに段々と分かってくるのでまず尻込みせずにスタートしましょう。満足いくサイトが完成したら、感動ものですよ。

きつねコード

設定は他にもい〜っぱいあるよ(笑)

Ⅱ. デザインパターン

2つ目は、デザインパターンの機能を使うやり方です。手間は非常に簡単で、柔軟なカスタマイズも可能です。

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

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

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

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

こんな人向け

  • 統一感のあるデザインを自分で作る自信がない
  • とりあえず、時間をかけずにサイト全体に適用したい
  • 最低限の見た目を整えたい
  • Affinger6の設定項目を細かく見るのは、これからで良い。

私も、初めこの方法で始めています。


  • step.1

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

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

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

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

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

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

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

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

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

    あとは、上述の1つ目のやり方で紹介したように細かく用意されている設定を1つ1つ確認して、好きなように修正していけば良いです。

    例えば、記事ページの見出し(h2、h3、h4)もそれぞれデザインを自分で変更することも可能でしたね。

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


きつねコード

僕は、デザイン苦手なのでこの方法。一瞬で終わります笑

Ⅲ. デザイン済みデータ

3つ目は、デザイン済みデータと呼ばれるものを導入するやり方です。

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

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

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

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

デザイン済みデータのAFFINGER公式ページ≫

こんな人向け

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

このデザイン済みデータに関しては、決してHTMLやCSSなどの高度なカスタマイズが入って、事例の状態になっているわけではなくてあくまでも既存の設定を1つ1つ積み重ねて実現されています。

つまり、「アフィンガー6を使いこなすと、これぐらい綺麗なものが誰でも作れますよ」というお手本でもあるということですね。

Affinger6の設定は、基本的にこの4つの設定で構成されます。

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

デザイン済みデータとは、ざっくり言うと、導入用のプラグインを使ってこれらの設定を自分のサイトに全部そっくりそのまま読み込む、ということをやるわけですね。

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

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

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

Ⅳ. デザインカード

4つ目は、デザインカードと呼ばれるものを導入するやり方です。

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

これも上で紹介した「デザイン済みデータ」と仕組みはほぼ一緒です。こちらは2023年に導入された新機能になります。導入の方法は比較的簡単で、費用はかかりません。

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

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

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

デザインカードのAFFINGER公式ページ≫

こんな人向け

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

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

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

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

Affinger6の基本の使い方③トップページデザインの変え方

ここまでで全体的なデザインは決まりましたでしょうか?

遅かれ早かれ「トップページのデザインを変えたい」という方は多いと思いますので、サクッと確認しておきましょう。

繰り返しにはなりますが、基本的には

AFFINGER管理」もしくは「外観カスタマイズ」に用意されてある設定項目を1つ1つ見て、変えていくだけ

です。

「AFFINGER管理」では、主にこのあたりをみるとトップページに関係してきます↓
(細かくは見ません。先ほどの「デザイン決定方法①一から自分で設定していく方法」で事例を挙げているので、読み飛ばした方は確認してみてください↑)

affinger管理、トップページに関わる設定項目

「外観≫カスタマイズ」では、主にこの辺りをみるとトップページに関係してきます↓

affinger6のテーマカスタマイザー、トップページに関わる設定項目

一気に設定項目を流し見しても訳が分からなくなります。

1つ1つ設定を実際に変えてみて、都度どう見た目が変わるのかチェックしていことが遠回りのようで近道です。

そうすれば必ず理解が進みます。

またトップページに関しては、

ウィジェット機能」と「メニュー機能」も、トップページの構成に関わってきます。

ウィジェットとメニューの使い方自体は、どのwordpressテーマでも大体同じなので当記事では扱いません。Affinger6だと選択肢はとても多いので、できることの幅は広がりますね。

「ウィジェット」では、この辺りがトップページに関わってきます↓

affinger6のウィジェット、トップページに関わる設定項目

入れたいブロックを、好きな場所に挿入することで構成要素を追加することが出来ますね。

affinger6のウィジェット、トップページに関わる設定項目
関連記事
wordpressのウィジェット使い方ガイド
初心者のためのWordPressウィジェット設定完全ガイド

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

「メニュー」に関する基本の使い方は、下の図の通りです↓

affinger6のメニューの使い方

「メニュー」を作成したら、表示する場所を決めます↓
これでヘッダーや、フッターにメニューを追加できるわけですね。

affinger6のメニュー、トップページに関わる設定項目

以上、この4点をそれぞれ見ていくとトップページのデザイン構成要素を柔軟に変えていくことが出来ますので、覚えておきましょう。いきなり100%理解するのは難しいので、とにかく触ってマスターしていきましょう。

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

Affinger6の基本の使い方④見出しデザインの変え方

「記事ページの見出しのデザインを変えたい」という方もとても多いです。繰り返しになる部分もありますが、改めて確認しておきましょう。

既に分かる方は次のセクションへ進んでください。

Affinger6では、見出しのデザインをh2からh5まで自由に変えることが出来ます。

手順は、「デザイン決定方法の例(記事見出しデザインを変更)」で説明した通りですが、

管理画面「外観≫カスタマイズ」画面へいき、「見出しタグ(hx)/テキスト」で変更するのでしたね。

こちらは、当ブログでの設定事例です。
(お手本ではないですよ笑。私デザインは苦手なので)

affinger6で見出しデザインの変更例

とにかく「色」と「項目」の組み合わせで色々と変わりますので、自分のサイトテーマカラーに合わせて作ってみると良いでしょう。

affinger6で見出しデザインの変更例

私の場合は、一応h2タグからh5タグまでそれぞれ設定していますよ。h5なんてほぼ使いませんけど…。

affinger6で見出しデザインの変更例
きつねコード

アフィンガーの設定については大体つかめてきましたか?
触れば触るほど本当によく出来ているな〜と感じますAffinger6は。

Affinger6の基本の使い方⑤ヘッダー下カード(おすすめ)の使い方

次は、ヘッダー下カードと呼ばれ機能の使い方を紹介します。

使用するかどうかは好みと運営状況にもよりますが、頭の片隅には入れておいてください。

ヘッダー下カードとは、これのことです↓。
要するに、おすすめしたいカードのことです。4つ設定できます。

affinger6のおすすめカード

設定も簡単なので、Affinger6ユーザーさんはよく使っているのを見かけます。
お手本でもある「デザイン済みデータ」や「デザインカード」にもよく利用されていますね。


  • step.1

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

    affinger6のヘッダーカード

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

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

    affinger6の

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

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


  • おまけ

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

    wordpress管理画面「メディア」

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

    wordpress「画像のURL」の調べ方

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

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

Affinger6の基本の使い方⑥おすすめ記事一覧の使い方

5で紹介した「ヘッダー下カード」と似た多機能に「おすすめ記事一覧」というのもあるので紹介しておきます。

これも使うかどうかは任意ですが、頭の片隅には入れておくと良いでしょう。

当記事では、「ヘッダー下カード」と「おすすめ記事一覧」を両方利用していますが、
おすすめ記事一覧」をトップページに出した場合はこんな感じです↓。

affinge6のおすすめ記事一覧

  • step.1

    先ほどと同じく「AFFINGER管理」の「ヘッダー下/おすすめ」に設定があります。
    ページの下へと進みます。

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

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

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

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

    今回の事例では、52番、40番と、54番の3つの記事をおすすめとして出すということです。

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

  • おまけ

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

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

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

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

    サイドバーに出したり、記事ページの下に出す設定も用意されていますので確認してみてください。

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


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

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

Affinger6の基本の使い方⑦SEO関連の設定方法

次は、SEO対策に関する設定についてです。気になる方も多いですよね。

とても乱暴な言い方にはなりますが(笑)、Affinger6ではデフォルトでSEO対策は最低限出来ているので、あまり気にせず記事コンテンツ制作を始めても大丈夫だと思います。

細かく言えば色々とありますが、初期状態でもSEOは十分強いのでそこまで気にしなくて良いです。

というか、SEO施策よりもコンテンツ内容の方がよっぽど評価対象として重要です

既に100記事以上あるような方は気にした方が良いと思いますが、そうでない場合にはまずは最高品質の記事を作ることに注力しましょう。

時間があるときに、別途情報を集めながらSEOに関して最適化してみるのが良いだろうと思います。

一応、「ここだけはチェックしておきましょう」という点をご紹介します。


  • 【アナリティクスとサーチコンソール設定】

    既に設定している人が多いとは思いますが、まだ連携できていない方は、Googleアナリティクスと、Googleサーチコンソールを設定しておきましょう。

    もっとも活用しなければ連携しても意味ないですが…。サーチコンソールは、クリック数被リンクの確認、サイトマップの送信インデックス登録などに使うので必須ですが、アナリティクスに関してはaffinger6では計測機能があるため、最悪使わなくても良いかな〜とも思います。僕は好きじゃないので正直ほぼ使ってないですよ。連携はしています。

    affinger6のサーチコンソールとアナリティクス設定

  • 【トップページのメタディスクリプション】

    管理画面「AFFINGER管理」の「SEO」にある、「トップ用のメタディスクリプションだけは入れておきましょう。100文字〜120文字ぐらいでサイトの説明を書いてください。他は、おまけなので今回はいじらなくても構いません。

    affinger管理のトップページのメタディスクリプション設定

  • 【構造化データの設定】

    ここは大事です。管理画面「AFFINGER管理」の「投稿・固定記事」をクリックします。
    ページの下へ進んでください。

    affinger管理の「投稿・固定記事」設定

    構造化データ設定にある、2項目にチェックを入れてください。SEOに関係してくるので、出力しておく方が良いです。

    構造化データとは、検索エンジン向けの情報を内包したデータのことです。

    affinger6の構造化データ設定

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

    (そして、元に戻すボタンがないので設定を戻すのが非常にめんどくさい笑。)
    どこがどう設定が変わったのかをいちいち探さなければなりません。なので使用しない方が無難です。

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

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

    そのくらいの数字が出ていれば十分とは言えるので、無理に急いで何かする必要はありません。
    しかし、気になる方はアフィンガーの設定を1つ1つ細かくみて、高速化につながりそうな設定や不要な機能をオフにしていくと少しは改善されます。また高速化するためのプラグインを調べて、別途導入しても良いですね。

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


  • 【記事ページにプロフィール】

    同じく管理画面「AFFINGER管理」の「投稿・固定記事」の設定ページに「この記事を書いた人の設定があります。

    SEO的に、記事ページ内にはプロフィールを出した方が良いので、まだ表示していない方は試してみてください。

    出す場所は記事上でも、記事下でもどちらでも大丈夫です。

    affinger管理の「この記事を書いた人」の設定

    設定してあげると、こんな感じで出てきます↓

    (完全なる余談ですが、この機能は、「Affinger6って本当に細かい所まで気を遣って作られているな」とわかる機能の一つです。)

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

    プロフィールのテキストや画像などを変えたければ、
     ・管理画面「ユーザー」≫「プロフィール」
     ・管理画面「外観≫カスタマイズ」≫「オプション」≫「プロフィールカード」
    にあります。


  • 【各記事のメタディスクリプション】

    最後に、記事を実際に編集するときにやるSEO対策です。
    記事編集ページの一番下に「メタディスクリプションがありますので、ここは100文字〜120文字程度で毎回埋めるようにしましょう。もちろんキーワードが自然に入るような形で書きましょう。

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

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


  • 【画像のalt属性】

    これも記事編集を行う時のSEO対策です。
    affinger6で「画像」を使うときには、「代替テキスト」にその画像の説明を入れてあげると良いでしょう。alt属性という検索エンジンに情報を伝えるためのデータになります。今のSEO的に効果があるかどうかは正直わかりませんが、私は全ての画像にaltは書いています。

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

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


Affinger6でのSEO周りに関する使い方はこんな所ですね。

最初からあまりSEOの設定を気にする必要はない(十分強い!)ので、安心してコンテンツ制作に励んでください!

きつねコード

一息つきましょう。

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

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


  • 会話アイコンを登録

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

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

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

    affinger6の会話アイコン登録

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


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

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

    affinger6の編集ページ

    検索するか、全て表示するかを行い、AFFINGER:会話ふきだし」ブロックを見つけて追加してください。

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

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

    affinger6で会話アイコンを表示

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


きつねコード

サイトの全体的な設定に関しては大体網羅できてきています。
次は、大事な「記事編集画面の使い方」についてマスターしていきましょう!

Affinger6の基本の使い方⑨記事の書き方

いよいよここから記事を書いていくの使い方について解説します。

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

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

きつねコード

1つ目が一番大事です!ここさえ分かればいけるはず。

ブロックエディタとクラシックエディタについて

他のワードプレステーマを使っている人にはもはや関係ない話になりつつありますが、ワードプレスには2種類のエディタ(記事編集画面)が存在します

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

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

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

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

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

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でのブロックエディタの使い方は、これ全てです。

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

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


きつねコード

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

クラシックエディタを部分的に利用する使い方

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

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

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


  • step.1

    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のブロックエディタでショートコードを活用した例

    クラシックエディタで、編集を行うと結構な頻度でバグが出たりするので、私は好きではありません。

    「ショートコード」は、ブロックエディタでも普通に使えます。
    そのため、クラシックエディタショートコードをブロックに変換して、それを上手く分割するわけです。

    そうすると、ブロックエディタとして、ほぼすべてを編集することが可能になります。


きつねコード

初心者の方がクラシックエディタまで手を出すのは後でもいいかなと思いますよ!

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です。

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

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の基本の使い方⑫マイブロックの使い方

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

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

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

活用シーンとしては主に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の使い方はなんとなくは理解できましたでしょうか?

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

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

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

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

そして一度マスターできれば、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運営
-, ,