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

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

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

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

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

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

1ページ目

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

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

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

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

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

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

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

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

テキスト

赤文字になる。

太文字になる。

赤字の太字になる。

大文字になる。

小文字になる。

ドット下線を引ける。

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

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

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

打ち消し線になる。

コードも入れれる。

コード風にもできる。

アイコン

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

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

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

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

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

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

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

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

カウント

ここからカウント

こんな感じで

表示できる

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

【表示例】

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

見出し

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

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

h2風の見出し

h3風の見出し

h4風の見出し

h5風の見出し

まとめ風の見出し

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

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

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

ランキング見出し（管理CSS対応）

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

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

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

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

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

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

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

1位　鬼滅の刃 【】

鬼滅の刃 19 （ジャンプコミックス） [ 吾峠 呼世晴 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

2位　ワンピース 【】

ONE PIECE 94 （ジャンプコミックス） [ 尾田 栄一郎 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

3位　キングダム 【】

キングダム 55 （ヤングジャンプコミックス） [ 原 泰久 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

マーカー

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

黃マーカー

黃マーカー（細）

赤マーカー

赤マーカー（細）

青マーカー

青マーカー（細）

鼠マーカー

鼠マーカー（細）

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

写真の装飾

写真の装飾ができます。

枠線付き

ポラロイド風

ワイド

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

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

【表示例】

装飾なし画像

枠線あり画像

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

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

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

ボックス

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

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

【表示例】ワイド背景

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

リスト

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

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

カードスタイル

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

通常の内部リンク

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

ブログカードスタイル

カードスタイル

カードスタイルB

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

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

テーブル

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

テキストの中央配置

装飾なし（枠線なし）

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

クリップメモ

クリップメモ（テキスト）

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

ミニ吹き出し

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

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

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

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

複合（アイコンあり、なし）

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

アイコンあり

アイコンなし

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

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

まるもじ（小）と（大）

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

まるもじ（大）

まるもじ（大）

まるもじ（大）

まるもじ（大）

まるもじ（大）

まるもじ（大）

まるもじ（大）

まるもじ（大）

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

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

HTML（カスタム）

夜露死苦よろしく

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

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

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

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

カスタムフォント

カスタムフォント

カスタムフォント

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

ステップ

step
1ここに文字を入れる

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

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

ポイント

ここにテキストを入れる

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

ラベル

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

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

流れる文字

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

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

バナー風ボックス

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

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

ボックスの種類も豊富

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

基本ボックス

• 標準のチェックボックスも
• 当然あります。

1. 標準のナンバリングも
2. 当然あります。

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

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

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

【表示例】

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