AFFINGER

【マニュアル】AFFINGER6 ACTIONの機能や文字装飾など出来ること(旧:AFFINGER5)

AFFINGER5 WINGのマニュアル

AFFINGER6で検索しても、記事を書く時にできること(機能や文字装飾)は少ししか紹介されていません。まだまだ知られていない部分も大量にあるので、その魅力を紹介したいと思います。

  • 「どんな機能が備わっているか?」
  • 「どんな文字装飾ができるのか?」
  • 「ランキング機能はしっかりしているか?」

このように「自分の求めている機能があるのか」と疑問をお持ちであれば、読んでください。いろいろ詰め込んでいるので、このページは少し重いですがご了承ください。

購入すればマニュアルサイトがあり、ちゃんと使い方の説明もあって分かりやすいんですが、購入前はそのマニュアルサイトが見れないので、AFFINGER6にどんな機能があるかここでハッキリ理解してから購入しましょう。

基本ここで書いている装飾は、AFFINGER6の通常版でできることを書いています。AFFINGER6 EXの場合、これ以上の機能を使用することができます。

アフィたまの特典付き!

この記事では、AFFINGERのアップデートに伴い一部反映できていない機能や、逆に使えなくなった機能があるかもしれません。ご了承のうえ、閲覧してください。

1ページ目

このマニュアル記事はとても長い為、ページを分割しています。

現在1ページ目です。>>マニュアルの2ページ目へ進む

※記事の最後からでも移動できます。

AFFINGER6 ACTIONの機能や記事装飾のマニュアル

AFFINGER6 ACTIONでは、記事を書く時の装飾がとても豊富にあります。

そして他のテーマと違うところが、この記事の装飾を細かくカスタマイズできることです。

当然、無理にカスタマイズせず、そのままでもボタンをポチポチするだけで初心者でも簡単に装飾をしながら楽しく文章を書けるようになります。

この記事では、AFFINGER6 ACTIONの使い方は記していません。あくまでも購入前の参考として、あるいはマニュアルとして「こんな機能あったかな?」という時に使用してください。

テキスト

赤文字になる。

太文字になる。

赤字の太字になる。

大文字になる。

小文字になる。

ドット下線を引ける。

こんなのも入れれる。(参照リンクマーク)

参考が書ける。中身は何にでも変更可能

必須も書ける。中身は何にでも変更可能

打ち消し線になる。

コードも入れれる。

コード風にもできる。

アイコン

はてなマークのアイコンを入れれる。

注意マークのアイコンを入れれる。

人物マークのアイコンを入れれる。

チェックマークのアイコンを入れれる。

メモマークのアイコンを入れれる。

王冠マークのアイコンを入れれる。

初心者マークのアイコンを入れれる。

これらのアイコンは、後にくる文字と連動しており、文字色や大きさを変えることが可能です。

【表示例】

王冠マーク、赤文字、サイズ150%。

カウント

ここからカウント

こんな感じで

表示できる

カウント表示をさせることができます。これを見出しに使うと順番表示ができたりします。

【表示例】

ここからカウント

こんな感じで

表示できる

このカウント機能の良いところは、目次に数字が反映されないところです。目次に1.や2.などが入っていてもSEO上あまり得をしないので、表示されないナンバリングできる機能が優れています。

見出し

キャッチコピー風の小さい見出し

記事タイトル風の大きい見出し

h2風の見出し

h3風の見出し

h4風の見出し

h5風の見出し

まとめ風の見出し

ここに書いてあるのは、あくまで風(ふう)なのでh2見出し風で書かれた場合は、見た目だけがh2になります。なので目立たせたいけど、目次には表示させたくない時などに役に立ちます。

見出しの設定自体は、別途カスタマイザーにて色んな種類に変更できます。用途としては限られてきますが、一度文章を区切りたいときやランキングの見出しに使ったりとあると役立つ機能です。

以上のものを組み合わせることで、表現方法が広がっていきます。

【表示例】

