【簡単!SANGOカスタマイズ】ウィジェットタイトルの背景に画像を設定する方法【コピペOK】

SANGOのウィジェットタイトルに、背景画像を設定する方法です。

簡単に設定できます。

メリットとしては、大きく下記の3点です。

  • サイトが個性的になり、他サイトと差をつけられる
  • サイトがより印象的になる
  • デザインの選択肢も増えて、カスタマイズ楽しい

デフォルトだと、以下のようにテーマカラーのベタ塗りです。


これでもシンプルで良いですが、みんな同じようなサイトになりがちな印象です。
SANGO使ってるな、、、という感じに。

この記事で、より個性的に、ユーザーエクスペリエンスも上げてみてください。

この記事を書いている僕は、SANGO歴1年ほど。
カスタマイズしながら、楽しくブログ生活を送っています。

SANGOのウィジェットタイトルに背景画像を設定する方法

まずは完成イメージをお見せします。

完成イメージ

実際に僕のサイトで設定しているデザインですね。

設定方法の流れ

以下の流れで設定できます。

  • 手順①:使用する画像をアップロードする
  • 手順②:画像のURLをコピーする
  • 手順③:『外観』→『カスタマイズ』を開く
  • 手順④:『追加CSS』を開く
  • 手順⑤:『追加CSS』に追記する
  • 手順⑥:「公開」を押して完了!

順番に見ていきます。

手順①:使用する画像をアップロードする

『メディア』→『ライブラリ』を開きます。

「新規追加」から画像を追加しましょう。

手順②:画像のURLをコピーする

画像を選択し、「ファイルのURL:」をコピーします。
一旦、メモ帳などに控えておくと良いです。

手順③:『外観』→『カスタマイズ』を開く

以下のように開きます。

手順④:『追加CSS』を開く

『追加CSS』を開きます。

手順⑤:『追加CSS』に追記する

以下の内容をコピペしてください。
<メディアにアップロードした画像のURL>部分は、先ほどコピペしたURLに変更してください。

/*--------------------------------------
ウィジェットタイトルに背景画像を設定する
--------------------------------------*/
.widgettitle {
    background-image: url(<メディアにアップロードした画像のURL>);
}

#searchsubmit {
	    background-image: url(<メディアにアップロードした画像のURL>);
}

以下のように追加できました。

手順⑥:「公開」を押して完了!

設定は以上で完了です!お疲れさまでした。

具体例:いろんな背景で設定してみた

いろんなパターンで試してみました。

木目系

空系

自然系

タイル系

抽象系

画像の探し方

Unsplushで、「texture」や「abstract」と調べるといい感じかもです。

https://unsplash.com/

それ以外のワードでも、使えそうな画像はたくさんありました。

まとめ

最後にまとめます。

この背景画像設定をすることで、

  • サイトが個性的になり、他サイトと差をつけられる
  • サイトがより印象的になる
  • デザインの選択肢も増えて、カスタマイズ楽しい

というわけでした。

今回は以上です!
最後までお読み頂き、ありがとうございました。
素敵なSANGOライフをお楽しみください。