ウィジェット背景設定

 

バージョン3.0からウィジェット背景設定に動画を設定できる機能が追加されました詳しくはこちら

「Grazioso」では、「ウィジェットの配置」で設定したウイジェット毎に、背景色や背景画像を設定できる「ウィジェット背景設定」機能が備わっています。

※この機能は、バージョン2.0から実装されました。

※追記 2016/07/10  ウイジェット背景設定でエラーが出た場合→ https://guide.grazioso.info/?p=1478

 

「ウィジェット背景設定」機能を使用するためには、事前に「ウィジェットの配置」でトップページにウィジェットを配置しておく必要があります。(※デフォルトのトップページに配置したウィジェットの背景にのみ反映されます

ウィジェットを配置しコンテンツの入力が終わったら、管理画面の左メニューから「外観」→「ウィジェット背景設定」をクリックします。

bandicam 2015-09-29 10-20-45-559

 

 

 

 

 

 

 

背景に画像を設置

「ウィジェット背景設定」の画面が開くので、ここから設定を行います。まずは背景に画像を設置してみます。(画像の選択をクリック)

bandicam 2015-09-29 10-29-22-607

 

メディアライブラリがポップアップするので、パソコンにある画像をアップロードするか、ライブラリに既存の画像を選択します。ここではアップローダーを使用してパソコンにある画像をアップロードします。

bandicam 2015-09-29 10-29-43-038

ファイルを選択をクリック。エリア内にファイルをドロップしてもOKです。

 

bandicam 2015-09-29 10-30-45-790

画像を選択して「開く」をクリック。

 

bandicam 2015-09-29 10-32-59-980

下にある「投稿に挿入」をクリックします。


 

追記:なお、「投稿に挿入」ボタンを押しても画像が反映されないというお問い合わせを多く頂きますが、様々な要因により「リンクURL」の欄が空欄になっている場合がありますので、下記の画像と説明を参考に、「リンクURL」の欄をご確認ください。

image-uproader

「画像選択」をクリックすると画像アップローダーが起動しますが、画像を選択した後に表示される項目の中の「リンクURL」の欄に画像URLが挿入
されていない場合があります。

その場合、「リンクURL」の欄のすぐ下にあります「ファイルURL」というボタンをクリックしていただくと、画像URLが挿入されますので、その後に「投稿に挿入」ボタンをクリックして頂くと背景画像の欄に当該URLが挿入されます。

 


 

bandicam 2015-09-29 10-33-23-083

背景画像の欄に画像URLが自動で挿入されます。一番下にある「変更を保存」をクリックして表示を確認してみましょう。

 

bandicam 2015-09-29 10-34-31-040

ウィジェットの背景が画像になりました。

 

なお、「固定(Fixed)」にチェックを入れると背景画像は固定化され、ページをスクロールしても表面のテキストや画像だけがスクロールされる「パララックス効果」が有効化されます。(実際にチェックを入れて確認してみてください)

bandicam 2015-09-29 10-35-05-099

※パララックス効果はPC表示時のみ有効です。スマホ表示時は背景画像は固定化されず、コンテンツと共にスクロールする状態で表示されます。

 

背景色の変更

次に、ウィジェットの背景色を変更してみます。この場合、背景画像を設定していた場合は画像が優先されますので、画像URLは削除しておいてください。

※テーマオプションの「外観」で設定した背景色よりも、ここで設定した背景色が優先されますのでご注意ください。

 

bandicam 2015-09-29 10-37-26-538

「色を選択」をクリックします。

 

bandicam 2015-09-29 10-37-54-129

カラーピッカーが起ち上がるので、お好みの色を選択します。16進数のカラーコードを入力してもOKです。(#FFFFFFなど)

色を選択したら「変更を保存」をクリックします。

 

bandicam 2015-09-29 10-38-22-303

※テーマオプションの「外観」で設定した背景色よりも、ここで設定した背景色が優先されますのでご注意ください。

 

テキスト色の変更

背景色や背景画像の色相によってはテキスト色を変更したい場合がありますが、その場合は「テーマオプション」→「外観」からウィジェット毎にテキスト色を変更します。

 

bandicam 2015-09-29 10-40-03-898

「文字色」の部分を任意の色に変更します。カラーコードの欄をクリックするとカラーピッカーが起ち上がるので任意の色を選択してください。

 

bandicam 2015-09-29 10-40-18-120

ここでは白(#FFFFFF)に変更しました。 変更したら下部の「変更を保存」をクリックします。

 

bandicam 2015-09-29 10-40-44-887

設定した文字色が反映されました。

 

以上で説明を終わります。是非、有効に活用してください。

この記事を書いた人

Graziosoサポート

Graziosoのカスタマー担当。