Simplicityの背景を消す方法!5分で終わる簡単カスタマイズ

  • このエントリーをはてなブックマークに追加
  • 0

キャプチャ

Simplicityの初期設定では、メイン部分の背景色は白ですね。Simplicityに限らず、どのテンプレートでも背景色は白である場合が多いです。ですが、最近は背景を消して背景画像を表示しているサイトも多いです。

背景色は白が定番ですが、背景画像にするのもなかなかオシャレですね。背景色を消すカスタマイズは意外に簡単なので、実際にやってみます。

Simplicityの背景を消す方法

今回のカスタマイズの手順をご説明します。

①背景画像を設定する
②メイン部分の背景色を消す
③メイン部分の枠を消す

以上です。5分もかからないので初心者の方でも大丈夫だと思います。

背景画像を設定する

まずは、背景画像を設定します。

設定方法は、「外観」⇒「背景」⇒「画像の変更」からできます。まだ画像を持っていない方は、フリー素材サイトで探してみましょう。一応私が利用しているサイトを貼っておきますね。

(商用可能、利用報告も必要ありません)

もしも、背景画像ではなく、色だけを付けたい場合は、「外観」⇒「カスタマイズ」⇒「色」⇒「背景色」から設定してください。

メイン部分の背景色を消す

次に、メイン部分の背景色を消します。このコードをstyle.cssに追加します。

コードの追加後は、背景が透明化されて、背景画像の上に文字が表示されていると思います。

メイン部分の枠を消す

Simplicityの初期設定では、メイン部分に枠がありますね。背景を透明化したついでに、この枠も消してしまいます。追加するのはこれです。

これでメイン部分の枠が消えました。

以上で、今回のカスタマイズは終わりです。背景を画像にした場合、文字の色が見づらくなったり、ボタンの色と同化してしまうことがあるので、それぞれ見やすい色に変更しておきましょう。

では、お疲れ様でした。

コピペで簡単!Simplicityのカスタマイズまとめ。
このサイトはWordpressを使っています。テンプレートはSimplicityです。これま...



  • このエントリーをはてなブックマークに追加
date-entry
トップへ戻る