バナー風ブロックの基本的な使い方
バナー風ボックスを利用するにはブロックツールの「AFFINGER：バナー風ボックス」を選択します。
バナー風ボックスでは簡単にバナー風のコンテンツを記事内に表示させることができます。
バナー風ボックスはこんな感じです。
バナー風ボックス
バナー風ボックスではテキスト表示はもちろん背景に画像を設定することも可能です。
サイズの変更も簡単にでき、編集の自由度も高いので使いこなせればデザイン性の高いオシャレな表示や効果的な表示をすることが可能です。
バナー風ボックスでは次のような設定が可能です。
| ①：タイトルの入力 |
| ②：アイコンの設定 |
| ③：フォントサイズの調整 |
| ④：画像の設定 |
| ⑤：リンクの設定 |
| ⑥：サイズの変更 |
| ⑦：配置の設定 |
| ⑧：枠線の設定 |
| ⑨：色設定 |
①：タイトルの入力
タイトルは直接入力することが可能です。
未入力にして表示させないことも可能です。
タイトルはこんな感じで直接入力で変更することができます。
タイトルは直接入力可能
タイトル下は、テキストはもちろん画像などを表示させることもできますしAFFINGER6の他のブロックツールも使用することができます。
タイトル下に画像を表示させるとこんな感じです。
MY FAMILY
②：アイコンの設定
タイトル横にアイコン表示をさせることができます。
アイコンを変更するとこんな感じです。
アイコンを初心者マークに変更
アイコンクラスを設定することで一覧以外のアイコンを表示させることができます。
アイコンクラスは公式マニュアルで確認することができます。
③：フォントサイズの調整
タイトルのフォントサイズを変更することができます。
フォントサイズ200％だとこんな感じです。
フォントサイズ200％
フォントサイズ100％だとこんな感じです。
フォントサイズ100％
③：画像の設定
画像URLを設定することで背景画像を設定することができます。
画像URLを確認する方法
ホームページ上の画像URLは設定したい画像を右クリックして「画像リンクをコピー」を選択して画像URL欄にコピペします。
著作権があるので他の方の画像を無断で利用しないように注意してください。
自分で用意した画像を利用する場合はまず画像をアップロードしてメディアライブラリーからURLを確認することができます。
背景画像を設定するとこんな感じです。
タイトルテキスト
背景画像をぼかす
画像の「ぼかし」を設定するとこんな感じです。
タイトルテキスト
画像の「暗くする」を設定するとこんな感じです。
タイトルテキスト
④：リンクの設定
作成したバナーにリンクを設定することができます。
⑤：サイズの変更
バナーの縦幅と横幅を調整することができます。
背景画像を設定する場合、画像サイズが小さすぎると表示が荒くなってしまうので、使用する画像は５００ピクセル以上がお勧めです。
サイズを変更するとこんな感じです。
幅400×高さ200PX
幅400×高さ300PX
⑥：配置の設定
タイトルなどのコンテンツを左寄せにしたり、バナー風ボックス自体の位置を変更することができます。
「左寄せ」にするとこんな感じです。
左寄せ
左寄せにするとこんな感じです。
バナー風ボックスを「中央揃え」にするとこんな感じです。
スマホではわからないですが、PC表示ではボックスが中央に表示されています。
中央揃え
ボックスの中央揃え
⑦：枠線の設定
バナー風ボックスの枠線の色や太さ、丸みを設定できます。
枠線の色と太さを変更するとこんな感じです。
枠線の色と太さを変更
枠線の「丸み」を設定するとこんな感じです。
枠線：丸み
⑧：色設定
色設定：タイトルを変更するとこんな感じです。
色設定：タイトル
色設定：影を設定するとこんな感じです。
色設定：影
バナー風ボックスの基本的な使い方は以上になります。
いろいろとアレンジができるので、実際に試してみるのがお勧めです。
また、他のサイトのオシャレなバナーデザインを参考にしてみるのもいいと思います。
AFFINGER6の使い方
AFFINGER6の使い方については、このブログで詳しく解説しています。
-
-
AFFINGER6の使い方【まとめ】-初心者向けガイド-
2025/7/8 AFFINGER6
AFFINGER6の使い方に関するまとめ記事です。 記事数が多いので、知りたい内容を目次から探してみてください。 設定に関する使い方 インストールの方法 AFFINGER6を使えるようにするまでの手順 ...
AFFINGER6：関連記事
2025/8/15
【知っておくべき！】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択！
AFFINGER6を使ってみたい！ という方に ちょっと待ってください！ AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できます。 また、購入プランに迷っている方も要チェックです！ AFFINGER6とは？購入を検討している方へ AFFINGER6は多くの有名ブロガーさんも利用している人気の有料テーマです。 特徴としては、次ような点を挙げることができます。 収益化に特化 「稼ぐに特化したテーマ」がコンセプトでアフィリエイトにお勧め。 ...
2025/7/10
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
AFFINGER６を使ってみたい！気になる！という方向けに AFFINGER６ってどんなテーマ？ AFFINGER６でどんなことができるの？ AFFINGER６を使うにはどうすればいいの？ といった内容を初心者向けに詳しく解説しています。 AFFINGER６を使ってみたいなぁと思った方は参考にしてみてください。 価格 １４，８００円（税込み） 有名ブロガーさん多数使用のWordPressテーマ！ 「稼ぐ」に特化！アフィリエイトサイトにお勧め！ 高いカスタマイズ性能！ 直感操作で初心者にもおすすめ！ このブ ...
2025/6/3
（通常版）AFFINGER6と（上位版）AFFINGER6 EXの違い【まとめ】
AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では（通常版）AFFINGER6と（上位版）AFFINGER6 EXの違いをまとめてみました。 購入する際やアップグレードを検討している方は参考にしてみてください。 機能比較表：AFFINGER6 vs AFFINGER6 EX 機能AFFINGER6AFFINGER6 EX記事のカード化無限スクロール機能トップページの１カラム化ヘッダーナビゲーション・ ...
2025/6/3
AFFINGER6は初心者が購入しても大丈夫？-初心者にお勧めの理由
WordPressの有料テーマであるAFFINGER6（アフィンガー6）は、「収益化に強い」と評判のテーマです。 ただ、初めてブログを始める初心者にとっては「本当に使いこなせるの？」と不安もありますよね。 この記事では、AFFINGER6が初心者におすすめな理由と購入前に知っておきたいポイント、導入のコツまでをわかりやすく紹介しています。 AFFINGER6は初心者にこそお勧めのテーマ！ 結論から言えば、AFFINGER6は初心者の方が購入しても大丈夫です。 むしろ初心者の方にこそお勧めのテーマです。 A ...
2025/6/3
【本音レビュー】AFFINGER6の評判は？実際に使ってわかったメリット・デメリット
「収益化に強いWordPressテーマ」として有名なAFFINGER6（アフィンガー6）。 ブロガーやアフィリエイターに人気ですが、「評判は本当？」「使いこなせるの？」と不安に感じる方も多いのではないでしょうか？ この記事では、実際にAFFINGER6を使ってわかったリアルな使用感と世間の評判を本音でお伝えします。 AFFINGER6の良い評判・口コミまとめ AFFINGER6の口コミ・評価をまとめてみると次のような声が多くあります。 良い口コミ・評価 良い口コミ・評価としては次の内容が多かったです。 ...
2025/6/3
AFFINGER6 vs SWELL｜どっちを選ぶべき？徹底比較！
この記事では、迷ってしまうことの多いテーマ選びについて今回は『SWELL』と『AFFINGER6』の比較ガイドをお届けします。 現在、シェアNo,1の有料テーマである『SWELL』と有名ブロガーさんも多数愛用している人気有料テーマの『AFFINGER6』で迷っている方も多いと思います。 『SWELL』と『AFFINGER6』の二択！ という方向けの記事なので、迷っている方は参考にしてみてください。 SWELLとAFFINGER6を比較 『SWELL』と『AFFINGER6』について１０個のポイントで徹底比 ...
2025/6/3
AFFINGER6 vs THE THOR｜どっちが稼げる？初心者にもおすすめのテーマ比較
WordPressブログで収益化を目指すなら、テーマ選びは極めて重要です。 「AFFINGER6」と「THE THOR」は、稼ぐ系ブログやアフィリエイターに支持されている人気テーマです。 AFFINGER6とTHE THORのどちらを利用しようか迷っている方も多いのではないでしょうか。 この記事では、AFFINGER6とTHE THORの違いを徹底比較！ AFFINGER6とTHE THORの比較 『AFFINGER6』と『THE THOR』を10の視点から比較してみていきます。 操作性・使いやすさ 価格 ...
2025/7/10
AFFINGER6をおすすめする５つの理由【買う価値ある？】
ブログで本気で稼ぎたいならテーマ選びも重要です。 数あるテーマの中でも AFFINGER6 は「稼ぐ」に特化したテーマをコンセプトに多くのトップアフィリエイターの方にも支持されているテーマの１つです。 この記事では 「本当に買う価値があるの？」 と迷う方に向けて、実際に導入して感じたメリットを ５つ に絞って解説します。 お勧めする理由 豊富な記事作成機能 SEO対策済み テンプレートが豊富 収益化に特化 アップデートの対応が早い 理由① 豊富な記事作成機能 メインとなる記事作成の機能が豊富で、ある程度直 ...