アフィンガー6の装飾機能を全て紹介【クラシックエディター編】

 

アフィンガー6の装飾機能の「全て」をご紹介しています。見本としてもご参考ください。

 

テキストパーツ

 

クリップメモ

 

メモ

外部リンク

こちらの「外部リンクタグ」と呼ばれるのは、ただの枠であってURLを貼り付けただけで外部のサイトに移動できる機能はありません。

ブックマーク

おしらせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文グレー

クリップメモ変更可能箇所

  • 背景色のみ

※WEBアイコン・アイコンカラー・線の色・アイコンのサイズはタグを変更しても変化しません

クリップメモ テキスト

メモ

クリップメモのデフォルトのテキストは変更できないようになっています。

メモ

参考

関連

注意

Check

次に進む

前に戻る

質問

回答

クリップメモテキスト 変更可能箇所

  • 背景色のみ

※WEBアイコン・アイコンカラー・線の色・アイコンのサイズはタグを変更しても変化しません

ミニ吹き出し

 

基本

ミニ吹き出し基本

オレンジ

ミニ吹き出しオレンジ

ピンク

ミニ吹き出しピンク

ブルー

ミニ吹き出しブルー

グリーン

ミニ吹き出しグリーン

レッド

ミニ吹き出しレッド

マイボックス

ふきだしテキスト

ミニ吹き出しの変更可能箇所

  • 背景色
  • ウエブアイコンが挿入できる(ショートコード)

※フォントに関してはタグの中では変更できないが、120%・130%・150%などのタグを付けると文字の大きさが変更できる

複合

複合については、左側に「📝・👍・🔎・👤」といったアイコンが配置されています。

これがスマホで見るとテキストのエリアのスペースが狭くなる仕様になっています。※テキストが長いとかなり長い囲み枠になり恰好悪い

この複合のタグを使う場合は、テキストはできるだけ少なめにするのがおすすめ、テキストを増やす場合は次のセクションの「複合・アイコンなしタイプ」を活用されるのがおすすめです。

メモ

なお、デフォルトのテキストは変更できるようになっています。

自由なメモ

自由なメモ

ここがポイント

ココがポイント

ここがおすすめ

ココがおすすめ

ここがダメ

ココがダメ

ここに注意

ココに注意

もっと詳しく

さらに詳しく

女性コメント

◯才女性

男性コメント

◯才男性

複合の変更可能箇所

以下は吹き出しと枠内のいずれも変更可

  • 背景色
  • 文字色
  • ウエブアイコン
  • 吹き出しの中のテキスト

複合・アイコンなし

複合アイコンなしについては、上に「📝・👍・🔎・👤」といったアイコンが配置されています。

前述複合アイコンありタイプのタグとはちょっとだけデザインが変わっています。

メモ

なお、デフォルトのテキストは変更できるようになっています。

自由なメモ

自由なメモ

ここがポイント

ココがポイント

ここがおすすめ

ココがおすすめ

ここがダメ

ココがダメ

ここに注意

ココに注意

もっと詳しく

もっと詳しく

はてなマーク

つまづきポイント

複合アイコンなしの変更可能箇所

以下は吹き出しと枠内のいずれも変更可

  • 背景色
  • 文字色
  • ウエブアイコン
  • 吹き出しの中のテキスト

まる文字小

 

基本

アフィンガー6まる文字小基本

オレンジ

アフィンガー6まる文字小オレンジ

ピンク

アフィンガー6まる文字小ピンク

ブルー

うすい注意

アフィンガー6まる文字小うすい注意

注意

アフィンガー6まる文字小注意

まる文字小の変更可能箇所

  • ウエブアイコンが挿入できる
  • 背景色
  • 文字色

まる文字大

 

基本

アフィンガー6まる文字大基本

オレンジ

アフィンガー6まる文字大オレンジ

ピンク

アフィンガー6まる文字大ピンク

ブルー

アフィンガー6まる文字大ブルー

はてな

アフィンガー6まる文字大はてな