絶対に教えたくない!おすすめな本ランキング

ランキング見出し(管理CSS対応)

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

ランキング用の見出し(h4)だけを簡単に呼び出す機能です。

AFFINGER6にはランキング機能がたくさんあるのですが、このランキングはショートコードではなくHTMLで書かれている為、CSSやHTMLのコードをいじることで色々なカスタマイズにも柔軟に対応しています。

また、文字色、背景色、下線色の基本的なカスタマイズについては、HTMLなどをいじらなくても簡単に実装することができます。(ランキング管理→CSS)

後で出てきますが、CSSやHTMLが苦手な人はショートコードで設置するランキング表示の方がもっと簡単にカスタマイズできるので安心してください。

【表示例】赤文字、背景色、アンダーラインなど

絶対に教えたくない!おすすめな本ランキング

1位 鬼滅の刃 【

2位 ワンピース 【

3位 キングダム 【

マーカー

8種類のマーカーがあります。

黃マーカー

黃マーカー(細)

赤マーカー

赤マーカー(細)

青マーカー

青マーカー(細)

鼠マーカー

鼠マーカー(細)

蛍光ペン風のマーカーで記事作成時に見栄えがリッチになります。最近はどのサイトでもこのようなマーカーを使われていますね。CSSに書き込んで使用するのが一般的ですが、AFFINGER6では標準装備されています。

写真の装飾

写真の装飾ができます。

枠線付き

写真の機能、装飾

ポラロイド風

写真の機能、装飾

ワイド

夕方

風景画像などはポラロイド風で表示すると写真の感じが出て見た目もきれいですね。枠線は、写真の背景が白色や明るいときでも境界線を目立たせるのに役立ちます。

ワイドは記事幅いっぱいまで広がってくれる写真になるので迫力があります。スマホでの見た目がかなり違ってくるので、ワイドはスマホから見てほしいですね。

【表示例】

装飾なし画像

写真に枠線機能

枠線あり画像

写真に枠線機能

ポラロイド風にコメント入れる

写真の機能、装飾

ここに好きな文字を入れれる

上のように、ポラロイド風にコメントを入れることも可能です。

ボックス

黄色いボックス

薄赤のボックス

グレーのボックス

引用風のボックス

ワイド背景

ワイド背景(左寄せ)

ワイド背景(右寄せ)

基本的な良く使うボックスデザインは4種類あります。後で紹介しますが、この基本以外にも多くのボックスデザインが用意されており、自分でカスタマイズもできるからオリジナルのボックスを簡単に作ることも可能です。

また、ワイド背景などは他のテーマでは見たこと無い機能なので、AFFINGER6の特権かもしれないですね。

【表示例】ワイド背景

◆AFFINGER6が豪華特典付きで販売中!

affinger_action_banar_300

AFFINGER6は、アフィリエイトに特化したテーマであり、誰でも簡単にきれいなサイトが作成可能だ。

アフィリエイターにとって、これほど心強いものは他にはない唯一のテーマ。

詳しくはコチラ

このように急に幅が広がると、公式サイトのような演出ができ、スマホからの見た目もかなりリッチになりますよね。PCで見た場合は1カラムにしてワイド背景を使うと、まるで公式サイトのようなインパクトのある綺麗なサイトになります。

リスト

  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  • AFFINGER6のリスト表示
  1. AFFINGER6のリスト表示
  2. AFFINGER6のリスト表示
  3. AFFINGER6のリスト表示
  1. AFFINGER6のリスト表示
  2. AFFINGER6のリスト表示
  3. AFFINGER6のリスト表示
  1. AFFINGER6のリスト表示
  2. AFFINGER6のリスト表示
  3. AFFINGER6のリスト表示

AFFINGER6の度重なるアップデートでリスト表示1つにしても10個ものパターンがあります。もちろん●や■の色は変更ができます。

これらと先ほどのボックスなどを組み合わせることで、数十種類以上のリストの作成が可能です。

