加工した写真をホームページの背景に設定して、デザインをワンランクアップ!

2019/02/18
加工した写真をホームページの背景に設定して、デザインをワンランクアップ!
デザイン性の高いホームページで目にする、背景に画像を使ったデザイン。
リウムスマイル!でもヘアサロンのサンプルサイトで設定してたりします。

 

(例:ヘアサロンサンプルサイト/デザインスキン type058-25)

 

この設定自体はリウムスマイルの機能で簡単にできるんですが、例えば上記のように文字を白で表示したい時、背景に設定したい写真はあってもちょうどいい暗さではなかったりします。

それは逆も然り。

濃い文字色にしたい時は、ちょうどいい明るさや透明具合では無かったり…。

カッコよくても、文字が読みづらくなってしまっては本末転倒ですよね。

 

そういう時におすすめなのが無料で画像編集できるWEBサービス「Canva(キャンバ)」

ツイッターやFacebookのカバー画像などいろいろと自由に作成することができるサービスですごーく便利なんですが、今回は写真の加工方法のみに限定して簡単にご紹介します。

 

※この記事はCanvaの使い方の一例をご紹介する記事となります。

 Canva自体はリウムスマイル外のサービスとなりますので、詳しい操作方法などはサポートの範疇外となります。悪しからずご了承ください。

 

Canvaで写真を加工しよう

用意する写真

加工に使う写真は、横・縦ともにサイズが1000px以上のものを用意します。

できるだけサロン・お店で撮影された写真が良いですが、ない場合は素材サイトの写真を使いましょう。

 

▼参考:【2019年度版】ホームページやブログに使える!無料写真素材・イラスト素材サイトまとめ

https://riumsmile.jp/contents_4445.html


  1. まずはCanvaを開きます。
    Canvaは登録必須のサービスとなりますので、任意の登録方法を選んで登録してください。
    ≫Canvaの公式サイトを開く

    ▼詳しい登録方法・基本画面の見方はこちら
    https://riumsmile.jp/contents_3323.html
  2.  
    「デザインを作成」の中から[デスクトップ壁紙]をクリックします。
  3.  
    Canvaの編集画面が開くので、サイドバーにある[アップロード]をクリックします。
    [画像をアップロード]をクリックして、加工したい写真をアップロードします。

    ▼詳しいCanvaの編集画面の見方はこちら

    https://riumsmile.jp/contents_3326.html


  4. アップロードした写真は追加表示されますので、表示された写真をクリックします。
    右側のキャンバスに表示された写真の四隅の一角をクリックし、写真を拡大します。

  5. キャンバスの上部にエィデターツールバーにある[調整]をクリックします。

    ●明るめにしたい場合
    「明るさ」のバーを右側に移動させて、ちょうどいい明るさに設定してください。

    ●暗めにしたい場合
    「明るさ」のバーを左側に移動させて、ちょうどいい暗さに設定してください。

    ※文字をできるだけ目立たせたい場合は、写真をぼかすのがおすすめです。「ぼかし」のバーで調整すると、ぼかし加工が掛かります。

  6. 調整ができたら上部メニューバーにある[ダウンロード]をクリックします。
    ファイルの種類は[PNG]のまま、[ダウンロード]をクリックします。

 

以上で、背景用に加工できた写真をダウンロードできます。

では、次は実際にホームページのページパーツの背景に設定してみましょう。

 

加工した写真を背景画像として設定する

今回は例として、デザインスキンtype072-22でエステお手本の「おすすめコース」の背景に先ほど明るく加工した写真を設定します。

(設定する際、デザインスキンはサイドなしのものを選んでおくことをおすすめします)



  1. プレビュー画面を開きます。
    トップページのエリア8で背景を設定したいページパーツの[表示項目の設定]をクリックします。
  2.  
    表示設定画面の一番下にある[↓高度なデザイン設定]をクリックします。
    表示された高度なデザイン設定の[画像アップロード/選択]をクリックして、先ほど加工した写真をアップロードしましょう。
    ※アップロードする際、ホームページ用 アップロードファイル管理画面の『おすすめサイズ に合わせて自動リサイズしてアップロードする』のチェックは外してください。

  3. 背景画像表示設定は以下のように設定します。
    背景画像繰り返し:フィット
    画像の位置:中央
    パラックス設定:速度比:なし
  4. 表示設定画面の左下にある[保存]をクリックします。

 

 

ページパーツの背景に写真を設定するだけで、明るく華やかな印象になりましたね。

サイドなしのデザインスキンを使った時、他のページパーツとは差をつけたい時に簡単に設定できるのでとても便利です。

ここのページパーツをもう少し目立たせたいな・・・って時はぜひ設定してみてくださいね。