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

テンプレートパーティー

h2タグ(見出し)に画像を使いたい場合

当サイトのホームページテンプレートは編集しやすいようにほとんどが見出しタグは「テキスト」で構成されています。
ですが、より印象をよくする為に「画像」を使いたい場合もありますね。今回はその方法を説明します。

解説テンプレート

今回はtp_biz12_skyblueテンプレートをサンプルに使っていきます。

画像で配置する為、テンプレートのh2の幅を調べましょう

cssフォルダ内のstyle.cssに記載されている#mainの幅を見てみます。ほとんどのテンプレートはh2の幅とこの#main幅は同じですが、幅が合わなかった場合は実際にプレビューで見てから画像をコピペし、画像ソフトなどでh2見出しの寸法を測ってみるといいでしょう。

■プレビュー画面をコピーする方法について…ご利用のパソコンにもよると思いますが、だいたいはキーボードの右上に「Prt Sc」というキーがあるのでそれを押すと一時的にパソコンにコピーできます。もしキーに色がついている場合、左下に同じ色のキーがあるのでそれを押しながら「Prt Sc」を押すといいかと思います。後は、お手持ちの画像ソフトを開いて、貼り付け作業をすればOK。

画像として配置するh2の幅はわかりましたね

今回使ったテンプレは#main幅と同じ650pxが幅でした。では、幅650pxのh2画像を自分で作ってみて下さい。
以下が実際にテスト用で作ってみたh2画像です。勉強だけする人はこれをお手元のimagesフォルダに入れて使ってみて下さい。

テンプレートのh2タグ部分に画像を配置します

配置したらブラウザのプレビューで確認します。

■編集ソフトの編集画面でのレイアウトは参考にしないで下さい。スタイルシートのサポート具合によって正常に見えない場合があるので。必ず、ブラウザ(Internet ExplolerやFirefoxなど)で確認しましょう。

以下が実際にプレビューで見たh2タグのコピーです。上の作った画像とだいぶ違いますね。
これは一般のh2タグ用に準備していたcssのスタイルが残っている為です。
ちゃんと見えるように調整していきます。

調整方法は2つありますが今回は簡単な方でいきます

テキストのh2にスタイルを追加するか、画像のh2にスタイルを追加するかのどちらかになりますが、前者の方が簡単なので前者の説明をします。

h2タグをテキストとして使う場合のスタイル名を変更します

変更方法は簡単で、既存のh2のスタイルにclass指定を加えるだけです。
今回はh2タグにclass="text"とした場合に、今までのスタイルが反映されるようにしますが、"text"の部分は変更してもらって構いません。但し、同じclass指定がcssファイル内に存在しないように注意して下さい。

一旦さっきのプレビューを見直してみましょう


上で設定しなおしたスタイルは、#main h2.textという指定でした。これは、#mainブロック内にあるh2タグにclass=textという指定が入ったものに対してのスタイルという意味なので、それ以外のスタイルは解除されていまいます。

■画像にはalt指定もしましょう。意味のない画像の場合(飾り線など)は、alt=""としておきます。当サイトで配布中のテンプレートは、alt=""の状態にしてあるものが多い(ロゴなど)ので、ちゃんとサイト名を入れるなど、意味のある説明を指定しておきます。これはSEO対策の基本なので覚えておきましょう。

今までのh2のスタイルはどうなったかというと

この「更新情報・お知らせ」等にも.textがついてないのでスタイルは解除されていまいます。

すべて画像に置き換えてしまうなら、上のステップのように単に画像と置き換えるだけでOKですが、テキストでも使いたいなら上で設定しなおした.textという指定を加えてあげます(↓)

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はいくつでも使えます。

再びプレビューで見てみましょう


後は、画像で使いたいものは上のステップのように単にh2タグで挟む、テキストで使いたいものは.textを追加する事で完成です。

余談ですが、逆の設定をしたい(画像のh2にスタイルを追加する)場合

既存の「#main h2」はテキスト向けにそのまま残し、新しく画像で使うh2の方にスタイルを追加したい場合、backgroundやpaddingなど設定してある様々なスタイルをリセットする必要があります。

もう1つ余談ですが

shop1シリーズfudosan3シリーズは今回説明したような画像でのh2とテキストでのh2と両方使えるような作りになっています。同じスタイルで作ってますので参考にしてみて下さい。

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

↑ PAGE TOP