AFFINGER5【背景ワイドデザイン】画像の上に文字の入力も

AFFINGER5の記事装飾【背景ワイド】の使い方紹介です。

また、さらに便利にグレードアップさせるためのカスタマイズも紹介します。

こんな人のお役に立てる記事です。

小豆

絶対に読んで欲しいポイントを、記事内で目立たせたい。
ユーザーの目を惹く記事装飾を教えて。

画像の上に文字装飾も！AFFINGER5【背景ワイド】の使いみち

AFFINGER5には、【背景ワイド】という記事装飾があります。

実際に使用した例がこちら。

画像の通り、記事エリアの幅いっぱいにコンテンツを表示できる記事装飾です。

ちなみにこの・・記事装飾、多くのAFFINGERブログの中でも、あまり使用されているのを見たことがありません。

小豆

そうなんだ。
この記事装飾自体が、あまり知られていないってこと？

確かにそれもあるね。
でも、「使いみちがわからなくて」ってパターンが多いんだと思うよ。

大福

というわけで、「背景ワイドの使いみち」をちょっと考えてみました。

背景ワイドの使いみち

小豆

スタイリッシュな商品紹介とは・・！？

実際に作ってみたよ。

大福

企業サイトのLPや、ビジネスサイトで見かけるようなデザインですね。

背景ワイドを利用すれば、こんなデザインも簡単に作れます。

背景ワイドの表示方法

AFFINGER5には、2種類の【背景ワイド】装飾が用意されています。

まずは、シンプルデザインの方から使い方を解説していきます。

step
1テキストを入力

テキストの入力

step
2背景ワイド装飾

テキストを選択　→　スタイル　→　ボックス　→　ワイド背景

step
3左寄せ・右寄せ

背景を左、もしくは右に寄せたいときは、以下のように設定します。

テキストを選択　→　スタイル　→　ボックス　→　任意の「寄せ」を選択

小豆

シンプルデザインは、背景色の変更とかはできないの？

できないんだ。
細かく設定したい人には、以下の「カスタマイズデザイン」がおすすめだよ。

大福

細かくカスタマイズ可能な背景ワイドデザイン

続いて紹介するのは、自分好みにカスタマイズ可能な【背景ワイドデザイン】です。

テキストを選択　→　タグ　→　レイアウト　→　背景ワイド

背景色の変更

背景色を変更するには、bgcolor=" "にHTMLカラーコードを入力します。

※テキストカラーを白に設定しています

背景を画像にする

背景に画像を設定するには、backgroud_image=" "に画像のURLを入力します。

画像のURLは、「メディアを追加」からコピペすることが可能です。

メディアを追加　→　任意の画像を選択　→　URLをクリップボードにコピー

無料画像ダウンロードサイトを使うのもおすすめだよ。

大福

※テキストは「カスタムフォント」にて装飾しています

余白を設定する

通常は、入力されたコンテンツに合わせて【背景ワイド】の高さが自動調整されます。

任意の高さに設定をしたい場合は、 add_style=" "を利用します。

まとめ：背景ワイドでコンテンツを目立たせよう

【背景ワイド】を使えば、任意のコンテンツを記事内で目立たせることができます。

ただし、使いすぎるのはNG。

乱用しすぎると、記事内がごちゃごちゃと見づらくなってしまいます。

というわけで、「ここぞ！」という時にぜひ利用してみてください。

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する