【いざ!ホームページ制作】ルクセリタスをカスタマイズ◆メイン画像とその上のボタンたち◆

ホームページを作ってみよう, ルクセリタスをカスタマイズ, ルクセリタス, 画像の上に画像

今回は私のホームページのメイン画像の部分。

これ。

私の仕様は?というと…

バックグラウンド(background)として

を設定し、その上に

メニューボタンとなる部分をそれぞれ被せて置いていきました。

今から、ちょっとややこしいですが、phpとCSSを行ったり来たりします。

なぜなら私が順序立ててやっていかないと訳が分からなくなるからw

確実に、作業をしていくためですw

1・バックグラウンド(background)の設定。

私の場合、CSSでの設定なんですが、画像の上に画像を乗せるということをやってますので、まずはphpにトップイメージのdivを作ります。

入り口はコチラ

テーマヘッダーの中をだだーっと下って…<header></header>のすぐ後ろから書いていきます。

まずは<div class=”topimg”></div>で一番大きい箱を作っておきます。

その中に各ボタンURLとサイズ指定をしてあげるんだけれども、まずはここまでしておきます。

次に【いざ!ホームページ制作】ルクセリタスをカスタマイズ◆其の壱◆と同様の外観からのカスタマイズメニューに入ります。

そこから、追加CSSに入っていきます。

カスタマイズメニューの一番下。

ここにCSSを描いていきます。

.topimg{position:relative;
background:url(‘http://イメージULR’) no-repeat !important;
margin-top: 40px !important;
margin :0 auto;
width:953px;
height:534px;}

こうですね。

position:relative;を入れておくことによって、「あんたの上に他の画像が乗っかるよー」って教えてあげます。

これやんないと、上に乗せたいボタンたちがうまく乗ってくれませんw

2・バックグラウンド上のボタン画像の設置・サイズ調整・リンク先の設定

phpに戻ります。

先ほど作った<div class=”topimg”></div>の中に、各ボタンの<div class=”各ボタン名”></div>を順に入れていきます。

<div class=”ボタン名”><a href=”http://リンク先のURL”><img class=”alignnone size-full wp-image-890″ src=”http://各ボタン画像URL” alt=”” width=”横幅” height=”縦幅” /></a>
</div>

こうです。

ここで各ボタンのリンク先・画像URLを指定・サイズも設定しておきます。

更にまたCSSに戻ります

微妙な位置調整をしていきます。

先ほど作ったバックグラウンドの次に書いていきます。

.ボタン名 {z-index:100;
position:absolute;
top:18%;
right:28%;}

ここではposition:absolute;を入れてあげ、「あんたはtopimgの上に乗っかってー」と教えてあげます。

position:relative;……上に乗られる画像

position:absolute;……上に乗る画像

これでワンセットですね。

あとはtopやrightで置き場所の指定をしてあげていきます。

この手順で各ボタンを設定してあげれば……

はい、出来上がりました👏

 

こうして書くのは簡単なんだけどなあ…初心者には難しいことだらけです( ;∀;)

よし!覚えているうちに、次だ!!w