こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、無料WordPressテーマ:Stinger7のサイドバーをカスタマイズする方法を紹介したいと思います。

こないだ読者の方から「サイドバーの背景に画像を表示させる方法」を聞かれたので、サイドバーの背景に色を付ける方法と一緒に記事にしてみました。今回のカスタマイズもサイトの雰囲気をがらりと変えることができるので、よかったら参考にしてみて下さい。

カスタマイズ前

↓ Stinger7をインストールしたばかりの状態

stinger7-sidebar-background-image-before-1

カスタマイズ後

↓ サイドバーの背景にグレー(#D4D4D4)の色を追加

stinger7-sidebar-background-image-after-1

↓ サイドバーの背景に画像を追加(継ぎ目のない画像を繰り返し表示)

stinger7-sidebar-background-image-after-2

↓ サイドバーの背景に画像を追加(繰り返しのない画像を表示)

stinger7-sidebar-background-image-after-3

1. サイドバーの背景に背景色を追加

最初はサイドバーの背景に色を追加する方法です。

HTML要素の背景に色を追加するには background プロパティを使用すれば良いので、以下のコードを style.css などお使いのCSSファイルに追加します。

#side > aside {
    background: #D4D4D4;
    box-sizing: border-box;
    padding: 10px;
}

保存しページを更新すると、サイドバーの背景にグレーの色が追加されました。

stinger7-sidebar-background-image-after-1

ちなみに上のコードでは、余白を上下左右10pxに指定したんですが、box-sizing: border-box; を入れないと、サイドバーがはみ出てカラム落ちしてしまうので注意が必要です。

box-sizing: border-box;を入れない場合(↓)。余白を追加した分だけサイドバーの幅が広がり、コンテンツ幅からはみ出て落ちてしまいました。

stinger7-sidebar-background-image-css-error

2. サイドバーの背景に画像を追加

今度はサイドバーの背景に画像を追加する方法です。

このカスタマイズもCSSのみでできるので、以下のコードをお使いのCSSファイルに追加します。

#side > aside {
    background: url('画像のURL') repeat 50% 50%;
    box-sizing: border-box;
    padding: 10px;
}

上のコード中の ‘画像のURL’ には、メディアライブラリなどにアップロードした画像のURLを入れてもらえば大丈夫です。

gridder-gallery-media-upload

ちなみに上で使用した画像は Subtle Patterns というサイトでダウンロードしたものです。継ぎ目のないパターン素材を色々ダウンロードできるので、背景画像を探すには結構便利なサイトです。

http://subtlepatterns.com/

stinger7-background-subtle-patterns

2-1. 背景画像に一枚の画像を繰り返さずに使用する場合

先ほどはサイドバーの背景画像をタイルのように繰り返し敷き詰めましたが、繰り返しのない一枚画像を使うこともできます。以下のCSSコードを追加すると、、、

#side > aside {
    background: url('画像のURL') no-repeat 50% 50%;
    background-size: cover;
    box-sizing: border-box;
    padding: 10px;
}

ちょうど良い画像がなかったので、少しぼやけちゃってますけど、一枚の画像を繰り返し無しで表示させることができました。

stinger7-sidebar-background-image-after-3

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。