チェック

アフィンガー6まる文字大チェック

うすい注意

アフィンガー6まる文字大うすい注意

注意

アフィンガー6まる文字大注意

まる文字大の変更可能箇所

  • ウエブアイコンが挿入できる
  • 背景色
  • 文字色

HTMLタグ

 

ルビ・フリガナ

漢字の上にふりがなを付ける感じのタグです。

バラ


薔薇

PタグとSpanタグ

PタグとSpanタグの挿入に関しては、特にクラシックエディターユーザーに作業効率UPのメリットがあります。

通常これらのタグを挿入する場合はテキストエディターからタグを入れる必要がありますが、このタグを使うと投稿のビジュアルエディター上にこれらのタグを挿入できます。

カスタムフォント

 

デフォルト

アフィンガー6デフォルトのカスタムフォント

「通常のフォントの150%」

の設定↑が上のデフォルトのフォントと同等の大きさです。

白影

アフィンガー6白影のカスタムフォント

このフォントは下のように背景に色が付くとかなり映えます。

アフィンガー6白影のカスタムフォント

カスタムフォントの変更可能箇所

  • 文字色
  • ウエブアイコンを先頭に挿入できる
  • 影の色

変更した例が以下の通りです。

アフィンガー6デフォルトのカスタムフォント

ステップ

アフィンガー6のタグから挿入するステップは、以下の例のように活用できます。

step
1
アフィンガー6をインストール

「外観>テーマ>新規追加」からアフィンガー6のテーマファイルをアップロードします。

step
2
プラグインをインストール

アフィンガー6におすすめプラグイン・おすすめしないプラグインを正直紹介

続きを見る

step
3
このとおりカスタマイズするとすぐに記事執筆がスタートできる

アフィンガー6のおすすめカスタマイズ方法・1時間でブログが完成形に!トップページにも

続きを見る

熊谷ヒカル
これはステップと、記事紹介カードを組み合わせてアフィンガー6の使い方を流れで説明した例です。
シロクマ
いろんなシチュエーションに使えそうだよね!

ポイント

以下アフィンガー6のポイントタグは、テキストメインですっきりとポイントを伝えたいときによいタグです。

アフィンガー6のカスタマイズのポイント

ほか上述してきた「ポイント」と名前が付けられたタグには以下3種類ありますが、時と場合によって使い分けるのがおすすめです。

ココがポイント

ココがポイント

ポイント

ラベル

アフィンガーのラベルタグは、以下のように記事紹介カードと一緒に活用するといいのではないでしょうか。

おすすめ
アフィンガー6のおすすめカスタマイズ方法・1時間でブログが完成形に!トップページにも

続きを見る

このタグは、以下のように「ラベルタグの下にカードのタグを挿入するだけ」です。

または下のように「ラベルタグ+画像+特定ページへのリンク(画像に設置)」というように設定してラベルタグを使う方法もあります。

おすすめ

流れる文字

流れる文字は以下の通り。右から左に流れるスタイルです。

アフィンガー6流れる文字

流れる文字に色を付けて太文字にしたバージョン

カスタムフォントを流れる文字にしてみたバージョン

熊谷ヒカル
流れる文字のタグで囲みさえすれば、いろんな流れる文字が設定できますよ!
シロクマ
ミニ吹き出しはギリ流れる文字にできましたw いろいろ試してみてください

ミニ吹き出しを流れる文字にしてみた

アフィンガー6のタグ・ボックスデザイン編

 

バナー風ボックス

基本

タイトル

背景なし 高さ400PX

タイトル


タグの中にURLや背景画像の情報を入れた場合

【これで完璧】アフィンガー6のカスタマイズ


左寄せ

タイトル


URLや背景画像を入れた場合

アフィンガー6ご購入特典

マイボックス

 

基本

ポイント

しかく 枠のみ

まるみ

 

参考

参考

関連

関連

メモ

メモ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

+ミニふきだし

ふきだしテキスト

short code

