ふみやヘッダー付近のランキング画像

この画像はFV付近にバナーを置くための設定方法です。

キャンバURLは以下です。

文字部分画像 編集ページ

文字はできるだけ大きく、画像いっぱいのサイズにしてください。(スマホで見ると小さくなります)

バランスを保てる人は文字サイズは好きにしてください。

最後にバナーの背景色をカラーピッカーから取得します。

カラーピッカーで取得した値をWPの”カバー”ブロックに以下の流れで適用して、最初にこの画像を設置します。

カバーを選択。右のブロック編集を選択>オーバーレイ>カラーボード>数値をキャンバで作った画像に合わせる。色のバランスがとれるなら色を変更しても可能ですが、カバー色がバナーの全体につくので注意してください。

ランキング画像 編集ページ

背景は透過で出力必須。

★の数は右下にある白画像を伸縮して星の数を変えてください。

基本はTOP3まで。ランキング画像は1位から3位までを用意してください。

2つの画像ができたら”カバー”というブロックを検索して使ってください。

カバーは指定の画像の上に画像を載せることができます。

文言バナーからアップして、1位から順番に乗せてください。

右下の+で画像を追加できます。

ここは画像じゃなくても大丈夫なので口コミや見出しなども使えます。

カバーの上に載ってるブロックは

文言バナー
画像
画像
画像

となります。

上記がスマホ表示の画面になります。(この画像は背景透過していません)

上記の4画像にアニメーションを加えればさらに目立つバナーデザインができると思います