🔰 背景の設定とは

画像パーツを使ってページ上に画像を配置するのとは異なり、テキストなどがメインのコンテンツに、背景として画像を設定することができます。

セクション～インナーの要素をクリックして選択した状態で、画面右のデザイン設定画面の「背景」の項目から設定を行います。

 

背景に単色を設定する

背景に単色を指定する場合は、「単色」のタブを選択し好きな色を設定します。

カラーコードの左にある、■をクリックするとカラーピッカーが表示されます。
 

色調を変えたい時は上段のスライダー、明暗を変えたい時は下段のスライダーを動かし、希望の色をポイントで選択します。
 

◾お気に入りカラー

よく使う色は、「お気に入りカラー」として保存することも可能です。

保存したい色を選択している状態で「＋」をクリックすると、お気に入りカラーの一覧からいつでも呼び出せるようになります。
 

◾透明度（透過）

初期状態で「100%」と表示されているのは色の透明度です。
透過させたい場合はこの数値を直接入力して調整します。

0%：完全に透明
100%：不透明（通常の色）
 

背景にグラデーションを設定する

背景を2色以上の色を滑らかに変化させてグラデーションを表示することができます。
色の種類・位置・透明度・方向を設定することで、自由にグラデーションを作成できます

❶ カラーバー

現在設定されているグラデーションの状態が表示されます。
バー上の丸いハンドルは、それぞれの色の位置を表しています。
ドラッグで動かして＝色の変化が起こる位置を調整することができます。

❷ 角度

グラデーションの向きを「°(度)」の数値で指定することができます。

例：
0° → 縦方向
45°→ななめ
90° → 横方向

❸ 位置

各色がどの位置に配置されているかを、全体に対しての割合（%）で表しています。

0%：左端（開始位置）　100%：右端（終了位置）
　

❹ カラーを追加

初期状態の2色に加え、3色以上の色の切り替わりを設定することができます。

◾カラーコード、透明度はカラーピッカー共通の操作となります。

💡例）淡い2色を斜めにグラデーションさせた場合
 

青(左)と黄色(右)が混ざり合う部分が緑に見えます。

背景に画像を設定する

背景に画像を設定したい場合は、お手持ちの画像もしくはプリセット画像から選択することができます。
 

❶ 画像をアップロード

PCから画像をアップロードして仕様することができます。

❷ プリセットから選択

プリセットで選択できる画像は、外部サービス（Unsplash）より提供されている画像素材を利用しています。
※Hirameki 7のwebサイト機能において無料でお使いいただくことができますが、二次的な画像の利用にあたってはUnsplashの利用条件に従っていただく必要がありますのでご注意ください。
 

❸ ファイルから選択

設定したい画像が既にファイル管理機能のストレージにアップロードされている場合は、ここから選択することができます。
 

❹ 画像の表示形式

画像を枠内にどう表示させるかを選ぶことが出来ます。
それぞれの形式の違いについてはこちらのページをご覧ください。

❺ カラーオーバーレイ

画像の上に単一の色を重ねて、色味を変更することができます。
カラーピッカーで色を選択、透明度を入力します。

💭よくあるトラブル例

😣 思った向きにならない

→　まずは角度の設定を90°単位で調整すると意図した方向に近づきます。

😣 色の切り替わりが不自然

→　「位置（%）」の間隔が近すぎる可能性があります。各色の位置を離して調整してみましょう。
 

😣 背景が透けない

→　透明度が100%（不透明）になっていないかご確認ください。透過させたい場合は100%よりも数値を下げて入力しましょう。
→　もしくは、下に表示させたいものが正しく設定されていない可能性も考えられます。