マイボックスの変更可能箇所

  • 背景色
  • 文字色
  • ウエブアイコン
  • 枠線の色

マイボックス +CSSクラス

 

メモ

メモ

メモ 下線のみ

メモ

メモ 枠のみ

メモ

メモ 枠+下線あり

メモ

注意 下線のみ

ここに注意

必要なモノ

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

必要なモノ ドット下線

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト ドット下線

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ ドット下線

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

マイボックス+CSSの変更可能箇所

  • 背景色
  • 文字色
  • ウエブアイコン
  • 枠線の色
  • タイトルテキスト
  • タイトル下の線の色

以下がカスタマイズしてみた一例です。

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

見出し付きフリーボックス

 

基本

見出し(全角15文字)

注意

注意

はてな

はてな

ポイント

ポイント

メモ

メモ

基本 タイトル幅100%

見出し(全角15文字)

注意 タイトル幅100%

見出し(全角15文字)

はてな タイトル幅100%

はてな

ポイント タイトル幅100%

ポイント

メモ タイトル幅100%

メモ

見出し付きフリーボックスの変更可能箇所

以下の通りタグの内容をカスタマイズできます。

  • 見出しのタイトルテキスト
  • タイトル背景色
  • タイトル文字色
  • ウエブアイコン
  • 背景色

メモボックス

メモ

 

上のメモボックスはテキストだけカスタマイズできます。

MEMO

 

スライドボックス

スライドボックスのカスタマイズ

アフィンガー6のスライドボックスでカスタマイズできるのは以下の2か所だけとなっています。

  • タイトルテキスト
  • ウエブアイコン
熊谷ヒカル
背景色はカスタマイズできないようになっています。

チェックボックス 番号なしリスト

このアフィンガー6「チェックボックス番号なしリスト」は、枠線にしか見えないのですが分かったら追記します。

こんな方におすすめ

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

こんな方におすすめのカスタマイズ

  • タイトルテキストのみ

ガイドマップメニュー

アフィンガー6のタグから挿入するガイドマップメニューを例として以下のように作成してみました。

▼アフィンガーをインストールした後のやること流れ、のガイドマップ例

ガイドマップメニューのカスタマイズ

背景色・文字色ともカスタマイズ不可

PRE

PREのタグに関しては、このタグに特別な機能があるわけではないようです。

「htmlやコマンド、ショートコードを端的に記載するための枠」と考えるとグッとです。

 html
[st-span add_style=""][/st-span]

pre terminal

 command
機能の実行にあたるコマンドを書くスペース

pre short code

 shortcode
st-svg-check-circle

PREのカスタマイズ

  • ウエブアイコンが挿入できる

※背景色や文字色のカスタマイズは不可

カスタムボタン編

 

ノーマル

基本

ボタン

詳しくはこちら オレンジ

詳しくはコチラ

詳しくはこちら レッド

詳しくはコチラ

詳しくはこちら グリーン

詳しくはコチラ

詳しくはこちら ブルー

詳しくはコチラ

お問い合わせ

お問合せ

もっと詳しく オレンジ

もっと詳しく

もっと詳しく ピンク

もっと詳しく

もっと詳しく ブルー

もっと詳しく

人気ランキング

人気ランキング

ランキングはこちら

ランキングはコチラ

カスタムボタンノーマルのカスタマイズ

  • タイトルテキスト
  • タイトルテキスト色
  • ウエブアイコン
  • 背景色の上部
  • 背景色の下部

もっと詳しく

カスタマイズ版

もっと詳しく

熊谷ヒカル
背景色下部が若干変わるとかなりバナーの印象が変わりますね!

角丸

 

基本

角丸ボタン

詳しくはこちら オレンジ

角丸ボタン

詳しくはこちら レッド

角丸ボタン

詳しくはこちら グリーン

角丸ボタン

詳しくはこちら ブルー

角丸ボタン

アフィンガー6カスタムボタン角丸のカスタマイズ

  • タイトルテキスト
  • タイトルテキスト色
  • ウエブアイコン前方・後方
  • 線の色

