SANGOのウィジェットタイトルに、背景画像を設定する方法です。
簡単に設定できます。
メリットとしては、大きく下記の3点です。
- サイトが個性的になり、他サイトと差をつけられる
- サイトがより印象的になる
- デザインの選択肢も増えて、カスタマイズ楽しい
デフォルトだと、以下のようにテーマカラーのベタ塗りです。
これでもシンプルで良いですが、みんな同じようなサイトになりがちな印象です。
SANGO使ってるな、、、という感じに。
この記事で、より個性的に、ユーザーエクスペリエンスも上げてみてください。
この記事を書いている僕は、SANGO歴1年ほど。
カスタマイズしながら、楽しくブログ生活を送っています。
Contents
SANGOのウィジェットタイトルに背景画像を設定する方法
まずは完成イメージをお見せします。
完成イメージ
実際に僕のサイトで設定しているデザインですね。
設定方法の流れ
以下の流れで設定できます。
- 手順①:使用する画像をアップロードする
- 手順②:画像のURLをコピーする
- 手順③:『外観』→『カスタマイズ』を開く
- 手順④:『追加CSS』を開く
- 手順⑤:『追加CSS』に追記する
- 手順⑥:「公開」を押して完了!
順番に見ていきます。
手順①:使用する画像をアップロードする
『メディア』→『ライブラリ』を開きます。
「新規追加」から画像を追加しましょう。
手順②:画像のURLをコピーする
画像を選択し、「ファイルのURL:」をコピーします。
一旦、メモ帳などに控えておくと良いです。
手順③:『外観』→『カスタマイズ』を開く
以下のように開きます。
手順④:『追加CSS』を開く
『追加CSS』を開きます。
手順⑤:『追加CSS』に追記する
以下の内容をコピペしてください。
※
部分は、先ほどコピペしたURLに変更してください。<メディアにアップロードした画像のURL>
/*--------------------------------------
ウィジェットタイトルに背景画像を設定する
--------------------------------------*/
.widgettitle {
background-image: url(<メディアにアップロードした画像のURL>);
}
#searchsubmit {
background-image: url(<メディアにアップロードした画像のURL>);
}
以下のように追加できました。
手順⑥:「公開」を押して完了!
設定は以上で完了です!お疲れさまでした。
具体例:いろんな背景で設定してみた
いろんなパターンで試してみました。
木目系
空系
自然系
タイル系
抽象系
画像の探し方
Unsplushで、「texture」や「abstract」と調べるといい感じかもです。
それ以外のワードでも、使えそうな画像はたくさんありました。
まとめ
最後にまとめます。
この背景画像設定をすることで、
- サイトが個性的になり、他サイトと差をつけられる
- サイトがより印象的になる
- デザインの選択肢も増えて、カスタマイズ楽しい
というわけでした。
今回は以上です!
最後までお読み頂き、ありがとうございました。
素敵なSANGOライフをお楽しみください。