ヘッダーのロゴ
ヘッダーのロゴ
ヘッダーにはロゴがあります
ハフポスト
上にあるハフポストと書いたロゴをみてみましょう。
ウィキペディア
地球儀みたいなのがロゴです
こんなのを作ってみましょう。
ということでハフポストのロゴをダウンロードしてみるととても大きい。
普通のディスプレーに入りきらないくらいの幅があります。
これを小さくすることで、細かい部分が乱れないのでしょう。
少し大きめのロゴを作って、縮小して張るというのが良いでしょう。
ロゴを作る
ここでは、ウィンドウzに付属のペイントで作りました。
後でページに合うように作り替えれば良いと言うことで簡単に作成。
背景を透過とかできるはずです。
黄色い部分を透過にしたい、ということで、ペイント３Dを立ち上げます。
ペイントからペイント３Dが立ち上がります。
そこから、透過指定できるはずですが、う～～んうまく行かないので・・・
やってみてください。
[ペイント３D 透過]とすればできるでしょう。
これを、トップページ（index.htmlのあるフォルダと同じフォルダに保存します。
保存名は
rogo.jpg
rogo.png
rogo.gif
のどれでも良いですが・・・
今やってみると、「rogo」と名前をつけて保存すると png 形式で保存されます。
ヘッダーに画像を張るには
<img src="rogo.gif">とヘッダーの中に書けば良いのです。
<img src="rogo.gif" alt="ヘッダーロゴ">
とalt文を書くのが通常です。画像にこれを書いてあると、目の見えない人の閲覧に役立ちます。
さらに
<img src="rogo.gif" width="210" height="40" alt="ヘッダーロゴ">
と高さと幅の大きさを指定します。
高さまたは幅だけ指定すると、自動的にブラウザが高さと幅を計算して縮小してくれますし
適当にいれると
width="210" height="200"
それなりに・・・
などという画像があるとします。
<a href="a1.html"><img src="rogo.gif" width="222" height="42" alt="ロゴ"></a>
とするとリンクが張られます。
次へ進む