AFFINGER6：バナー風ボックスの使い方まとめ

バナー風ブロックの基本的な使い方

バナー風ボックスを利用するにはブロックツールの「AFFINGER：バナー風ボックス」を選択します。

バナー風ボックスでは簡単にバナー風のコンテンツを記事内に表示させることができます。

バナー風ボックスはこんな感じです。

バナー風ボックスではテキスト表示はもちろん背景に画像を設定することも可能です。

サイズの変更も簡単にでき、編集の自由度も高いので使いこなせればデザイン性の高いオシャレな表示や効果的な表示をすることが可能です。

バナー風ボックスでは次のような設定が可能です。

①：タイトルの入力

②：アイコンの設定

③：フォントサイズの調整

④：画像の設定

⑤：リンクの設定

⑥：サイズの変更

⑦：配置の設定

⑧：枠線の設定

⑨：色設定

①：タイトルの入力

タイトルは直接入力することが可能です。

未入力にして表示させないことも可能です。

タイトルはこんな感じで直接入力で変更することができます。

タイトル下は、テキストはもちろん画像などを表示させることもできますしAFFINGER6の他のブロックツールも使用することができます。

タイトル下に画像を表示させるとこんな感じです。

②：アイコンの設定

タイトル横にアイコン表示をさせることができます。

アイコンを変更するとこんな感じです。

アイコンクラスを設定することで一覧以外のアイコンを表示させることができます。

アイコンクラスは公式マニュアルで確認することができます。

③：フォントサイズの調整

タイトルのフォントサイズを変更することができます。

フォントサイズ200％だとこんな感じです。

フォントサイズ100％だとこんな感じです。

③：画像の設定

画像URLを設定することで背景画像を設定することができます。

画像URLを確認する方法

ホームページ上の画像URLは設定したい画像を右クリックして「画像リンクをコピー」を選択して画像URL欄にコピペします。

著作権があるので他の方の画像を無断で利用しないように注意してください。

自分で用意した画像を利用する場合はまず画像をアップロードしてメディアライブラリーからURLを確認することができます。

背景画像を設定するとこんな感じです。

背景画像をぼかす

画像の「ぼかし」を設定するとこんな感じです。

画像の「暗くする」を設定するとこんな感じです。

④：リンクの設定

作成したバナーにリンクを設定することができます。

⑤：サイズの変更

バナーの縦幅と横幅を調整することができます。

背景画像を設定する場合、画像サイズが小さすぎると表示が荒くなってしまうので、使用する画像は５００ピクセル以上がお勧めです。

サイズを変更するとこんな感じです。

⑥：配置の設定

タイトルなどのコンテンツを左寄せにしたり、バナー風ボックス自体の位置を変更することができます。

「左寄せ」にするとこんな感じです。

バナー風ボックスを「中央揃え」にするとこんな感じです。

スマホではわからないですが、PC表示ではボックスが中央に表示されています。

⑦：枠線の設定

バナー風ボックスの枠線の色や太さ、丸みを設定できます。

枠線の色と太さを変更するとこんな感じです。

枠線の「丸み」を設定するとこんな感じです。

⑧：色設定

色設定：タイトルを変更するとこんな感じです。

色設定：影を設定するとこんな感じです。

バナー風ボックスの基本的な使い方は以上になります。

いろいろとアレンジができるので、実際に試してみるのがお勧めです。

また、他のサイトのオシャレなバナーデザインを参考にしてみるのもいいと思います。

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

\\ 無料お試し利用がずっと可能なAIライティングツール//

AFFINGER6：記事一覧

• AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
• （通常版）AFFINGER6と（上位版）AFFINGER6 EXの違い【まとめ】
• AFFINGER6を実際に利用したガチ評価-２年以上愛用して感じたメリットとデメリット
• AFFINGER6は初心者が購入しても大丈夫？-初心者にお勧めの理由

AFFINGER6の購入とインストール方法

• AFFINGER6の購入方法と購入プランの選び方
• AFFINGER6（アフィンガー6）のインストール方法-初心者でも安心！購入プランから徹底解説！
• AFFINGER６（アフィンガー６）EX版の購入とアップグレードの方法

AFFINGER6の設定関係

• AFFINGER6導入後にまず何をしたらいいの？-初心者にお勧めの初期設定４項目
• AFFINGER6（アフィンガー６）にお勧めのプラグイン【初心者向け】
• AFFINGER６のアップデート方法（２パターンを解説）
• AFFINGER６（アフィンガー６）でGoogleアナリティクスを導入する方法
• AFFINGER6：Googleサーチコンソールへの登録方法
• AFFINGER6のステマ規制対策-広告表記を表示させる方法

AFFINGER6の使い方

• AFFINGER6の使い方【まとめ】-初心者向けガイド-

AFFINGER6のデザインカスタマイズ

• AFFINGER6のカスタマイズ方法-初心者向けガイド-