WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【Simplicity2】テーマで画面いっぱいの背景画像設置&コンテンツを半透明にしてみた

公開日: 使い方など

みんな似たようなテーマを使ってサイト作りしてるんだから少しでもオリジナリティを出したい!!誰もが思うことだと思います。

WordPressで作られたサイトでどんなテーマが使われているかはサイトのソースを見て「wp-content/themes/〇〇」と書かれているところの〇〇がテーマ名なので、「このテーマきれい!!何を使ってるの?」と気になる場合には簡単に調べることができますね。Wordpressの公式サイトで配布されているものなら検索すれば一発!で探し当てることができます。

また、公式サイトにないものでも、そのテーマ名でググれば大抵はヒットします。このサイトで使用している【Simplicity2】もその代表格だと思います。

無料テーマで有名なものとしては【Simplicity2】の他にも

  1. Cocoon
  2. BizVektor(ビズベクトル)
  3. Lightning
  4. LION MEDIA

などがよく使われていますね。

これらの無料テーマにはスキン機能(デザインの着せ替え機能)が用意されていたり、カラーテンプレートがあったりとそれなりに他のサイトとは違うものにできたりするのですが、もう一歩進んでオリジナルなサイトにしたいと思いませんか??

今回はこのサイトで使っている【Simplicity2】を使って、背景画像を設定しつつ、本文やサイドバーウィジェットなどを半透明(透過)にする方法を紹介します。2018年10月現在、実際にサイトへ反映していますが、もしも別の方法になっていたらごめんなさい。

背景画像を用意してサイトにアップロードしよう

画像の加工

まずは何と言っても背景にする画像を用意する必要があります。背景画像は別にオリジナルなものを作らなくても、「背景 画像 フリー」などのキーワードでググれば簡単に見つかります。このサイトも

などの画像を使わせていただいております。

さて、ここからが問題。配布されている背景画像や背景イラストなどはサイズが若干小さいんですね。今回の画像幅いっぱいに・・と考えるとちょっとつかいにくい感じです。知識のある方ならCSSで引き延ばせば・・・と思われるかもしれませんけど、縦横比がおかしくなったりどこかが欠けてしまったりしてあまりいい感じにはならないんです。

そこで入手した画像にひと手間加えます。そう、サイズ変更です。私が使ったのは

という無料の画像修正ソフト。動作が速くて使いやすいのでずっと使ってます。

詳細な使い方はこれまたググっていただくとして、ダウンロードした画像を拡大して保存し直します。

最低でも最近主流の画像幅には合わせたいので、横幅は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;
	}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

※コード中の「サイトのURL」と「画像のファイル名と拡張子」は自身に合わせてください

※このコードは

を参考にさせていただきました。

CSSを保存してサイトを見てみると・・・背景が設定できてると思います。

※適用されていない場合にはCSSを追記した場所の問題か、ブラウザのキャッシュの問題です。キャッシュをクリアするか、しばらく経ってから表示してみてください

これで背景画像の設定は終了です。きちんと画面いっぱいに表示されてますよね?簡単簡単!!

本文やサイドバーウィジェットを半透明にする

テーマカスタマイザーで本文やサイドバーウィジェットの背景を白にしている場合、背景画像によってはなんだか浮いた感じになりますよね?それを解消するために、本文やウィジェットを半透明にします。

本文で必要なのは以下のコードです(背景と同じようにCSSの末尾へコピーしてください)

#main {
    border:none;
    background-color: rgba(255,255,255,0.7);
}
.post-meta {
    background-color: rgba(255, 255, 255, 0);
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

上は本文本体の背景、下はメタデータ(投稿日などが書いてある帯)の背景設定になります。カラーコードを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);
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

上はサイドバー全体を完全透明にしなさいというコードです。

下は各ウィジェットの透明度を0.7(本文と同じ透明度)にするというコードです。

#ウィジェットとなっている部分はウィジェット個別の名前になりますので、使用しているものに対してデベロッパーツールでセレクタを調べて記述します。Simplicity2の場合はウィジェットの種類(テキストなど)でも設定できますし、個々のウィジェットでも設定できますが、確実に・・・ということであれば後者に対して設定した方がいいかと思います。

※半透明にするウィジェット分だけ

#sidebar #ウィジェット {
    background-color: rgba(255, 255, 255, 0.7);
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


を追加して記述していきます(まとめて設定もできますが、個々にしておいた方が後から見た時に分かりやすいと思います)。

プラグインなどで挿入するウィジェットに対しても同じように設定すれば半透明化は完了です。


いかがでしたか?このサイトはサイト幅などもカスタマイズしてしまっているためパッと見Simplicityとは分からない感じになってしまってますが、この位やればやっと自分専用のサイト!!と言えるのではないでしょうか??

ちょっとしたカスタマイズで大きく見た目が変わるWordpressのテーマ、ぜひカスタマイズしてオリジナルのサイトを目指しましょう!!

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】