【表示例】ボックスと組み合わせる

  1. AFFINGER6のリスト表示
  2. AFFINGER6のリスト表示
  3. AFFINGER6のリスト表示

カードスタイル

内部リンクをおしゃれなカードスタイルに変更できます。種類は3つです。

通常の内部リンク

【実践編】AFFINGER6の購入方法と手順|初めてでも分かるアフィンガーの買い方

ブログカードスタイル

AFFINGERの購入方法と手順
【実践編】AFFINGER6の購入方法と手順|初めてでも分かるアフィンガーの買い方

続きを見る

カードスタイル

カードスタイルB

カードスタイルとカードスタイルBはパソコン上では同じレイアウトになっています。違うところは、スマホで見たときにカードスタイルBはブログカードで表示されることです。

このカードスタイルには少し弱点があって、スマホからカードスタイルBを見ると微妙な感じになっています…。一応「続きを読む」や「画像」などは非表示にもできます。殆どの人はブログカードスタイルのみ使用していくかと思いますのであまり支障はないと思います。記事をカードスタイルで表示させたい場合は、別売りの子テーマ「JET」を購入するともっと綺麗な表示になったりします。

テーブル

スマホで見ると横スクロール

商品名特徴
AFFINGER6「稼ぐ」に特化したWordPressテーマ。
AFFINGER PACK3AFFINGER6に有料プラグインが2つ付いたお得なセット。
STINGER PRO2AFFINGERよりも機能は劣るがその分、価格が安い。

テキストの中央配置

商品名特徴
AFFINGER6「稼ぐ」に特化したWordPressテーマ。
AFFINGER PACK3AFFINGER6に有料プラグインが2つ付いたお得なセット。
STINGER PRO2AFFINGERよりも機能は劣るがその分、価格が安い。

装飾なし(枠線なし)

商品名特徴
AFFINGER6「稼ぐ」に特化したWordPressテーマ。
AFFINGER PACK3AFFINGER6に有料プラグインが2つ付いたお得なセット。
STINGER PRO2AFFINGERよりも機能は劣るがその分、価格が安い。

横スクロールを使うと、スマホで見た時に横にスライドできる表になります。中央配置は文字が全て中央表示になります。装飾なしテーブルを使うと、枠線が消えます。横スクロールは、とても便利ですね。

クリップメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

クリップメモ(テキスト)

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

AFFINGER6のちょっとしたメモ

12種類のクリップメモがあり、用途は様々です。それぞれアイコンの大きさ、色、背景色、文字色もその場で簡単にカスタマイズが可能です。(ビジュアルエディタ画面で変更可能)

【表示例】

アイコンを3倍にしてアイコン色、背景色、文字色、文字の大きさを変更

ミニ吹き出し

ミニ吹き出し

ミニ吹き出し

ミニ吹き出し

ミニ吹き出し

ミニ吹き出し

ミニ吹き出し

ひとことコメントなどに役立つ、カラフルで綺麗なミニ吹き出し。もちろん文字色、背景色、表示位置などの細かな調整もできる。

この記事を修正してて気付きましたが、なんと最近のアップデートで画像を簡単に入れることにも対応しています。しかも写真が自動で丸くカットされますが、そのままの表示もできます。AFFINGER6機能ありすぎる…。

【表示例】

もん平もん平だよ!

ミニ吹き出しのデフォルトの表示位置。写真は四角いまま(元画像は四角いし、でかい)。

もん平もん平なんだよ!

ミニ吹き出しの表示位置を下に移動させた。ボックスや画像に「目立つひとことコメント」を装飾できます。写真が自動で丸くトリミングされる(元画像は四角のまま)。

AFFINGER6 ACTIONでは、こんなに細かい設定まで出来ます。他のテーマでは、表示できるとしても移動させるような機能がないものがほとんどです。AFFINGER6はこういうカスタマイズ性で一歩先にいっているテーマです。

たった少しの違いでも、見た目や読みやすさが変わり、文章の伝わりやすさは何倍にも変わります。

