ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

ホームページテンプレートのカスタマイズ方法のご紹介

カスタマイズの続きをもう少し続けます。

カスタマイズメニュー

メニューの上下の余白をもう少しあけたい(orもう少しせまくしたい)。

テキストタイプのメニューの場合、簡単に上下の余白調整が可能です。

cssフォルダ内にあるstyle.cssを開きます。
以下のようにpadding(余白)の調整箇所がありますので探してみて、希望に合わせて増やすor減らしてプレビューで見てみましょう。

以上です。簡単でしたね。

ページの上部へ

ヘッダー背景画像を1種類から2種類にする。

goods2タイプのテンプレートの上部背景イメージは、1種類のものを「トップ」「トップ以外」で見える範囲を調整しています。



上記のようにstyle.cssでbackgroundの見える範囲の調整を行っている為ですが、今回は別々の画像を使いたい場合の説明をします。

まず、トップ画像はこのまま使うものとし、その他ページ用の画像を1枚準備します。サイズは現状で使っている見た目と大差ないよう幅940px、高さ220px。ファイル名はcontainer_bg2.jpgで準備します。

style.cssの変更を行います。
今までは1枚の画像の「見える場所」を調整していましたが、今回は画像ファイル名が変わって全部見えてよい事になりましたので以下となります。当初とどこが変わったかよく比較してみてください。

完成です。

ページの上部へ

左コンテンツの新商品の写真を外してよりビジネスっぽくする。

ビジネスイメージにしたので、商品のサムネイル画像を外して日付と情報のみにしてみようと思います。

html側を開いてみて下さい。
以下の赤枠内の画像を読み込んでいるタグを削除するだけでOKです。

ページの上部へ

ページの上部へボタンを入れてみる。

色んなサイトで見かけるページ下部にある「ページの上部へ」ボタンを設置してみましょう。これをクリックする事で見ているページの最上段に戻る事ができます。

画像でなくてテキストでもいいのですが、今回は見た目を合わせて画像にしてみました。
以下が同じものなので、コピーしてご利用頂いても構いません。コピー後はimagesフォルダに入れておきます。
ページの上部へ

では、配置する側のhtmlを開きます。mainとsubのブロックの後ろ、footerの上に入れたいので、以下の場所にタグを追加します。

では、プレビューで見てみましょう。
どうですか…?思った場所に配置されていないのではないでしょうか…?

これはmainとsubの双方のブロックを右と左に寄せるfloat処理を行っている為のものです。floatを解除してあげないと、後に続くものもfloatされたまま(subブロックに続いて左に回り込みになる)となってしまう為、css側で解除してあげる必要があります。ちなみに、今まではfooterブロックでこのfloatを解除していましたので、これを今追加したボタンタグに設定を移してあげればいいという事になります。

先程のタグのままだと単に「段落タグに入っている画像」でしたので、スタイルを追加する為に名前を付けてあげます。

pagetopでなくてもいいのですが、当サイトではよくこのスタイル名を使っているので今回もpagetopにします。

id(#)とclass(.)について
htmlファイルを見ていると、<~~ id="●●">や<~~class="●●">をよく見かけます。cssファイルもよく「.●●」や「#●●」といったものを見ます。html内の「id」とcss内の「#」は同じものをさし、同じくhtml内の「class」とcss内の「.」も同じものをさします。
具体的に書くと、htmlの<div id="container">と、cssの「#container」が同じもの。htmlの<p class="clear">とcssの「.clear」が同じもの、といった感じ。idは1枚のhtml内に1度しか使えませんがclassはいくつでも使えます。

さて、これだけではまだ何のスタイルも実際には設定していないので、これからstyle.cssにfloatをクリアする設定を記載していきます。とはいっても、今までfooterに入っていたタグを移動してくるだけでいいので簡単なのですが。

clearとwidthの設定について。
clearはfloatを解除する指定です。bothを使う事でmain(右)とsub(左)の両方を解除できます。もし左だけ解除するならclear: left;でOK。テンプレートの横並びメニューをclearする際にclear:leftはよく使います。
また、clearとセットでくっついてるwidthについてはIEで微妙な空白が出現してしまうのを防ぐ対処方法です。100%にすると外側のブロックに飛び出てしまう場合はpxなど直接的な数値を指定して下さい。

では、プレビューで改めて見てみましょう。
今度はちゃんとfloatがクリアされました。が、ホームページの左端に入ってしまっています。

右端に置いておきたいので、今追加したpagetopのスタイルに右寄せ(text-align:right;)を追加しましょう。

追加したら再度プレビューで見てみます。今度はちゃんと右によりましたよね?

最後にクリックしてページの上部に移動するように、リンク設定を行っておきます。
ホームページの一番外側(container)の所に戻る形にしたいので、以下のようなリンクを設定すればOKです。

↓以下が実際のタグになります。

今回は同一ページ内のホームページの一番外側ブロックのcontainerへリンク設定をしましたが、任意のid値の場所でしたらどこへでもジャンプさせる事ができます。例えばpage1.htmlというページの#sampleというidを付けたブロックにジャンプさせたいなら、<a href="page1.html#sample">ジャンプ</a>のように、通常のリンクの後ろにid名を追加するだけでOKです。

ページの上部へ

左右のブロックを入れ替えたい。(別テンプレでも可能)

goods2テンプレートの場合、subブロックにロゴも入っている為、左右ブロックの入れ替えには不向きですが、テンプレートによっては入れ替えたい人もいるでしょう。そこでここでは左右ブロックの入れ替えを説明していきます。

以下が完成です。
他のテンプレートは見た目上に無理なく入れ替えられるものも多いのでチャレンジしてみましょう。

テンプレートによっては、mainやsubのスタイル設定内に、margin(leftかright)やpadding(leftかright)がある場合がありますが、そういった場合はそのrightやleftも入れ替えておきましょう。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP