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

テンプレートパーティー

当サイトトップのお知らせ欄のように、カテゴリ別アイコンを表示させる方法


当サイトで配布しているホームページテンプレートのほぼ全てに、上記のようなお知らせ欄があります。日付と説明文とで構成されていますが、日付の右側にカテゴリーを示すアイコンを表示できるようにカスタマイズしてみる事にしてみましょう。

使用テンプレートは…

tp_biz20_blueを使いますが、日付が左側情報が右側になっているタイプであればどのテンプレートにも使えます。

まず、使いたいアイコンを準備します

 
今回は、「重要」と「製品情報」の2つを準備しました。
一般のお知らせの場合には特にアイコンを表示させない事にしますが、表示させたい場合は「お知らせ」アイコンも準備して下さい。アイコンはご利用のテンプレート内にあるimagesフォルダに入れておいて下さい。

ご利用中のテンプレートのstyle.cssファイルを開きます

cssフォルダに入っているstyle.cssファイルをメモ帳など編集できるエディタで開いて下さい。
#main .new dt」という設定箇所がありますのでそれを探します。

このブロックは日付部分のスタイルです。テンプレートによって、上記の記載内容が違う場合もありますが、「#main .new dt」であれば問題ありません。
この日付の右側に、今回作ったアイコンを表示できるようにします。

アイコンを表示させるスペースを追加します

上記のwidthの値を見ると、100pxである事がわかります。(※テンプレートにより数字は異なる)
これにアイコンを並べた場合を想定してサイズを設定しなおします。今回こちらで準備したアイコンは幅が50pxなので、単純に50追加します。すると、「width: 150px;」になりますね。

次に、日付の右側の情報を記載するブロック幅も調整します。日付のすぐ下あたりに入っている場合が多いかと思いますが、「#main .new dd」という設定箇所を見つけて下さい。日付の時と同様にwidthの値を見つけ、今度はこの数字から50pxマイナスします。日付に50px追加したので、右側の内容からその分を差し引くという事です。今回のテンプレートの場合、「width: 520px;」だったので50引いて「width: 470px;」にします。

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

ブラウザで実際に見てみましょう。
以下のように日付の右側に余白が追加されているようであればOKです。

では、アイコンをスタイルシート(style.css)に追加設定します

style.cssの編集に戻ります。
今回は、「重要」と「製品情報」のアイコン2つを準備したので、それぞれを表示できるように追加設定していきます。こちらで準備した「重要」アイコンのファイル名は「icon_note.gif」で、「製品情報」のアイコンのファイル名は「icon_info.gif」でしたので追加するスタイル名にも同じファイル名を使う事にします。日付であるdtタグへ追加するスタイルなので、すぐ下に以下を追加してみます。

手打ちに自信がない方は以下をコピペして下さい。noteやinfo部分はあなたの環境に合わせて変更します。

no-repeat」というのは文字通りリピートしない意味です。「right top」というのは、右上に表示させるという意味です。合わせると、日付のブロックの右上にリピートなしでアイコンを表示させる、という意味になります。

次に、html側に今追加したスタイルを設定しましょう

上で追加したスタイルの「dt.note」というのは、dt class="note"の事です。
dt.info」は「dt class="info"」の事です。
これを理解した上でhtmlにスタイルを追加してみましょう。

id(#)とclass(.)について
htmlファイルを見ていると、<~~ id="●●">や<~~class="●●">をよく見かけます。cssファイルもよく「.●●」や「#●●」といったものを見ます。html内の「id」とcss内の「#」は同じものをさし、同じくhtml内の「class」とcss内の「.」も同じものをさします。

プレビューで見てみます

アイコンが表示されていれば成功です。
ただ、今回の場合、アイコンの場所がちょっと微妙なので調整していきます。

改めてstyle.cssを見てみます。

2つのアイコンを追加設定したスタイル部分を見なおしてみます。
今まで「right top」と「右上」に設定した為、日付のブロックの右上にアイコンが表示された事になります。
微調整するため、今度は数値で設定してみましょう。

rightを90px(日付ブロックの左を基準にした位置)に、topを5px(日付ブロックの上を基準にした位置)にしてみました。 別の方法としては、アイコン自体に余白を作って、崩れて見えないように調整してみてもいいでしょう。
補足ですが、近頃のブラウザは全体を拡大縮小してくれるのであまり気にしなくてもいいのですが、文字サイズだけを変更した場合に崩れて見える(日付とアイコンが重なったりする)場合があるので、em(文字基準のサイズ)単位にしてもいいかと思います。

改めてプレビューで確認します。

いい感じになりました。完成です。

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

↑ PAGE TOP