複合(アイコンあり、なし)

複合アイコンとは、上で紹介したクリップメモと見に吹き出しを掛け合わせたものがデフォルトで用意されています。それぞれ左側に大きなアイコンのあり、なしが存在します。

アイコンあり

自由なメモ

←アイコンありのメモ

ココがポイント

←アイコンありのポイント

ココがおすすめ

←アイコンありのおすすめ

ココがダメ

←アイコンありのココがダメ

ココに注意

←アイコンありの注意

さらに詳しく

←アイコンありの詳しく

◯才女性

←アイコンありの女性

◯才男性

←アイコンありの男性

アイコンなし

自由なメモ

←アイコンなしのメモ

ココがポイント

←アイコンなしのポイント

ココがおすすめ

←アイコンなしのおすすめ

ココがダメ

←アイコンなしのココがダメ

ココに注意

←アイコンなしの注意

もっと詳しく

←アイコンなしの詳しく

つまづきポイント

←アイコンなしのはてな

これらの複合メモも、各種カラーや角の丸みなど自由にその場で変更が可能です。

【表示例】

ココがおすすめ

AFFINGER6は機能が満載!

使い所としては、ワンポイントアドバイスとか注意点としての用途が多いですが、個人的には初めに紹介したクリップメモがあれば必要ない気がします。

まるもじ(小)と(大)

まるもじの装飾ができます。こちらは、さっきの吹き出しのまるもじバージョンです。

まるもじ(小) まるもじ(小) まるもじ(小) まるもじ(小) まるもじ(小) まるもじ(小)

まるもじ(大)

まるもじ(大)

まるもじ(大)

まるもじ(大)

まるもじ(大)

まるもじ(大)

まるもじ(大)

まるもじ(大)

もちろん文字色、背景色、角の丸み、表示位置の調整なども自由自在にカスタマイズできる。そして、こちらも画像を入れれるようになっていました。

【表示例】見出しの一部で使うこともできる

8月末まで公式サイトで半額!

公式サイトで半額!先着10名様限定

先着10名様限定公式サイトで半額!

パンダASP画像もできるっすね!

以上のように、見出しの前や後ろにまるもじの装飾を追加することも可能です。先ほどのミニ吹き出しと同じような使い方もできます。

HTML(カスタム)

夜露死苦よろしく

[ st-p add_style="" ]テキスト[ /st-p ]

[ st-span add_style="" ]テキスト[ /st-span ]

漢字の上にフリガナを振ることができます。また、CSSやHTMLを少し理解していると、役に立つ機能が備わっています。

上のようなコードを1クリックで入れれるので、文字の装飾が簡単になり、テキストエディタへ移動しなくても、ビジュアルエディタのままカスタマイズができてしまいます。初心者の人は難しければ、無理に使わなくてもいい機能ですけどね。

【表示例】

赤文字にして文字白、大きく、背景変えてまた赤文字に…

カスタムフォント

カスタムフォント

カスタムフォント

カスタムフォントはテキストに様々な装飾をつけることができます。その中でもテキストにシャドウを付けたり、余白の設定をしたりとCSSをいじらなければできないことが記事投稿画面から簡単にできるようになります。

【表示例】

赤字でシャドウを付けた文字、少し右へ移動

ステップ

step
1
ここに文字を入れる

ステップでは、手順を踏んだ流れを伝えたい時に使います。またステップの色や数字、背景色、ボーダー色もカスタマイザーから変更可能です。

【表示例】

アフィたま特典の受け取り方

step
1
アフィたまから公式サイトへ

アフィたま内のリンクから公式サイトへ行きます。

step
2
公式サイトからinfotopへ

公式サイトの最下部にある赤いボタンを押し、販売ページへ行きます。

step
3
購入画面で確認

購入画面に「アフィたまからの贈り物」と書かれていればOKです。

という感じで、購入までのステップ(流れ)を簡潔に分かりやすく伝えることができます。

ポイント

