Simplicityのヘッダーに背景を設定する方法

1030_topこのカテゴリーでは、「Simplicity」を実際にカスタマイズする例をまとめて行きたいと思います。

カスタマイズは一つではないと思いますし、私の方法よりも優れた手順もあると思いますが、一応kyo_no_iro流という事で…。

スポンサーリンク

Simplicityの「ヘッダー」に背景を設定する。

Simplicityのヘッダーに画像背景を設定する簡単な方法は2通り

サイトタイトルの背景に画像を設定する方法は、主に2通りあります。

①カスタマイザーでヘッダーに画像を設定する。
②cssで設定を行う。(カスタマイザーの追加CSS及びskinフォルダーのstyle.cssに追記する)

私がカスタマイズしようと思うならば、②のcssで設定を行います。
(このサイトタイトルの背景画像設定時に。)

理由は後程説明します。それでは、私なりに解説してみたいと思います。

まずは、「カスタマイザー」と書いていますが、私が言うカスタマイザーとは、下の画像です。
今後の記事でも、カスタマイザーと呼ばせて頂きます。

1101_1

カスタマイザーでヘッダーに画像を設定する。

まずは、この下の画像をヘッダー背景に設定したいと思います。

header_1

カスタマイザーで設定する場合の手順。

メディア登録または、ヘッダーのカスタマイズ画面から、↑の画像を登録する。
手順が分からない場合は、このページ(パソコンからwebサイトへ画像を保存する)を参照下さい。

↓の現在のヘッダーの下部「新規画像を追加」で登録が可能です。

1101_2「現在のヘッダー」へ反映されると、↑の様になります。
サイトタイトルの端から入っていますね。これでも良いのですが、何となく、左端に寄せたいと思いませんか?

追加CSSまたはskinのstyle.cssで#headerに画像を変更する。

もう一つの方法が、cssでコードを入力して設定するという方法です。
カスタマイザーでは、#h-top というセレクタに背景画像を設定するようになっているようです。が、#h-topというセレクタに設定してもサイトのタイトルも同じように移動してしまいます。
でも、今回は少しずらしたデザインに仕上げたいので、#h-topに背景画像は貼らずに、#headerというセレクタに設定したいと思います。

#headerの中に#h-topという領域が入っていますので、背景をサイトタイトルとずらして配置したい場合は、#headerに背景設定をすると便利です。

修正した内容は、skinのフォルダ内のstyle.cssに書き足す事も出来ますし、簡単なのは追加cssに書き込む事です。
どちらでもお好きな方法でお試し下さい。cssを書き込むという事は、初心者には勇気がいる事かもしれませんが、一つの手順として、追加cssで思うようなデザインに仕上げた後に、そのコードで問題ないと検証してからskinのstyle.cssへ移動させる方法がおススメです。
理由としては、追加cssは書き込みやすいのですが、ついつい、余計なコードまでいじったりしてしまいます。
でも追加cssでは、バックアップを取っていないので、間違えて消してしまったり、書き換えてしまったりした場合、取り返しのつかない事になる可能性もあります。

もしも
「このコードで間違いない。」と思ったならば、折を見て、style.cssへの移し替え作業をされていくと良いと思います。

では、追加cssに#headerへのコードを書き込みます。

1101_3

↑画像が左に寄っているのが分かりますか?

#header{
background-image: url("header用背景画像");
background-repeat: no-repeat;
height: ***px;
top: ***px;
position: relative;
}

ここで、設定しているのは、画像のurlと、画像の高さ等です。

さらに、サイトタイトルが被って見難いところもありますので、次にサイトタイトルを移動させます。
1101_4

#site-title a{
top: ***px;
position: relative;
}
#site-description{
top: ***px;
position: relative;
}

変更後、「保存して公開」ボタンを押して、登録が完了。

これで、自分の思うように背景画像とサイトタイトルが配置出来ました。

***pxで配置位置を設定出来ますので、色々試してみると良いと思います。

それでは以上でheaderの背景設定方法を終わります。
お疲れ様でした。

励みになります
ランキングに参加しました。
「ダウンロードしたよ。」の
応援クリック頂けると嬉しいです(#^^#)
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村


スポンサーリンク

シェアする

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

フォローする