【カスタマイズ参考】AFFINGER5「タグ>ボックスデザイン」まとめ一覧

AFFINGER5のカスタマイズをしたい方「AFFINGER5で記事の装飾をしたいけど、機能が多すぎてどれを使えばいいかよくわからない。どんな装飾ができるか一覧で見たい」

という悩みにこの記事でお答えします。

AFFINGER5で記事装飾をするときに「どんな機能があるのか」わかっていれば、どれをカスタマイズして使うか考えやすくなります。

今回紹介するのは「タグ＞ボックスデザイン」の機能です。

タグ＞テキストパーツ

もしも「AFFINGER5を持ってはいないけど、何ができるのか見に来た！」という方がいたら、こちらも記事や公式サイトもよければご覧ください。

タグ＞ボックスデザイン一覧

バナー風ボックス：３個

↓バナー風ボックスのカスタマイズ例。「バナー風ボックスに画像挿入＋カスタムボタン＞ノーマル＞詳しくはこちら」

マイボックス：９個

※以下のボックスの色などは自分で変更可能です。

マイボックス（+CSSクラス）

※マイボックスの見出しがボックスの中に入ったバージョンです。

見出し付きフリーボックス：１０個

メモボックス

↓メモボックスの色は「外観＞カスタマイズ＞[+]オプションカラー＞メモボックス」で変更可能です。

スライドボックス

↓メモボックスの色は「外観＞カスタマイズ＞[+]オプションカラー＞スライドボックス」で変更可能です。

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

↓この画像のように「チェックボックス（番号なしリスト）」の中で「ulタグ」があるとチェックボックス化します。

↓ulタグはこれのことです。

こんな方におすすめ（v）

↓「こんな方におすすめ(v)」のデザインは「外観＞カスタマイズ＞[+]オプションカラー＞こんな方におすすめ」で変更可能です。

こんな方におすすめ[v]

※「こんな方におすすめ(v)」と同じようにデザイン変更可能です。

ガイドマップメニュー

サイドウィジェットなどで、この順番にこのサイトを見てくれるとわかりやすいですよ。と示したりするときに便利です。

pre

「pre」はCSSのデザインをいじるにはこのコードをコピペしてくださいと伝えるときに便利です。

 html
/*例として適当にコードを入れました*/
color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="10px"

pre:terminal

「pre:terminal」はMACのターミナルっぽいデザインのコードを記載するときのボックスです。

 command
/*例として適当にコードを入れました*/
color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="10px"

まとめ

色々機能があって「何ができたっけ？」となることの多いAFFINGER5ですが、辞書的にこの記事を使っていただけたら幸いです(^ ^)/

もしもAFFINGER5をまだ使っていない方で、「AFFINGER5気になる」という方はよければこちらの記事や公式サイトをご参照ください。

Twitterでブログ更新や情報発信してますよければフォローお願いします(・∀・)