ここにテキストを入れる

丸印のポイントを入れることができます。ポイントの色はカスタマイズで変更できます。その他、文字の大きさ、太さ、テキスト下にボーダーを入れることもできます。

【表示例】

文字の大きさ150%、下線色#A61919。

ラベル

左隅のオレンジ色のラベルです。このラベルの文字色、背景色も自由にカスタマイズが可能。

【表示例】

げきあつ

AFFINGER6ACTIONは稼ぐサイト

挿入した画像にも、おすすめラベルを付けることができる。

流れる文字

横に流れるようなテロップを表示可能。

流れる文字を表示させることができます。TOPページでお知らせの変わりに使ったりとちょっとおしゃれなアナウンスができますね。

【表示例】

【お知らせ】AFFINGER6 ACTIONの機能はまだまだあるよ。 【お知らせ】AFFINGER6 ACTIONの機能はまだまだあるよ。 【お知らせ】AFFINGER ACTIONの機能はまだまだあるよ。 【お知らせ】AFFINGER6 ACTIONの機能はまだまだあるよ。

1つの文章を長くすると、流れるテロップの速度も早くなります。

バナー風ボックス

タイトル

ここに文字をいれる

タイトル

背景なし高さ400px

タイトル左寄せ

テキスト左寄せ

 

タイトル

ここに文字を入れる。

バナー風ボックスとは、好きな画像に文字や画像を入れることで簡単にバナー(クリックできる広告)が作れます。その他にも、表示画像の幅や高さ、文字色、文字サイズ、影色、ボーダー色と太さ、背景色、背景画像のぼかし、nofollow、別窓で開く設定などをビジュアルエディタ画面でカスタマイズが可能です。

【表示例】

さぁ、夜景を見に行こう。

もん平トラベルへ

2日間限定

Amazonプライムデー開催

年に一度のタイムセールが7/16(月)スタート!
無料登録で誰で
も参加可!詳細はここから

画像を誰でも簡単にバナー風にできる、こんな機能が実装されているテーマはAFFINGER6以外で見たことがありません。画像の加工が苦手な人でも直感的にできるのが良いですね。

ボックスの種類も豊富

ボックスの種類も豊富にあります。また、記事作成画面でカラーコードなどを使うことで、簡単にボックス色を変更できます。

基本ボックス

黄色いボックスを表示します。

薄赤ボックスを表示します。

グレーボックスを表示します。

引用風ボックスを表示します。

  • チェックボックスを表示します。
  • チェックの色は変更可能。
  • カスタマイザーで変更できる。
  1. ナンバリングボックスを表示します。
  2. ナンバリングの色は変更可能。
  3. カスタマイザーで変更できる。
  • 標準のチェックボックスも
  • 当然あります。
  1. 標準のナンバリングも
  2. 当然あります。

黄色いボックスの枠線(グレー)は、アフィたまでカスタマイズしているので本来は黄色線で表示されます。チェックボックスやナンバリングボックスの色は変更可能です。

カスタマイズできるボックス

ポイント

ボックスの種類も豊富

ボックスの種類も豊富

ボックスの種類も豊富

参考

ボックスの種類も豊富

関連

ボックスの種類も豊富

メモ

ボックスの種類も豊富

ポイント

ボックスの種類も豊富

注意ポイント

ボックスの種類も豊富

はてな

ボックスの種類も豊富

ふきだしテキスト

ボックスの種類も豊富

<p>コード用ボックス</p>

これらのボックスもそのまま使うことが可能ですが、あなたのサイト色に合わせて1つひとつを細かくカスタマイズして使えます。

【表示例】

細かなカスタマイズができる

文字色、線の色と太さ、角の丸み、背景色

ボックスはこれだけではありません。他にも凡用性が高いボックスなどがあります。以下で紹介しています。

次のページへ >

【期間限定!】ドメイン永久無料&初期費用半額!

ブログ書く人はこちら↓

法人の人はこちら↓

-AFFINGER