角丸ボタン

ミニ

基本

ボタン

詳しくはこちら オレンジ

詳しくはコチラ

詳しくはこちら レッド

詳しくはコチラ

詳しくはこちら グリーン

詳しくはコチラ

詳しくはこちら ブルー

詳しくはコチラ

アフィンガー6カスタムボタンミニのカスタマイズ

  • ウエブアイコン前方と後方
  • 背景色上部
  • 背景色下部
  • 文字色
  • 影の色

以下はアフィンガー6カスタムボタンミニのカスタマイズの一例です。

詳しくはコチラ

MCボタン

 

オレンジ

キャンペーン実施中

今すぐ申し込む

○○公式サイト

レッド

キャンペーン実施中

今すぐ申し込む

○○公式サイト

グリーン

キャンペーン実施中

今すぐ申し込む

○○公式サイト

ブルー

キャンペーン実施中

今すぐ申し込む

○○公式サイト

アフィンガー6・MCボタンのカスタマイズ

  • 枠の色
  • 文字色
  • 背景色上部
  • 背景色下部
  • MC背景色
  • MC文字色
  • ウエブアイコン前方・後方

下は、ブルーのMCボタンをカスタマイズした一例です。

キャンペーン実施中

今すぐ申し込む

○○公式サイト

ボックスメニュー

 

基本

サブあり4列

横並びタイプ

横並びタイプ サブあり

横並びタイプ 単品

ボックスメニューのカスタマイズ

 

ボタンA

ボタンB

会話吹き出し編

アフィンガー6の会話吹き出しについては、「⚙affinger管理」で事前に吹き出しの画像を登録しておくと、8パターンの吹き出しが使えるようになります。

熊谷ヒカル
熊谷ヒカルです
シロクマ
アシスタントのシロクマです

ランキング編

アフィンガー6のランキング機能は、管理画面左メニュー「⚙ランキング管理」から。

以下はデモのランキングです。

1位

  • 月額費用:1000円~
  • お試し制度の有無:有

 

  • 初期費用:3,300円
  • 支払方法:クレカ、銀行振込(SMBCのみ)、コンビニ、ペイジー
  • キャッシュ機能:★★★★★+α (Xアクセラレータ・HTTP/2・FastCGI・OPcache・ブラウザキャッシュ設定)
  • バックアップ期間:14日

【特記事項】

  • 永久無料の独自ドメインが取得できる
  • 高速表示が特に好評で、機能もやはり業界一と言って過言でない
  • 初期費用は代謝と比べるとネットだが、半額キャッシュバックキャンペーンが実施されるなど割安感も感じられるキャンペーンあり

2位

  • 月額費用:968円~
  • お試し制度の有無:△返金保証制度あり
  • 初期費用:無料
  • 支払方法:クレカ、銀行振込(楽天銀行のみ)
  • キャッシュ機能:★★★
  • バックアップ期間:14日

【特記事項】

  • 他のユーザーの影響を受けない仕様
  • キャッシュ機能はワードプレスプラグインをインストールする仕様になっており、mixHost単独のサービスではない
  • 月額最低利用料金は36ヶ月契約の場合で、月契約だとそれほどお得感は感じられない

ConoHa WING

  • 月額利用料金:880円~(3G)
  • お試し制度の有無:無
  • 初期費用:無料
  • 支払方法:クレカ、͡コノハチャージ
  • キャッシュ機能:★★★
  • バックアップ期間:14日

【特記事項】

月額最低利用料金は36ヶ月契約の場合で、月契約だとそれほどお得感は感じられない

  • この記事を書いた人

熊谷ヒカル

2017年からインターネットビジネスを始め、いろんなジャンルの特化サイトを構築してきました。


現在はブログ初心者さん向け・同じような志を持つ人に教えながら特化サイト構築を両立しています。


2022年のとあるASPでの実績は349万円(「2022年の累計実績」・2月15日現在)、詳細は下記よりどうぞ。