Free!なランサー3

ふとした疑問やコアなお役立ち情報をお届けする情報サイト

背景画像の前にもう一枚背景を追加する方法

      2014/12/31

どういう事?って感じですがタイトルのまんまです。

前回紹介した記事↓

ヘッダーの背景画像を消す方法と他色々

簡単にブログタイトルを画像に変更する方法

上記で紹介していますがヘッダーの画像を消去、ついでに背景画像も消去しました。

この状態で背景画像を設定してみます。

7

するとどうでしょう・・・

少し殺風景なうえにサイドバーの文字が見にくくなります。特に派手目の背景画像を使ったら何が何だか解らなくなりますよね?

という事で背景画像の前にもう一枚背景を入れ込みます。

スポンサーリンク

背景を一枚追加する方法

先に完成イメージを見てみましょう。8

ハイッ!白い背景が追加されています。

が・・・・

ここらへんから素人の限界ですね・・・

無理やり背景を追加した感じです。私が行った方法は正解ではない様な気がします。(多分)参考程度に見てください。

それを踏まえて紹介しますね。

新たにタグを追加する

背景をもう一枚追加して、ヘッダー、メイン、サイドバー、フッターをひとまとめにしました。

<div id=”haikei”>

</div>

divタグで背景を追加したい場所を囲みます。

今回は仮にid名をhaikeiにしました。

id名は自由に変更して構いません。

追加する場所はこちら↓

404テンプレート

アーカイブ

home.php

メインインデックスのテンプレート

固定ページテンプレート

単一記事の投稿

↑こちらの一番上に<div id=”haikei”>一番下に</div>を挿入してください。

スタイルシートの追加

追加した<div id=”haikei”>のスタイルシートを記述します。

 追加する場所

スタイルシートに【ここからPC表示設定】と表記されています。

そこに【1024px コンテンツ】とあるのでその部分に追加します。

そうする事でPC表示のみに設定されます。

何故PC表示だけに設定するのかといいますと、スマホとタブレットまで設定してしまうとこの二つのレイアウトが完全に崩れてしまいます。解決方法はあるかと思いますが、面倒なのでPC表示のみ設定します。

ではスマホとタブレットはそのままなのか?

いえいえ!そこも対処しますよ

レスポンシブ化されるとサイドバーは記事の下に来ます。もちろん背景は画像になっているので背景を追加します。

スマホ、タブレット閲覧時の背景追加

・・・と言っても簡単です。

サイドバーの部分にbackground-color: #fff;を追加するだけでOKです。

 

じゃあ最初からこれでいいんじゃないの?と思いがちですが、ヘッダー、メイン、サイド、フッターとまとめたかったのと個別に設定するとメインとサイドの間に隙間が出来てしまうのでこうゆう事になってしまいました。

それでもいいという人は個別にbackground-color: #fff;で背景を設定してください。

サイド部分のスマホ表示↓

IMG_1655

ちなみにヘッダーはそのままです↓

IMG_1657

枠線を消去する

背景を追加することで枠線がいらないなと思い消去することにしました。

border: 1px solid #ddd;を消去すれば完了です。

 - Gushカスタマイズ , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  関連記事

44
ヘッダーの背景画像を消す方法と他色々

なんやかんやでGushからGush2にテーマを変更することにしました。 やるから …

メニューバー位置変更
メニューバーの位置を変更する方法

Gush2はメニューバーがタイトルの上に表示されているのでタイトルの下に移動させ …

追跡
サイドメニューに追尾型広告、Standard Widget Extensionsを設定する方法

追尾型広告の効果は絶大です。しかしどのプラグインがいいのかわからない人は管理人も …

wp ロゴ カスタマイズ
wordpress無料テーマ「Gush」のカスタマイズ【補足】

このブログはElloraさんの作った 無料テーマ「Gush」を使用しています。 …

wp ロゴ カスタマイズ
wordpressテーマ「Gush」をシンプルにカスタマイズする

そろそろ、ブログ(Gush)のカスタマイズが大体終わったので少しまとめたいと思い …

error
テーマのデザインをカスタマイズ中にエラーでログイン出来なくなった時の対処法方

私はWPテーマGushを使っています。 カスタマイズの際、phpをいじっていざ更 …

6
簡単にブログタイトルを画像に変更する方法

やはりブログタイトルは画像もしくはロゴに限りますね! 名前は一番最初に見られるで …

wp ロゴ カスタマイズ
メニューバーの位置を少しだけ移動させる

見ての通り、当ブログはメニューバーの位置を少しだけずらしています。 Gushのメ …