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

2019年11月16日

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

 

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

 

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

 

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

 

タグ>テキストパーツ

 

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

 

 

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

バナー風ボックス:3個

基本

基本

背景なし(高さ400px)

背景なし(高さ400px)

左寄せ

左寄せ

 

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

 

絶景日和

絶景を見にいこう!

詳しくはコチラ

 

マイボックス:9個

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

 

ポイント

基本

しかく(枠のみ)

まるみ

参考

参考

関連

関連

メモ

メモ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

 

マイボックス(+CSSクラス)

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

メモ

メモ

メモ下線のみ

メモ下線のみ

メモ枠のみ

メモ枠のみ

メモ枠・下線あり

メモ枠・下線あり

ここに注意

注意(下線のみ)

必要なモノ

  • 必要なもの
  • 必要なもの
  • 必要なもの

必要なモノドット下線

  • 必要なモノドット下線
  • 必要なモノドット下線
  • 必要なモノドット下線

チェックリスト

  • チェックリスト
  • チェックリスト
  • チェックリスト

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

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

簡単な流れ

  • 簡単な流れ
  • 簡単な流れ
  • 簡単な流れ

簡単な流れドット下線

  • 簡単な流れドット下線
  • 簡単な流れドット下線
  • 簡単な流れドット下線

 

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

基本

基本

注意

注意

はてな

はてな

ポイント

ポイント

メモ

メモ

基本(タイトル幅100%)

基本(タイトル幅100%)

注意(タイトル幅100%)

注意(タイトル幅100%)

はてな(タイトル幅100%)

はてな(タイトル幅100%)

ポイント(タイトル幅100%)

ポイント(タイトル幅100%)

メモ(タイトル幅100%)

メモ(タイトル幅100%)

 

メモボックス

メモ

 

 

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

 

スライドボックス

+ クリックすると全文が出てきます

スライドボックス

 

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

 

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

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

↓この画像のように「チェックボックス(番号なしリスト)」の中で「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でブログ更新や情報発信してますよければフォローお願いします(・∀・)

  • この記事を書いた人

たか

副業ブロガーの「たか」です。 「アーティストのように好きなことで自由に生きるために必要な勉強」について発信しています。勉強・副業・投資などの発信がメインです。 気軽にTwitterフォロー・リプなどいただけたら嬉しいです(・∀・)

-Affinger

Copyright© ARTなSTUDY , 2021 All Rights Reserved.