【アフィンガー／AFFINGER5】よく使うデザインカスタマイズ

アフィンガーって設定が多すぎてどうすればいいか悩むなぁ

アフィンガーでよく使うデザインの使い方を知りたいわ

こんな悩みを解決します。

アフィンガー５は機能がもりだくさんで、とても優れたテーマです。

こんなこともワンクリックでできてしまいます。

だけど、正直なところこんなのは使いませんよね。。。

この記事のポイント

アフィンガー５初心者向けの記事です。
最もよく使うデザインを厳選して紹介します。
アフィンガーを使って記事をサクサク量産できるようになります！！

この記事の目次

1 【アフィンガー】デザインの超基本（太字・マーカー）
2 【アフィンガー】BOXの作り方
3 【アフィンガー】会話風ふきだしの作り方
4 【アフィンガー】コメント付きボタンの作り方
5 【アフィンガー】よく使うデザインカスタマイズのまとめ

【アフィンガー】デザインの超基本（太字・マーカー）

まずは超基本から。

太字とマーカーの設定方法をご紹介します。

太字

まずは太字です。

太字の設定方法

太字にしたい文字を選択
メニューバーの B をクリック

マーカー

マーカーの設定方法です。

マーカーの設定方法

マーキングしたい文字を選択
メニューバーのスタイル　→　マーカー　→　黄マーカー　をクリック

【アフィンガー】BOXの作り方

箇条書きなどを囲むBOXの作り方です。

ワンクリックで設定できます。

シンプルグレーBOX

グレーBOXの設定方法

スタイル　→　ボックス　→　グレー　　をクリック

デザイン例

シンプルグレーBOX

ワンクリックで設定できます！

コメント付きBOX

コメント付きBOXは、次の手順で作成することができます。

コメント付きBOXの設定方法

タグ　→　ボックスデザイン　→　マイボックス　→　基本
コメント、色の設定を　好みに応じて変更する

ショートコードのパラメータ

[ st-mybox title="コメント" fontawesome="アイコンの種類" color="コメントの色" bordercolor="枠線の色" bgcolor="枠背景の色" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

[/st-mybox]

このショートコードの場合は　下のBOXのようなデザインになります。

[ st-mybox title="コメント付きBOX作成例" fontawesome="fa-heart" color="#03A9F4" bordercolor="#f44336" bgcolor="#FFF3E0" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

[/st-mybox]

コメント付きBOX作成例

【アフィンガー】会話風ふきだしの作り方

記事の書き出しなどで　とてもよく使うデザインですね。

アフィンガー５ではたったのワンクリックで会話風吹き出しを作ることができます。

会話風ふきだしの設定方法

タグ　→　会話ふきだし　→　会話１～会話８

アフィンガーは吹き出しも１クリックで簡単設定できるよ！！

アフィンガーではふきだしのアイコンを８種類設定できます。

プラグインを追加するとアイコンの数を増やすことができます。

会話アイコンの設定方法

アイコンを準備する（100px以上）
ダッシュボード　『AFFINGER5管理』　→　『会話・ファビコン等』　→　『アイコン画像を設定』

【アフィンガー】コメント付きボタンの作り方

アフィリエイトに必須のリンクボタンの設定方法です。

次のようなボタンが１クリックで作成できます。

とっても簡単です！！

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

ショートコードのパラメータ

[ st-mcbutton url="リンク先URL" title="ボタンのテキスト" rel="" fontawesome="" target="" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#00acee" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#039BE5" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="ボタンの上のテキスト"]ボタンの下のテキスト[/st-mcbutton]

コメント付きボタンの設定方法