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

プロモーションを含むことがあります

 

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

 

 

テキストパーツ

 

クリップメモ

 

メモ

外部リンク

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

ブックマーク

おしらせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文グレー

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

• 背景色のみ

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

クリップメモ テキスト

メモ

参考

関連

注意

Check

次に進む

前に戻る

質問

回答

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

• 背景色のみ

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

ミニ吹き出し

 

基本

オレンジ

ピンク

ブルー

グリーン

レッド

マイボックス

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

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

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

複合

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

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

自由なメモ

ここがポイント

ここがおすすめ

ここがダメ

ここに注意

もっと詳しく

女性コメント

男性コメント

複合の変更可能箇所

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

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

複合・アイコンなし

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

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

自由なメモ

ここがポイント

ここがおすすめ

ここがダメ

ここに注意

もっと詳しく

はてなマーク

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

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

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

まる文字小

 

基本

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

オレンジ

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

ピンク

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

ブルー

うすい注意

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

注意

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

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

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

まる文字大

 

基本

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

オレンジ

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

ピンク

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

ブルー

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

はてな

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

チェック

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

うすい注意

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

注意

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

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

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

HTMLタグ

 

ルビ・フリガナ

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

バラ

薔薇

PタグとSpanタグ

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

カスタムフォント

 

デフォルト

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

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

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

白影

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

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

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

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

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

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

ステップ

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

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

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

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

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

続きを見る

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

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

続きを見る

ポイント

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

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

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

ラベル

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

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

続きを見る

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

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

流れる文字

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

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

 

バナー風ボックス

基本

背景なし 高さ400PX

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

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

左寄せ

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

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

マイボックス

 

基本

しかく 枠のみ

まるみ

 

参考

関連

メモ

ポイント

注意ポイント

はてな

＋ミニふきだし

short code

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

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

マイボックス ＋CSSクラス

 

メモ

メモ 下線のみ

メモ 枠のみ

メモ 枠＋下線あり

注意 下線のみ

必要なモノ

必要なモノ ドット下線

チェックリスト

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

簡単な流れ

簡単な流れ ドット下線

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

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

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

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

 

基本

注意

はてな

ポイント

メモ

基本 タイトル幅100％

注意 タイトル幅100％

はてな タイトル幅100％

ポイント タイトル幅100％

メモ タイトル幅100％

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

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

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

メモボックス

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

スライドボックス

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

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

• タイトルテキスト
• ウエブアイコン

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

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

こんな方におすすめ

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

• タイトルテキストのみ

ガイドマップメニュー

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

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

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

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

PRE

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

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

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

pre terminal

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

pre short code

 shortcode
st-svg-check-circle

PREのカスタマイズ

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

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

カスタムボタン編

 

ノーマル

基本

ボタン

詳しくはこちら オレンジ

詳しくはコチラ

詳しくはこちら レッド

詳しくはコチラ

詳しくはこちら グリーン

詳しくはコチラ

詳しくはこちら ブルー

詳しくはコチラ

お問い合わせ

お問合せ

もっと詳しく オレンジ

もっと詳しく

もっと詳しく ピンク

もっと詳しく

もっと詳しく ブルー

もっと詳しく

人気ランキング

人気ランキング

ランキングはこちら

ランキングはコチラ

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

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

もっと詳しく

カスタマイズ版

もっと詳しく

角丸

 

基本

角丸ボタン

詳しくはこちら オレンジ

角丸ボタン

詳しくはこちら レッド

角丸ボタン

詳しくはこちら グリーン

角丸ボタン

詳しくはこちら ブルー

角丸ボタン

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

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

角丸ボタン

ミニ

基本

ボタン

詳しくはこちら オレンジ

詳しくはコチラ

詳しくはこちら レッド

詳しくはコチラ

詳しくはこちら グリーン

詳しくはコチラ

詳しくはこちら ブルー

詳しくはコチラ

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

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

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

詳しくはコチラ

MCボタン

 

オレンジ

レッド

グリーン

ブルー

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

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

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

ボックスメニュー

 

基本

• メニューA

• メニューB

• メニューC

• メニューD

サブあり４列

• メニューA

  サブテキスト

• メニューB

  サブテキスト

• メニューC

  サブテキスト

• メニューD

  サブテキスト

横並びタイプ

• メニューA

• メニューB

• メニューC

• メニューD

横並びタイプ サブあり

• メニューA

  サブテキスト

• メニューB

  サブテキスト

• メニューC

  サブテキスト

• メニューD

  サブテキスト

横並びタイプ 単品

• メニューA

  サブテキスト

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

 

• メニューA

  サブテキスト

ボタンA

ボタンB

会話吹き出し編

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

ランキング編

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

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

お問合せ

*は必須項目です *お名前またはニックネーム *メールアドレス (確認用) *お問合せ(文字数制限なし) Powered by FormMailer.

iCloud・ドコモなどキャリアメールアドレスのお問い合わせは高確率で文字化けします。