バナー風ブロックの基本的な使い方
バナー風ボックスを利用するにはブロックツールの「AFFINGER:バナー風ボックス」を選択します。
バナー風ボックスでは簡単にバナー風のコンテンツを記事内に表示させることができます。
バナー風ボックスはこんな感じです。
バナー風ボックス
バナー風ボックスではテキスト表示はもちろん背景に画像を設定することも可能です。
サイズの変更も簡単にでき、編集の自由度も高いので使いこなせればデザイン性の高いオシャレな表示や効果的な表示をすることが可能です。
バナー風ボックスでは次のような設定が可能です。
①:タイトルの入力 |
②:アイコンの設定 |
③:フォントサイズの調整 |
④:画像の設定 |
⑤:リンクの設定 |
⑥:サイズの変更 |
⑦:配置の設定 |
⑧:枠線の設定 |
⑨:色設定 |
①:タイトルの入力
タイトルは直接入力することが可能です。
未入力にして表示させないことも可能です。
タイトルはこんな感じで直接入力で変更することができます。
タイトルは直接入力可能
タイトル下は、テキストはもちろん画像などを表示させることもできますしAFFINGER6の他のブロックツールも使用することができます。
タイトル下に画像を表示させるとこんな感じです。
MY FAMILY
②:アイコンの設定
タイトル横にアイコン表示をさせることができます。
アイコンを変更するとこんな感じです。
アイコンを初心者マークに変更
アイコンクラスを設定することで一覧以外のアイコンを表示させることができます。
アイコンクラスは公式マニュアルで確認することができます。
③:フォントサイズの調整
タイトルのフォントサイズを変更することができます。
フォントサイズ200%だとこんな感じです。
フォントサイズ200%
フォントサイズ100%だとこんな感じです。
フォントサイズ100%
③:画像の設定
画像URLを設定することで背景画像を設定することができます。
画像URLを確認する方法
ホームページ上の画像URLは設定したい画像を右クリックして「画像リンクをコピー」を選択して画像URL欄にコピペします。
著作権があるので他の方の画像を無断で利用しないように注意してください。
自分で用意した画像を利用する場合はまず画像をアップロードしてメディアライブラリーからURLを確認することができます。
背景画像を設定するとこんな感じです。
タイトルテキスト
背景画像をぼかす
画像の「ぼかし」を設定するとこんな感じです。
タイトルテキスト
画像の「暗くする」を設定するとこんな感じです。
タイトルテキスト
④:リンクの設定
作成したバナーにリンクを設定することができます。
⑤:サイズの変更
バナーの縦幅と横幅を調整することができます。
背景画像を設定する場合、画像サイズが小さすぎると表示が荒くなってしまうので、使用する画像は500ピクセル以上がお勧めです。
サイズを変更するとこんな感じです。
幅400×高さ200PX
幅400×高さ300PX
⑥:配置の設定
タイトルなどのコンテンツを左寄せにしたり、バナー風ボックス自体の位置を変更することができます。
「左寄せ」にするとこんな感じです。
左寄せ
左寄せにするとこんな感じです。
バナー風ボックスを「中央揃え」にするとこんな感じです。
スマホではわからないですが、PC表示ではボックスが中央に表示されています。
中央揃え
ボックスの中央揃え
⑦:枠線の設定
バナー風ボックスの枠線の色や太さ、丸みを設定できます。
枠線の色と太さを変更するとこんな感じです。
枠線の色と太さを変更
枠線の「丸み」を設定するとこんな感じです。
枠線:丸み
⑧:色設定
色設定:タイトルを変更するとこんな感じです。
色設定:タイトル
色設定:影を設定するとこんな感じです。
色設定:影
バナー風ボックスの基本的な使い方は以上になります。
いろいろとアレンジができるので、実際に試してみるのがお勧めです。
また、他のサイトのオシャレなバナーデザインを参考にしてみるのもいいと思います。
ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。
AIなんて難しそう・・・
そう感じて活用しないのは勿体無いです。
気軽に使うのに無料お試しがお勧め♪
現在は多くのAIライティングツールがあります。
そのほとんどが無料お試しでの利用が可能です。
お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。
無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。
\\ 無料お試し利用がずっと可能なAIライティングツール//
-
無料お試しがずっと可能なAIライティングツール
「記事作成にAIを活用してみたいなぁ」 「でも料金はかけたくないなぁ」 そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。 もちろん無料お試しなので、機能をフルに使用するこ ...
AFFINGER6:記事一覧
-
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
2024/11/28
AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内 ...
-
(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】
2024/11/28 AFFINGER6(アフィンガー6)
AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では(通常版)AFFINGER6と(上位版)A ...
-
『SWELL』ってどうなの?-実際に利用したメリットとデメリットをガチレビュー!
2024/11/28 SWELL(スウェル)
SWELLはとても人気の高いテーマです。 この記事はSWELLが気になる方向けにメリットとデメリットを紹介しています。 価格 17,600円(税込み) シンプル&高機能なWordPressテーマ! 最 ...
-
AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由
2024/11/28 AFFINGER6(アフィンガー6)
AFFINGER6を購入しようと思っている初心者の方は、解らないことが多いからこそ購入に対して不安を感じるかもしれません。 この記事は、実際に知識ゼロからAFFINGER6を使用した私が断言できる内容 ...
AFFINGER6の購入とインストール方法
-
【知っておくべき!】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択!
2024/12/4 AFFINGER6(アフィンガー6)
AFFINGER6を使ってみたい! という方に ちょっと待ってください! AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...
-
AFFINGER6(アフィンガー6)のインストール方法-初心者でも安心!購入プランから徹底解説!
2024/10/18 AFFINGER6(アフィンガー6)
初心者でも大丈夫! AFFINGER6の購入からインストールして使えるようにするまでの手順や注意点を詳しく解説しています。 AFFINGER6を使うまでの手順 AFFINGER6を利用する手順は次のよ ...
-
AFFINGER6(アフィンガー6)EX版の購入とアップグレードの方法
2024/11/3 AFFINGER6(アフィンガー6), AFFINGER6初期設定
この記事ではAFFINGER6の上位版である「AFFINGER6EX」へのアップグレード方法を解説しています。 AFFINGER6EX版にアップグレードする為の条件 AFFINGER6からEX版にアッ ...
AFFINGER6の設定関係
-
AFFINGER6導入後にまず何をしたらいいの?-初心者にお勧めの初期設定4項目
2024/10/17 AFFINGER6(アフィンガー6)
「ブログで稼ぎたい!」 って思いブログを始めた初心者の方も多いと思います。 収益化するには何より記事を作成しなければ話になりません。 この記事ではAFFINGER6を始めたばかりの初心者の方向けに、い ...
-
AFFINGER6(アフィンガー6)にお勧めのプラグイン【初心者向け】
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6初期設定
AFFINGER6にお勧めのプラグインを9つ紹介しています。 初心者の方は何を導入すればいいのか解らないと思いますので、是非参考にしてみてください。 プラグインとは? 「プラグイン」とはワードプレスを ...
-
AFFINGER6のアップデート方法(2パターンを解説)
2024/10/28 AFFINGER6(アフィンガー6), AFFINGER6初期設定
この記事がお勧めな方 AFFINGER6のアップデート方法を知りたい方 AFFINGER6の手動でのアップデート方法が知りたい方 AFFINGER6で自動更新のお知らせを設定する方法を知りたい方 AF ...
-
AFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6初期設定
ここではAFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法を初心者向けに解説しています。 AFFINGER6(アフィンガー6)では簡単にGoogleアナリティクスを導入して ...
-
AFFINGER6:Googleサーチコンソールへの登録方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6初期設定
Googleサーチコンソールではあなたのサイトが「どんなキーワードで表示されたのか」を確認することができたり、あなたのサイトのページが「どれくらいインデックスされているか」などを調べることができます。 ...
-
AFFINGER6のステマ規制対策-広告表記を表示させる方法
2024/7/18 AFFINGER6(アフィンガー6)
この記事ではステマ規制対策としてAFFINGER6(アフィンガー6)で記事に「広告」表記を表示させる方法を解説しています。 ステマ規制とは2023年10月から開始された「ステルスマーケティング」に対す ...
AFFINGER6の使い方
-
AFFINGER6の使い方【まとめ】-初心者向けガイド-
2024/11/5 AFFINGER6(アフィンガー6), アフィンガー6の使い方
この記事はAFFINGER6(アフィンガー6)の使い方を初心者向けに詳しく解説しています。 見出しの作成方法 記事作成の基本!見出し作成や見出しについての記事です。 カテゴリーの作成とカテゴリーページ ...
AFFINGER6のデザインカスタマイズ
-
AFFINGER6のカスタマイズ方法-初心者向けガイド-
2024/11/21 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
この記事ではAFFINGER6のカスタマイズ方法を初心者向けに詳しく解説しています。 デザインカードプラグインでサイトデザインを変更する方法 プラグインでサイトデザインを簡単に変更できるようになりまし ...