みんな似たようなテーマを使ってサイト作りしてるんだから少しでもオリジナリティを出したい！！誰もが思うことだと思います。
WordPressで作られたサイトでどんなテーマが使われているかはサイトのソースを見て「wp-content/themes/〇〇」と書かれているところの〇〇がテーマ名なので、「このテーマきれい！！何を使ってるの？」と気になる場合には簡単に調べることができますね。WordPressの公式サイトで配布されているものなら検索すれば一発！で探し当てることができます。
また、公式サイトにないものでも、そのテーマ名でググれば大抵はヒットします。このサイトで使用している【Simplicity2】もその代表格だと思います。
無料テーマで有名なものとしては【Simplicity2】の他にも
- Cocoon
- BizVektor（ビズベクトル）
- Lightning
- LION MEDIA
などがよく使われていますね。
これらの無料テーマにはスキン機能（デザインの着せ替え機能）が用意されていたり、カラーテンプレートがあったりとそれなりに他のサイトとは違うものにできたりするのですが、もう一歩進んでオリジナルなサイトにしたいと思いませんか？？
今回はこのサイトで使っている【Simplicity2】を使って、背景画像を設定しつつ、本文やサイドバーウィジェットなどを半透明（透過）にする方法を紹介します。2018年10月現在、実際にサイトへ反映していますが、もしも別の方法になっていたらごめんなさい。
背景画像を用意してサイトにアップロードしよう
画像の加工
まずは何と言っても背景にする画像を用意する必要があります。背景画像は別にオリジナルなものを作らなくても、「背景 画像 フリー」などのキーワードでググれば簡単に見つかります。このサイトも
季節の無料イラストColor-full Daysは個人・商用無料で使用できます
などの画像を使わせていただいております。
さて、ここからが問題。配布されている背景画像や背景イラストなどはサイズが若干小さいんですね。今回の画像幅いっぱいに・・と考えるとちょっとつかいにくい感じです。知識のある方ならCSSで引き延ばせば・・・と思われるかもしれませんけど、縦横比がおかしくなったりどこかが欠けてしまったりしてあまりいい感じにはならないんです。
そこで入手した画像にひと手間加えます。そう、サイズ変更です。私が使ったのは
IrfanView 画像の閲覧に加え、動画や音声の再生も可能なマルチメディアビューア
という無料の画像修正ソフト。動作が速くて使いやすいのでずっと使ってます。
詳細な使い方はこれまたググっていただくとして、ダウンロードした画像を拡大して保存し直します。
最低でも最近主流の画像幅には合わせたいので、横幅は1920ピクセル程度にしましょう。
画像のアップロードはメディアを使わない
WordPressで画像のアップロードと言えば「メディア」の新規追加ですね。これを使えば簡単・・・ではありません。
メディアには設定があって、最大画像幅が決められています。その設定よりも大きな画像は自動で縮小されますから、前項の手間が水の泡になってしまいます。
これは画像を圧縮するようなプラグインを使った場合も同様ですから、それらを使用している場合もうまくいきませんのでご注意を。
背景にする画像はFTPクライアントソフトやサーバーのファイルマネージャーを使います。FTP?という方はWordPressの管理画面上で同じ機能が実装できる
などのプラグインを使うといいでしょう。
ファイルを転送する環境ができたら、サーバーの中のインストールディレクトリ（index.phpのある場所）→「wp-content」→「uploads」→「bg」へ画像をアップロードします
※「bg」フォルダはありませんのでディレクトリの新規作成などの右クリックメニューから作成してください（このディレクトリにアップロードしたことを前提に以下の紹介を進めます）
これでメディアにアップロードしたことで勝手に？縮小されてしまう問題と、同じくメディアにアップロードしたときに別の大きさの画像が勝手に？作られることを回避できます。
これで背景画像を設定する準備は完了です。
背景画像を設定する
背景画像？それならテーマカスタマイザーでできるのでは？？と思った方、テーマカスタマイザーで設定できる画像はメディアで認識されたものだけなので選択できません。したがって独自に設定することになります。
テーマカスタマイザーを開いたついでにサイドバーの背景を白色に設定している方はオフにしましょう。
背景画像の設定方法
独自に追加・・・と言ってもやり方は簡単、以下のコードをテーマのCSSへコピーします（CSSは下の行へ記述したものが優先されますからら、CSSの末尾へ追記しましょう）。
#container{
/* 画像ファイルの指定 */
background-image: url(サイトのURL/wp-content/uploads/bg/画像のファイル名と拡張子);
/* 画像を常に天地左右の中央に配置 */
background-position: center center;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が読み込まれる前に表示される背景のカラー */
background-color: #ffffff;
}※コード中の「サイトのURL」と「画像のファイル名と拡張子」は自身に合わせてください
※このコードは[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニックを参考にさせていただきました。
CSSを保存してサイトを見てみると・・・背景が設定できてると思います。
※適用されていない場合にはCSSを追記した場所の問題か、ブラウザのキャッシュの問題です。キャッシュをクリアするか、しばらく経ってから表示してみてください
これで背景画像の設定は終了です。きちんと画面いっぱいに表示されてますよね？簡単簡単！！
本文やサイドバーウィジェットを半透明にする
テーマカスタマイザーで本文やサイドバーウィジェットの背景を白にしている場合、背景画像によってはなんだか浮いた感じになりますよね？それを解消するために、本文やウィジェットを半透明にします。
本文で必要なのは以下のコードです（背景と同じようにCSSの末尾へコピーしてください）
#main {
border:none;
background-color: rgba(255,255,255,0.7);
}
.post-meta {
background-color: rgba(255, 255, 255, 0);
}上は本文本体の背景、下はメタデータ（投稿日などが書いてある帯）の背景設定になります。カラーコードをRGBにして透明にした上で透明度を設定しています（末尾の0.7と0の数字です）。背景画像に対して0.7の透明度で本文の背景を設定し、本文の背景に対して0の透明度（完全透明）でメタデータの帯を設定するという内容です。囲み線（border）も不要なのでnone(非表示)にしています。
次にサイドバーウィジェットの半透明化です
これも以下のコードをCSSの末尾へコピペします
#sidebar{
background-color: rgba(255, 255, 255, 0);
}
#sidebar #ウィジェット {
background-color: rgba(255, 255, 255, 0.7);
}上はサイドバー全体を完全透明にしなさいというコードです。
下は各ウィジェットの透明度を0.7(本文と同じ透明度)にするというコードです。
#ウィジェットとなっている部分はウィジェット個別の名前になりますので、使用しているものに対してデベロッパーツールでセレクタを調べて記述します。Simplicity2の場合はウィジェットの種類（テキストなど）でも設定できますし、個々のウィジェットでも設定できますが、確実に・・・ということであれば後者に対して設定した方がいいかと思います。
※半透明にするウィジェット分だけ
#sidebar #ウィジェット {
background-color: rgba(255, 255, 255, 0.7);
}を追加して記述していきます（まとめて設定もできますが、個々にしておいた方が後から見た時に分かりやすいと思います）。
プラグインなどで挿入するウィジェットに対しても同じように設定すれば半透明化は完了です。
いかがでしたか？このサイトはサイト幅などもカスタマイズしてしまっているためパッと見Simplicity2とは分からない感じになってしまってますが、この位やればやっと自分専用のサイト！！と言えるのではないでしょうか？？
ちょっとしたカスタマイズで大きく見た目が変わるWordPressのテーマ、ぜひカスタマイズしてオリジナルのサイトを目指しましょう！！
ポチップ
ポチップ
