バージョン3.0からウィジェット背景設定に動画を設定できる機能が追加されました→詳しくはこちら
「Grazioso」では、「ウィジェットの配置」で設定したウイジェット毎に、背景色や背景画像を設定できる「ウィジェット背景設定」機能が備わっています。
※この機能は、バージョン2.0から実装されました。
※追記 2016/07/10 ウイジェット背景設定でエラーが出た場合→ https://guide.grazioso.info/?p=1478
「ウィジェット背景設定」機能を使用するためには、事前に「ウィジェットの配置」でトップページにウィジェットを配置しておく必要があります。(※デフォルトのトップページに配置したウィジェットの背景にのみ反映されます)
ウィジェットを配置しコンテンツの入力が終わったら、管理画面の左メニューから「外観」→「ウィジェット背景設定」をクリックします。
背景に画像を設置
「ウィジェット背景設定」の画面が開くので、ここから設定を行います。まずは背景に画像を設置してみます。(画像の選択をクリック)
メディアライブラリがポップアップするので、パソコンにある画像をアップロードするか、ライブラリに既存の画像を選択します。ここではアップローダーを使用してパソコンにある画像をアップロードします。
ファイルを選択をクリック。エリア内にファイルをドロップしてもOKです。
画像を選択して「開く」をクリック。
下にある「投稿に挿入」をクリックします。
追記:なお、「投稿に挿入」ボタンを押しても画像が反映されないというお問い合わせを多く頂きますが、様々な要因により「リンクURL」の欄が空欄になっている場合がありますので、下記の画像と説明を参考に、「リンクURL」の欄をご確認ください。
「画像選択」をクリックすると画像アップローダーが起動しますが、画像を選択した後に表示される項目の中の「リンクURL」の欄に画像URLが挿入
されていない場合があります。
その場合、「リンクURL」の欄のすぐ下にあります「ファイルURL」というボタンをクリックしていただくと、画像URLが挿入されますので、その後に「投稿に挿入」ボタンをクリックして頂くと背景画像の欄に当該URLが挿入されます。
背景画像の欄に画像URLが自動で挿入されます。一番下にある「変更を保存」をクリックして表示を確認してみましょう。
ウィジェットの背景が画像になりました。
なお、「固定(Fixed)」にチェックを入れると背景画像は固定化され、ページをスクロールしても表面のテキストや画像だけがスクロールされる「パララックス効果」が有効化されます。(実際にチェックを入れて確認してみてください)
※パララックス効果はPC表示時のみ有効です。スマホ表示時は背景画像は固定化されず、コンテンツと共にスクロールする状態で表示されます。
背景色の変更
次に、ウィジェットの背景色を変更してみます。この場合、背景画像を設定していた場合は画像が優先されますので、画像URLは削除しておいてください。
※テーマオプションの「外観」で設定した背景色よりも、ここで設定した背景色が優先されますのでご注意ください。
「色を選択」をクリックします。
カラーピッカーが起ち上がるので、お好みの色を選択します。16進数のカラーコードを入力してもOKです。(#FFFFFFなど)
色を選択したら「変更を保存」をクリックします。
※テーマオプションの「外観」で設定した背景色よりも、ここで設定した背景色が優先されますのでご注意ください。
テキスト色の変更
背景色や背景画像の色相によってはテキスト色を変更したい場合がありますが、その場合は「テーマオプション」→「外観」からウィジェット毎にテキスト色を変更します。
「文字色」の部分を任意の色に変更します。カラーコードの欄をクリックするとカラーピッカーが起ち上がるので任意の色を選択してください。
ここでは白(#FFFFFF)に変更しました。 変更したら下部の「変更を保存」をクリックします。
設定した文字色が反映されました。
以上で説明を終わります。是非、有効に活用してください。