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

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

簡単に設定できます。

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

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

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

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

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

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

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

完成イメージ

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

設定方法の流れ

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

順番に見ていきます。

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

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

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

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

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

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

以下のように開きます。

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

『追加CSS』を開きます。

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

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

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

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

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

手順⑥：「公開」を押して完了！

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

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

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

木目系

空系

自然系

タイル系

抽象系

画像の探し方

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

https://unsplash.com/

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

まとめ

最後にまとめます。

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

というわけでした。

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