前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。上で画像の切り抜きを設置すると、いつでも色を変更できるので便利です。7の2イラストの形にグラデーション画像を表示する1.イラストを用意する切り抜きの型となるイラストを用意しましょう。今回はこのPNG画像を利用することにします。フリーイラストをダウンロードするのも良いでしょう。用意するのは黒に塗りつぶした画像です。)に画像モジュールを追加する灰色「+(モジュールの追加)」をクリックします。「画像」モジュールを追加します。3.型とする画像を変更する画像モジュールの「コンテンツ」>「画像」をクリックします。画像をクリックして、メディアライブラリを呼び出します。設定したい画像を選択して、「画像をアップロードする」をクリックします。画像がアップロードされます。「✔(チェックマーク)」をクリックして確定します。4.行のカラム1の背景にグラデーションを追加する緑色「⚙(歯車)」の行の設定をクリックします。行の設定の「コンテンツ」タブの「背景」をクリックします。)」をクリックします。「色を選択」をクリックしてグラデーションとしたい2色を選びます。※後でも変更できます。画面を見ながら調整します。※もちろん後でもいつでも変更できます。「✔(チェックマーク)」をクリックして確定します。5.画像モジュールの背景を白に設定する今回は、イラスト画像の部分にだけグラデーションを表示したいので、画像モジュールの背景は全部白にします。灰色「⚙(歯車)」のモジュールの設定をクリックします。画像モジュールの設定で「コンテンツ」タブの「背景」をクリックします。Color)」をクリックします。カラー選択のパネルが表示されるので「白」をクリックします。「✔(チェックマーク)」をクリックして確定します。」を「スクリーン」に変更すると、下記のようにイラスト部分がグラデーションに置き換わります。「✔(チェックマーク)」をクリックして承認します。これで完成ですが、色の変更を後でしたいと思ったとき用に補足します。補足.色を変更する緑色「⚙(歯車)」の行の設定をクリックします。行の設定の「コンテンツ」タブの「背景」をクリックします。コンテンツのカラム1の背景の画像上をクリックします。「色を選択」をクリックしてグラデーションとしたい2色を選びます。※後でも変更できます。画面を見ながら調整します。こんな形で色はいつでも自由に変えられます。今回はイラストの形に切り抜いたグラデーションをサイトに設置する方法でした。次回もどうぞよろしくお願いします。写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。関連する記事の目次ページとしています。図を用いて簡単に説明するようにしています。テーマのカスタマイズのうち、「外観」>「カスタマイズ」の項目で設定できる内容について図解します。各種モジュールのうちから、ギャラリーモジュールについて図解したいと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。