AFFINGER

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

2021年4月19日

AFFINGERサンプル

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

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

 

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

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

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

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

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

背景ワイド

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

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

小豆
そうなんだ。
この記事装飾自体が、あまり知られていないってこと?
確かにそれもあるね。
でも、「使いみちがわからなくて」ってパターンが多いんだと思うよ。
大福

 

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

 

背景ワイドの使いみち

こんな用途で使うと便利

  • 目立たせたいコンテンツ
    追記や更新情報、注意書きなどの読み飛ばされたくないコンテンツに
  • 背景に画像を設定したいとき
    背景に画像を設定し、その上にテキストを入力
  • ビジネスサイト風の商品紹介に
    商品紹介などをスタイリッシュに行いたいとき
小豆
スタイリッシュな商品紹介とは・・!?
実際に作ってみたよ。
大福

 

AFFINGER6イメージ画像

AFFINGER6

内部SEO対策

豊富な記事作成パーツ

稼ぐに特化したアフィリエイト機能

 

公式サイトへ

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

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

背景ワイドの表示方法

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

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

シンプルデザイン

手順

  1. テキストを入力
  2. 背景ワイド装飾
  3. 左寄せ・右寄せ

 

step
1
テキストを入力

テキストを入力

テキストの入力

背景ワイド内に表示したいテキストを入力します。
テキスト単体だけでなく、ボックスデザインなどの記事装飾をすることも可能です。

 

step
2
背景ワイド装飾

ワイド背景装飾

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

 

step
3
左寄せ・右寄せ

左寄せン右寄せ

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

寄せ

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

小豆
シンプルデザインは、背景色の変更とかはできないの?
できないんだ。
細かく設定したい人には、以下の「カスタマイズデザイン」がおすすめだよ。
大福

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

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

カスタマイズデザイン

背景ワイドカスタマイズ

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

シンプルデザインとの違いは、スタイルではなくタグを使用することです。

 

入力されるコードの解説

[st-wide-background myclass="任意のクラス" backgroud_image="画像のURL" bgcolor="背景色のカラーコード" align="背景の寄せ" add_style="styleを追加"]

ここにコンテンツ

[/st-wide-background]

 

背景色の変更

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

サンプルコード

[st-wide-background myclass="" backgroud_image="" bgcolor="#424242" align="" add_style=""]

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

[/st-wide-background]

実際の表示

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

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

 

背景を画像にする

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

サンプルコード

[st-wide-background myclass="" backgroud_image="https://daifuku-diary.com/wp-content/uploads/2021/04/画像の上にテキスト.jpg" bgcolor="#fafafa" align="" add_style=""]

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

[/st-wide-background]

実際の表示

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

 

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

メディアのURLをコピー

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

 

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

イラストACよりダウンロード

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

 

写真ACよりダウンロード

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

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

検索欄にテクスチャ 🔎と入力すると、背景にぴったりな画像がたくさん見つかります。

 

余白を設定する

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

背景ワイドの高さ

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

サンプルコード

[st-wide-background myclass="" backgroud_image="" bgcolor="#B3E5FC" align="" add_style="padding:70px;"]

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

[/st-wide-background]

実際の表示

サンプルテキスト サンプルテキスト

サンプルテキスト サンプルテキスト

余白を設定するコード:padding:ここに数字px;

 

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

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

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

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

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

 

  • 当ブログ内で人気の記事装飾

 

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

オリジナル特典バナー

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

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

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

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

こちらの記事もよく読まれています

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

© 2021 大福日記