AFFINGER5で検索しても、記事を書く時にできること（機能や文字装飾）は少ししか紹介されていません。まだまだ知られていない部分も大量にあるので、その魅力を紹介したいと思います。
- 「どんな機能が備わっているか？」
- 「どんな文字装飾ができるのか？」
- 「ランキング機能はしっかりしているか？」
このように「自分の求めている機能があるのか」と疑問をお持ちであれば、読んでください。いろいろ詰め込んでいるので、このページは少し重いですがご了承ください。
購入すればマニュアルサイトがあり、ちゃんと使い方の説明もあって分かりやすいんですが、購入前はそのマニュアルサイトが見れないので、AFFINGER5にどんな機能があるかここでハッキリ理解してから購入しましょう。
基本ここで書いている装飾は、AFFINGER5の通常版でできることを書いています。AFFINGER EXの場合、これ以上の機能を使用することができます。
この記事では、AFFINGERのアップデートに伴い一部反映できていない機能や、逆に使えなくなった機能があるかもしれません。ご了承のうえ、閲覧してください。
AFFINGER5 WINGの機能や記事装飾のマニュアル
AFFINGER5 WINGでは、記事を書く時の装飾がとても豊富にあります。
そして他のテーマと違うところが、この記事の装飾を細かくカスタマイズできることです。
当然、無理にカスタマイズせず、そのままでもボタンをポチポチするだけで初心者でも簡単に装飾をしながら楽しく文章を書けるようになります。
この記事では、AFFINGER5 WINGの使い方は記していません。あくまでも購入前の参考として、あるいはマニュアルとして「こんな機能あったかな？」という時に使用してください。
テキスト
赤文字になる。
太文字になる。
赤字の太字になる。
大文字になる。
小文字になる。
ドット下線を引ける。
こんなのも入れれる。（参照リンクマーク）
参考が書ける。中身は何にでも変更可能
必須も書ける。中身は何にでも変更可能
打ち消し線になる。
コードも入れれる。
アイコン
はてなマークのアイコンを入れれる。
注意マークのアイコンを入れれる。
人物マークのアイコンを入れれる。
チェックマークのアイコンを入れれる。
メモマークのアイコンを入れれる。
王冠マークのアイコンを入れれる。
初心者マークのアイコンを入れれる。
これらのアイコンは、後にくる文字と連動しており、文字色や大きさを変えることが可能です。
【表示例】
王冠マーク、赤文字、サイズ150％。
カウント
ここからカウント
こんな感じで
表示できる
カウント表示をさせることができます。これを見出しに使うと順番表示ができたりします。
【表示例】
ここからカウント
こんな感じで
表示できる
このカウント機能の良いところは、目次に数字が反映されないところです。目次に1.や2.などが入っていてもSEO上あまり得をしないので、表示されないナンバリングできる機能が優れています。
見出し風
ここに書いてあるのは、あくまで風（ふう）なのでh2見出し風で書かれた場合は、見た目だけがh2になります。
記事タイトル風の見出し
h2風の見出し
h3風の見出し
h4風の見出し
h5風の見出し
まとめ風の見出し
見出しの設定自体は、別途カスタマイザーにて色んな種類に変更できます。用途としては限られてきますが、一度文章を区切りたいときやランキングの見出しに使ったりとあると役立つ機能です。
マーカー
8種類のマーカーがあります。
黃マーカー
黃マーカー（細）
赤マーカー
赤マーカー（細）
青マーカー
青マーカー（細）
鼠マーカー
鼠マーカー（細）
蛍光ペン風のマーカーで記事作成時に見栄えがリッチになります。最近はどのサイトでもこのようなマーカーを使われていますね。CSSに書き込んで使用するのが一般的ですが、AFFINGER5では標準装備されています。
写真の装飾
写真の装飾ができます。
枠線付き
ポラロイド風
風景画像などはポラロイド風で表示すると写真の感じが出て見た目もきれいですね。枠線は、写真の背景が白色や明るいときでも境界線を目立たせるのに役立ちます。
【表示例】
装飾なし画像
枠線あり画像
ポラロイド風にコメント入れる
ここに好きな文字を入れれる
上のように、ポラロイド風にコメントを入れることも可能です。
カードスタイル
内部リンクをおしゃれなカードスタイルに変更できます。種類は3つです。
通常の内部リンク
【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方
ブログカードスタイル
-
【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方
続きを見る
カードスタイル
カードスタイルB
カードスタイルとカードスタイルBはパソコン上では同じレイアウトになっています。違うところは、スマホで見たときにカードスタイルBはブログカードで表示されることです。
このカードスタイルには少し弱点があって、記事タイトルの長さが違うと縦の長さが変わってしまうことです。これは見た目上あまりきれいではなかったので、私は使用していません。アフィたまでは、ブログカードスタイルのみ使用しています。記事をカードスタイルで表示させたい場合は、別売りの子テーマ「JET」を購入するともっと綺麗な表示になります。
テーブル
横スクロール
| 商品名 | 特徴 |
| AFFINGER5 | 「稼ぐ」に特化したWordPressテーマ。 |
| AFFINGER PACK3 | AFFINGER5に有料プラグインが2つ付いたお得なセット。 |
| STINGER PRO2 | AFFINGERよりも機能は劣るがその分、価格が安い。 |
中央配置
| 商品名 | 特徴 |
| AFFINGER5 | 「稼ぐ」に特化したWordPressテーマ。 |
| AFFINGER PACK3 | AFFINGER5に有料プラグインが2つ付いたお得なセット。 |
| STINGER PRO2 | AFFINGERよりも機能は劣るがその分、価格が安い。 |
装飾なし
| 商品名 | 特徴 |
| AFFINGER5 | 「稼ぐ」に特化したWordPressテーマ。 |
| AFFINGER PACK3 | AFFINGER5に有料プラグインが2つ付いたお得なセット。 |
| STINGER PRO2 | AFFINGERよりも機能は劣るがその分、価格が安い。 |
横スクロールを使うと、スマホで見た時に横にスライドできる表になります。中央配置は文字が全て中央表示になります。装飾なしテーブルを使うと、枠線が消えます。横スクロールは、とても便利ですね。
クリップメモ
9種類のクリップメモ注意書きなど用途は様々。
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
AFFINGER5のちょっとしたメモ
アイコンの大きさや色、背景色や文字色もその場で簡単に変更可能（ビジュアルエディタで変更可能）
【表示例】
アイコンを3倍にしてアイコン色、背景色、文字色、文字の大きさを変更
ミニ吹き出し
ひとことコメントなどに役立つ、カラフルで綺麗なミニ吹き出し。
ミニ吹き出し
ミニ吹き出し
ミニ吹き出し
ミニ吹き出し
ミニ吹き出し
ミニ吹き出し
もちろん文字色、背景色、表示位置の調整もできる。
【表示例】
もん平だよ！
ミニ吹き出しのデフォルトの表示位置。
もん平なんだよ！
ミニ吹き出しの表示位置を下に移動させた。ボックスや画像に「目立つひとことコメント」を装飾できます。
AFFINGER5 WINGでは、こんなに細かい設定まで出来ます。他のテーマでは、表示できるとしても移動させるような機能がないものがほとんどです。AFFINGER5はこういうカスタマイズ性で一歩先にいっているテーマです。
たった少しの違いでも、見た目や読みやすさが変わり、文章の伝わりやすさは何倍にも変わります。
複合（アイコンあり、なし）
複合アイコンとは、上で紹介したクリップメモと見に吹き出しを掛け合わせたものです。それぞれアイコンのあり、なしのメモが存在します。
アイコンあり
自由なメモ
AFFINGER5 WINGのメモ
ココがポイント
AFFINGER5 WINGのポイント
ココがおすすめ
AFFINGER5 WINGのおすすめ
ココがダメ
AFFINGER5 WINGのここがダメ
ココに注意
AFFINGER5 WINGの注意
さらに詳しく
AFFINGER5 WINGの詳しく
◯才女性
AFFINGER5 WINGの女性口コミ
◯才男性
AFFINGER5 WINGの男性口コミ
アイコンなし
自由なメモ
ココがポイント
ココがおすすめ
ココがダメ
ココに注意
もっと詳しく
つまづきポイント
これらの複合メモも、各種カラーの変更がその場でできます。
【表示例】
ココがおすすめ
AFFINGER5は機能が満載！
使い所としては、ワンポイントアドバイスとか注意点としての用途が多いですが、個人的には初めに紹介したクリップメモがあれば必要ない気がします。
まるもじ（小）と（大）
まるもじの装飾ができます。こちらは、さっきの吹き出しのまるもじバージョンです。
まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小）まるもじ（大）
まるもじ（大）
まるもじ（大）
まるもじ（大）
まるもじ（大）
まるもじ（大）
まるもじ（大）
まるもじ（大）
もちろん文字色、背景色、表示位置の調整も自由自在にカスタマイズできる。
【表示例】
8月末まで公式サイトで半額！
公式サイトで半額！先着10名様限定
以上のように、見出しの前や後ろにまるもじの装飾を追加することも可能です。先ほどのミニ吹き出しと同じような使い方もできます。
カスタムボタン
フラットデザインのボタン2個と、カスタムボタンが12個の合計14個ものボタンがあります。
ボタンの種類はいろいろありますが、実はそれぞれを自分好みにカスタマイズできます。ボタンの文字サイズや文字色、ボタン色、ボタンの影色、枠線色、枠線太さ、枠の角丸み、グラデーション、アイコンの種類、アイコンの位置（前後）、キラリと光るボタンのON、OFF設定などと盛りだくさんです。
【表示例】
ボタンの種類はたくさんありますが、この中でも1番下にあるマイクロコピー（MC）というボタンは前後に文字が入れれる設定になっています。こうすることでクリックする瞬間の人間の心理や行動を考えて作られたボタン構造なので、クリック率が上昇するのではないでしょうか。
ステップ
step
1ここに文字を入れる
ステップでは、手順を踏んだ流れを伝えたい時に使います。またステップの色や数字、背景色、ボーダー色もカスタマイザーから変更可能です。
【表示例】
アフィたま特典の受け取り方
step
1アフィたまから公式サイトへ
アフィたま内のリンクから公式サイトへ行きます。
step
2公式サイトからinfotopへ
公式サイトの最下部にある赤いボタンを押し、販売ページへ行きます。
step
3購入画面で確認
購入画面に「アフィたまからの贈り物」と書かれていればOKです。
という感じで、購入までのステップ（流れ）を簡潔に分かりやすく伝えることができます。
ラベル
-
2018年3月のアフィリエイト収入報告～お問い合わせ～
左隅の黄色いラベルです。このラベルの文字色、背景色も自由にカスタマイズが可能。
【表示例】
挿入した画像にも、おすすめラベルを付けることができる。
流れる文字
横に流れるようなテロップを表示可能。
流れる文字を表示させることができます。TOPページでお知らせの変わりに使ったりとちょっとおしゃれなアナウンスができますね。
【表示例】
【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。 【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。 【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。 【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。
1つの文章を長くすると、流れるテロップの速度も早くなります。
バナー風ボックス
タイトル
ここに文字を入れる。
バナー風ボックスとは、好きな画像に文字や画像を入れることで簡単にバナー（クリックできる広告）が作れます。その他にも、表示画像の幅や高さ、文字色、文字サイズ、影色、ボーダー色と太さ、背景色、背景画像のぼかし、nofollow、別窓で開く設定などをビジュアルエディタ画面でカスタマイズが可能です。
画像を誰でも簡単にバナー風にできる、こんな機能が実装されているテーマはAFFINGER5以外で見たことがありません。画像の加工が苦手な人でも直感的にできるのが良いですね。
ボックスの種類も豊富
ボックスの種類も豊富にあります。また、記事作成画面でカラーコードなどを使うことで、簡単にボックス色を変更できます。
基本ボックス
黄色いボックスを表示します。
薄赤ボックスを表示します。
グレーボックスを表示します。
引用風ボックスを表示します。
- チェックボックスを表示します。
- チェックの色は変更可能。
- カスタマイザーで変更できる。
- ナンバリングボックスを表示します。
- ナンバリングの色は変更可能。
- カスタマイザーで変更できる。
- 標準のチェックボックスも
- 当然あります。
- 標準のナンバリングも
- 当然あります。
黄色いボックスの枠線（グレー）は、アフィたまでカスタマイズしているので本来は黄色線で表示されます。チェックボックスやナンバリングボックスの色は変更可能です。
カスタマイズできるボックス
ポイント
ボックスの種類も豊富
ボックスの種類も豊富
ボックスの種類も豊富
ポイント
ボックスの種類も豊富
注意ポイント
ボックスの種類も豊富
はてな
ボックスの種類も豊富
これらのボックスもそのまま使うことが可能ですが、あなたのサイト色に合わせて1つひとつを細かくカスタマイズして使えます。
【表示例】
細かなカスタマイズができる
文字色、線の色と太さ、角の丸み、背景色
ボックスはこれだけではありません。他にも凡用性が高いボックスなどがあります。以下で紹介しています。
見出し付きフリーボックス
見出し（全角15文字）
見出し付きフリーボックスはサイドバーにも使えるので便利。アフィたまではプロフィールをこれで装飾して書いています。
見出し付きフリーボックスも、文字色、文字の太さ、ボーダー色、ボーダーの太さ、背景色などが変更可能です。
【表示例】
好きな文字入れて！
タイトル前にアイコン表示、アイコンにアニメーション付与、タイトル背景色を緑色っぽく、文字色は白色、背景色を水色っぽく、ボーダーを太くした。
メモボックス
メモ
一般的なメモボックス。文字フォントの大きさがデフォルトで小さくなっている。
実はこのメモは上のボックスと少し違い、文字の大きさが少し小さめの設定になっている。なので、補足を書くのにピッタリだったりします。補足情報は全ての方が欲しい情報ではないので、少し小さめの文字フォントが良いですね。あくまでも補足なので目立たせないのがGoodです。
スライドボックス
+ 本当にクリックしますか？
クリックすると隠されているコンテンツが現れるスライドボックス。縦長になってしまうコンテンツを「もっと見る」みたいな形で使うと良いですね。こちらも基本的な色の変更などができます。
こんな方におすすめボックス
個人的にも、かなり使いやすく気に入っているおすすめボックス。
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
こんな方におすすめボックスは、文字色、背景色、下線の有無、タイトルアイコン、リストのアイコンなどが変更可能です。
ガイドマップメニュー
ガイドマップメニューをツークリックで簡単表示できます。
記事を読む順番や購入手順などを順番に読んで欲しいコンテンツを並べることができます。それぞれに記事リンクやカテゴリーリンクなどを設定可能で、カラーの設定もできます。
この機能の良いところは、サイドバーでも表示できることです。
【表示例】
会話吹き出し
会話吹き出し機能は、8個まで登録できます。好きな画像や写真を一度設定しておけば、2クリックで何度でも簡単に呼び出して使うことができます。もちろん、そのキャラクターに合った背景色への変更や画像を動かすことも可能です。
【表示例】
拡張プラグイン（有料）を使うと、この会話機能をほぼ無限に増やすことも可能です。基本的に8個あれば足りると思います。
ランキング見出し
これが1位
これが2位
これが3位
これが4位以下
ランキング用の見出しだけを簡単に呼び出す機能です。混同しがちですが、AFFINGER5のランキングとは別の機能で「オリジナルレイアウトのランキングを作りたい」って時に重宝します。このランキング見出しの下にそれぞれの商品記事を書いていきます。
【表示例】1位＝シンプル、2位＝使い勝手の良いランキング
AFFINGER PACK3
アフィリエイトで稼ぐサイト・ブログを作るのに適したWordPressテーマ。このセットはあなたのアフィリエイトライフを補助し、強化してくれる、便利ツールが集結した最強セットだ。
AFFINGER5 WING
- SEOに強い
- 記事作成機能が満載！
- マニュアル付き
- 他にも特典いっぱい
AFFINGER5は別名WINGとも言われるWordPressテーマ。アフィリエイト界隈では、SEOに強く上位表示しやすいなどといった口コミも多く、検索上位のサイトを見るとAFFINGERを使用しているサイトも多い。
アフィリエイトサイトを運営していると、1つのサイト内でたくさんの商品を紹介したい場合や、色んなジャンルの商品をランキング化したい場合があると思います。AFFINGER5ならここで紹介している機能を使い、ランキングを何個でも簡単に作ることができます。
レイアウトも多種多様
レイアウトはサイト運営する上でちょくちょく使用するものです。この機能があれば、ちょっとした文章の分割や画像の分割をする時にとても役立ちます。
読者は縦長のコンテンツを嫌う傾向にあるので、分割レイアウトをうまく使用していきましょう。
PCとタブレットのみ分割【3分割】
左側33%
真ん中33%
右側33%
PCとタブレットで見ると横に3分割されて表示されます。
【表示例1】
スマホでは、縦に表示されます。今スマホで見ている方は同じ縦に並んだ画像が並んでますが、PCで見ると横並びに見えます。
【表示例2】
PCとタブレットのみ分割【4：6】
左側40%
右側60%
凡用性の高い、幅違いの分割もワンクリックで実装できる。PCとタブレットのみ横に並んで表示される（4：6）
【表示例】
右側のコンテンツ60%
例えば左に商品画像を入れて、右のこの部分には商品の説明や特徴を文章として入れるとランキングに似たものができる。
スマホから見ると、右側60%が写真の下に表示されているはずです。この4：6は表示例のように左を画像、右を文章にすることでランキングを自作で作る時にもとても役立ちます。
PCとタブレットのみ分割【5：5】
左側50%
右側50%
PCとタブレットのみ横に5：5で並んで表示される。
【表示例】
PCとタブレットのみ分割【3：7】
左側30%
右側70%
PCとタブレットのみ横に3：7で横に並んで表示される。
【表示例】
- これも左に商品画像を入れて、
- この部分には商品の説明や特徴を
- リスト化（箇条書き）にしても良いよね。
全サイズで分割【5：5】
左側50%
右側50%
PC、タブレット、スマホとすべての表示で横並びになるレイアウト。
【表示例1】
スマホ表示でも横並びになる。
【表示例2】
スマホで横並び表示だと小さくなるので、使い所は考えた方が良いでしょう。
全サイズフリー
80%
20%
全サイズフリーで自由に幅を決められる。
均等横並び
- 均等横並び
- 均等横並び
- 均等横並び
これを使えば、全サイズ（PC、タブレット、スマホ）で3分割表示も可能です。
レイアウトには、これ以外にも「回り込み解除」や「センター寄せ」、「下に余白」、「ランキングボックス」、「wide100％リセット」、「imgインラインボックス」などもあります。
星評価（スター）
「」、「」、「」、「」、「」、「」、「」
星の大きさは自由に変えられる。
【表示例】
ランキングやちょっとした商品のレビューに欠かせない星の評価（スター）。また、☆4.5や☆3.5などの細かい設定があるのが嬉しいところ。テーマのほとんどがデフォルトでこの機能がない為、プラグインで対応しないといけないがAFFINGER5にはこの機能が標準装備されている。
アドセンスタグ
スポンサーリンク
初めに設定したアドセンス広告を1クリックで簡単に貼ることができます。サイドバーウィジットや文章の途中など好きなところへ呼び出せます。
オリジナルショートコード
オリジナルショートコードをポチッと押せば、事前に作成しておいた塊（かたまり）を呼び出すことができます。
【表示例】
あなたが留守のとき、猫ちゃんはこんなかわいい行動をしています。スマホからいつでも愛猫チェックできてしまう話題のアプリ登場！
上のような画像、文章、ボタンなどの少し複雑な組み合わせを作っておけば、何回でも簡単に呼び出せます。（他にも全ての記事下に厳選記事を表示させるとか）内容を修正するときも、1つを直せば全てが修正されます。この機能は便利ですが、1つしか作れないのが欠点です。専用プラグイン「AFFINGERタグ管理マネージャー」を使えば何個でも作れるので私は使っていません。
また、AFFINGER5には別のショートコードを記事中に書くことで、下のような記号も簡単に表示可能です。
【表示例】
[ 下矢印 ]と入れると表示される下矢印。
[ st-under-t color="#000" ]と入れると表示される下矢印。
[ st-maru ]を入れると表示されるマル記号。
[ st-x ]を入れると表示されるバツ記号。
※カッコ[]の中にある半角スペースは消して使用すること。
あまり知られていませんが、上記のようなショートコードもあり、とても簡単に使用することが可能です。
YouTube動画の貼り付け
上は通常の埋め込み方法です。通常のYouTube動画を記事中に埋め込むと、記事の表示スピードが遅くなります。AFFINGERでは、ショートコード[ youtube id= ]を使用することで表示速度の低下を抑える工夫が施されています。
※無料プラグイン「Easy FancyBox」が必要です。
【表示例】
このショートコードを使用すると、貼り付けているのが画像データとなり通常よりも読み込み速度が改善されます。弱点としては、貼られている見た目の画像だけ少し粗くなることですね。（再生中の動画が劣化するわけではありません。）しかし、サイトの表示スピードはGoogleの順位ランキングにも影響があるので、正直うれしい機能です。
目次ショートコード
目次を表示させるショートコードを入れることで、好きなページにのみ目次の表示が可能です。このページのトップに出ているような目次（項目の詳細へジャンプできる機能）を呼び出すことができる。目次のカラー設定も可能。
※無料プラグイン「Table of Contents Plus」もしくは、専用プラグイン「SUGOIMOKUJI」が必要です。
【表示例】
この目次は、アフィたま独自のカスタマイズをしているものです。実際の目次とは見た目が違います。アフィたまの購入特典で、プラグイン「SUGOIMOKUJI」のカスタマイズをプレゼントしています。
用途としては、基本目次を表示させない設定にしておいて、この記事とこの記事だけ目次を表示させたいなどという時に使います。普段あまり使わない機能ですが、あるとやはり便利な機能です。
記事一覧
- 2
もん平のプロフィール
2016/12/17
記事一覧をどこでも自由に表示させられる。この一覧の順番や記事内容は自由に決められるのが便利。ランキング表示のON、OFFもその場で変更が可能です。ここが良い！EXだと…。
カテゴリー一覧（スライドショー対応）
カテゴリー一覧を表示させる機能。先ほどの「記事一覧」と似ているが、カテゴリーIDを指定するだけでカテゴリー内の記事全てを表示可能。もちろん表示数を減らすこともできる。
【表示例1】
PCだと3列表示、スマホだと2列表示されています。
【表示例2】
PCだと2列表示、スマホだと1列表示されています。
【表示例3】
PCだと2列表示、スマホだと1列表示+両端見える設定。
日付の非表示や矢印の色などは全体設定で変更が可能で、記事の投稿画面から簡単にスライドショー化をすることができる。PCとタブレットでは2個並びの表示にして、スマホで見たときは1個表示にすることが可能。また、TOTAL表示数も3個だけにしたり、10個にしたりと、ある程度は自由にカスタマイズが可能。
カテゴリー一覧は、記事一覧と似ている機能だが、ランキング機能はない、また表示数を限定しても表示されるものは投稿した順で自動表示されると思われます。
おすすめ記事一覧
アフィたまの設定では、表示させるとなが～くなってしまうので画像にしています。
おすすめ記事一覧は、好きな記事をサイドバーや記事下へ一括表示させることが可能ですが、記事中やウィジェットでも簡単に使用できます。カラーやランキングアイコンの設定などもでき、画像も四角や丸、ポラロイド風などと用途に応じて変更が可能。
条件表示
AFFINGER5には、以下の条件表示ができる機能も標準装備されています。
- コメントアウト
- PC閲覧時のみ表示
- PC閲覧時のみ非表示
- AMPページのみ表示
- AMPページのみ非表示
- フロントページのみ非表示
- 指定したカテゴリーIDのみ非表示
それぞれの指定を簡単にできます。
例えば、表（table）を作ったとして「PCでの見栄えは良いけど、スマホで見ると表が見にくい」という現象は、サイトやブログ運営をしている人は誰もが通る道です。
私達はいかに分かりやすく読ませられるか、腕の見せところです。
PCでは、下の表だけを表示したい。（スマホでは読みにくい）
| 商品名 | AFFINGER5 | WING | STINGER PRO2 |
| 詳細 | 「稼ぐ」に特化したWordPressテーマです。Twitter見ててもなんやかんやSEOに強い印象。 | WINGはAFFINGER5と同一商品。二つ名みたいなもの。少し紛らわしい。 | AFFINGERよりも機能は劣るがその分、価格が安い。昔からのファンも多いよね。 |
スマホでは、下の表だけを表示したい。（PCでは読みにくい）
| 商品名 | 詳細 |
| AFFINGER5 | 「稼ぐ」に特化したWordPressテーマです。Twitter見ててもなんやかんやSEOに強い印象。 |
| WING | WINGはAFFINGER5と同一商品。二つ名みたいなもの。少し紛らわしい。 |
| STINGER PRO2 | AFFINGERよりも機能は劣るがその分、価格が安い。昔からのファンも多いよね。 |
両方とも書かれている内容は同じですが、どの端末から見るかで読みやすさが違います。
【表示例】
条件分岐を使用した。（実際にPCとスマホで比べて見てね。）
| 商品名 | AFFINGER5 | WING | STINGER PRO2 |
| 詳細 | 「稼ぐ」に特化したWordPressテーマです。Twitter見ててもなんやかんやSEOに強い印象。 | WINGはAFFINGER5と同一商品。二つ名みたいなもの。少し紛らわしい。 | AFFINGERよりも機能は劣るがその分、価格が安い。昔からのファンも多いよね。 |
スマホから見比べると分かりやすいですが、上記のような条件分岐もAFFINGER5なら簡単に反映できます。
WEBアイコン
15種類のWEBアイコンを手軽に呼び出せます。ボタンの前後にアイコンを表示させたり、ボックスのチェックマークを他のアイコンへ変更することもできます。記事の編集画面から簡単に入れることができます。
アニメーション
アイコンにアニメーション（動き）の機能を付けることができ、目を引きつけることができます。このアニメーションは、16種類のパターンが使えます。
45℃揺れ
ベル揺れ
横揺れ
縦揺れ
点滅
バウンド
回転
ふわふわ
大小
シェイク
シェイク（大）
拡大（揺れ）
過ぎる
戻る
バースト
落ちる
上で紹介した機能「ボタン」や「クリップメモ」、「まるもじ」に使用するとオシャレ感がUPします。基本的に、WEBアイコン用として手軽に使えるアニメーション機能ですが、これらを応用すれば文字や画像に動きをつけることもできます。
【表示例】大小
文字や画像へアニメーションの動きを付ける場合は<span>タグで指定する必要があるのでちょっと面倒です。AFFINGER5では、文字や画像にもわずか2クリックで適応できます。欠点として、文字にアニメーションを付けると文字フォントが変わりメイリオになってしまうので注意しましょう。基本的には、アイコンや会話吹き出しで使えば良いですね。
カラーコード
AFFINGER5では、よく使いそうな色のカラーコードを標準装備しています。
赤濃（#e53935）
赤（#f44336）
赤薄（#ffebee）
青濃（#039BE5）
青（#03A9F4）
青薄（#E1F5FE）
緑濃（#43A047）
緑（#4CAF50）
緑薄（#E8F5E9）
橙濃（#FFB300）
橙（#FFC107）
橙薄（#FFF3E0）
黒濃（#212121）
黒（#424242）
黒薄（#FAFAFA）
黃薄（#FFFDE7）
16パターンのカラーコードが登録されています。ボックスやボタン、アイコンカラーとして使えば、「このカラー何色使えば良いんだっけ？」ということが無くなります。カラー設定をする時に「どんな色にしようか？」と悩むことも少なくなるでしょう。
ランキング機能の詳細
サイトやブログを運営していると、必ずランキングを作りたくなります。いろいろ調べるとCSSをいじらなくてはならなかったり、テーマによってうまく表示されなかったりと初心者には大変です。
ランキングを簡単に実装できるテーマを買ったとしても、
- ランキング3位までしか表示できない
- 色んな商品のランキングを表示させたいのに1種類しかできない
なんて話はよく聞きます。このようなテーマは非常に多いです。そこで、AFFINGER5のランキング機能についても、さらに詳しく書いておきます。
ランキング管理の機能
基本的にAFFINGER5で初めから使える「ランキング管理」といわれる機能は、上位3位までの表示しかできません（ランキング3位まで）。また、1種類（1商品）のみのランキングにしか対応していない為、使い勝手がよくありません。
そのかわり、ここのランキング管理に入力しておけば、記事中、サイドバー、スマホのスライドバーなど、様々な場所で簡単に表示させることができます。また、1箇所のランキングを修正すれば全ての内容が連動して変わってくれます。
もし、ランキング機能で4位以下の表示をさせたい場合には、プラグインの「AFFINGERタグ管理マネージャー2（有料）」を導入する必要があります。そうすることで1位～10位まで表示したいなんてこともできます。このプラグインはAFFINGER PACK3のセットを買うと一緒に付いてくるプラグインです。
【有料】AFFINGERタグ管理マネージャー2を使用したランキング
有料プラグイン「AFFINGERタグ管理マネージャー2」を使ったランキングの場合、いちど登録しておけばランキング管理で4位以降の表示が可能になります。また、ショートコードと呼ばれる[ st_af id="6087" ]こんな感じの文字列を入力するだけで簡単に表示できるので繰り返し使うときにとても便利です。
ランキング管理機能の拡張（4位以降）をしたい時や、リンクのクリック計測をしたい時に、このプラグインのランキング機能を使用します。
【表示例】
AFFINGER5 WING
ここが画像バナーの横に表示されるエリアです。ここが画像バナーの横に表示されるエリアです。ここが画像バナーの横に表示されるエリアです。
ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。
ここまで。
しかし、これ単体で使用するとランキングの王冠アイコンが1種類しか表示されません。先ほど言ったように、このプラグインでランキングを表示させた場合、ランキング管理で1位～3位までしか表示できなかった商品を4位以降まで表示可能になりますが、それはあくまでも1つのランキング（商品）のみです。
メモ
例えば、「おすすめ本ランキング」を10位まで作ります。次に、同じサイト内で別の商品「おすすめ音楽ランキング」を10位まで作りたい場合、同じようには作れません。AFFINGER5のランキング管理は1つしかないので、このプラグインのみでランキングを作った場合では、ランキングアイコンが全て同じになってしまいます（イメージ的には、おすすめ音楽10選みたいな感じ）。
AFFINGER5では、ランキングの見出しだけを個別で簡単に作成する機能があるので、それと併用すると良いでしょう（ランキング見出し機能を見る｜上へ移動）。画像バナーは大と小を選ぶことができます（今は小が表示されています）。
このプラグインは「クリック計測」や「一括管理」として使うことが主な目的です。ランキング用に購入するという感じではないかなと思います。
【表示例】
見出しも簡単表示できる
ここが画像バナーの横に表示されるエリアです。ここが画像バナーの横に表示されるエリアです。ここが画像バナーの横に表示されるエリアです。
ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。ここが画像バナーの下に表示されるエリアです。
上は、ランキングの見出しを作り、その下は「AFFINGERタグ管理マネージャー2」で作ってあるので、クリック計測も出来るランキングになっており、これは何個も作成が可能です。
なんだかややこしい気もしますが、AFFINGER5では用途により色んな表示パターンが選べるということです。※このプラグインはAFFINGER PACK3を買うと付いてきます。
ランキング見出し機能だけでも作成可能
ランキング見出し機能とここまで書いてきた機能を組み合わせれば、「ランキング管理」や「タグ管理マネージャー2」がなくてもAFFINGER5のテーマ単体があれば、比較的簡単に作ることは可能です。こちらのやり方は、1つひとつ作る手間が掛かりますが柔軟なランキングを作成できます。いくつも作成が可能。（ランキング見出し機能を見る｜上へ移動）
【表示例】
AFFINGER5 WING
- SEOに強い
- 記事作成機能が満載！
- マニュアル付き
- 他にも特典いっぱい
AFFINGER5は別名WINGとも言われるWordPressテーマ。アフィリエイト界隈では、SEOに強く上位表示しやすいなどといった口コミも多く、検索上位のサイトを見るとAFFINGERを使用しているサイトも多い。
手間が掛かると言っても、1つ作ればあとはコピペすればよいので簡単だけどね…。プラグインで作ったようなクリック計測はできません。
結果的にAFFINGER5では、プラグインが無くてもテーマのみで柔軟なランキングの作成ができます。よく聞くのが「他のテーマを買ったは良いけど、ランキング機能がショボくてがっかりした」なんてのはザラにあるので、その点AFFINGER5は優れています。
有料テーマのどこにフォーカスして買うかが大切ですね。
まとめ
ここまでAFFINGER5 WINGの機能・文字装飾などの記事作成時にできることをながながと書いてきました。
じつはこの記事を書くのに、めちゃくちゃ時間かかりました。他の方がAFFINGER5の機能についてガッツリかいていない理由もこれで分かった気がします。AFFINGER5は機能が多すぎて書くのが大変だからです。しかも頻繁に機能が追加される（してくれる）ので、このあとの更新も大変な気がしています。
基本的に、ここで書いてある機能はAFFINGER5の通常版で出来ることです。EX版になると機能はもっと多くなっています。しかも、ここで紹介しているのは、記事を書くときの機能だけなのでAFFINGER5 WINGで出来ることはもっとありますからね。
この記事を読んでAFFINGER5が気になった人は、こちらも読むと参考になります。
参考リンクAFFINGER5が「稼ぐサイト」と呼ばれる理由！アフィリエイトを始めるならテーマはこれ
参考リンク【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方