サイト名をテキストで表示するのがお手軽簡単です。が、漫画描きならこだわりたいですよね。
プロ漫画みたいに、かっこいいロゴとか作って飾りたいですよね。
もちろん可能です。作っていきましょ～
ロゴの準備
めっちゃセンスないロゴを作ってみました。
横500px、縦100pxの、透過ｐｎｇ、名前は「logo.png」です。
サイズやファイル形式は、漫画描きさんのセンスで好きに決めてください。表示の大きさは、htmlやcssで調整できますので安心してください。
ついでに、原稿とペンのアイコンは、フリーアイコンを配布してくださっているサイトさんから拝借しています。興味のある方は、利用規約をよく読んだ上で活用してみてください。
ロゴを表示させる
まず、作ったロゴを「ホームページ作り」フォルダの中の「image」フォルダに保存してください。
次に、index.htmlをサクラエディタで開いてください。
赤枠の部分を、書き換えます。
<img src="image/logo.png" alt="漫画サイトつくるぞ！">
ブラウザで確認してみると……
ロゴが表示されました。……がっ！トップ画像が横にずれてしまいました。ロゴの位置も、下すぎる……。
これは、リンクが横並びになっていたのと同じ現象ですね。同じ種類を続けて配置すると、仲良く隣に行きたくなるみたいです。（例外もあります。ｐとかは隣に行かない。）
では、キミとボクとは住む世界が違うんだよ。という呪文をかけましょう。
<h1><img src="image/logo.png" alt="漫画サイトつくるぞ！"></h1>
先ほどのロゴを、＜ｈ１＞～＜/ｈ１＞で囲います。
はい、ロゴの完成です！
ロゴを意味のあるタグにする
ロゴを、「このサイトの名前だよ」という意味のあるものにします。
実はコレ、もう先ほど終えています。
＜ｈ１＞～＜/ｈ１＞、表示崩れを直すために入れた、このタグ。これがサイトロゴの画像を「サイトの名前」にしてくれるタグです。
ｈタグは、「見出し」という意味を持っています。ｈ１、ｈ２…と存在し、数字が若いほど重要な見出しと位置付けられます。
なので、ｈ１は一番重要な見出し＝サイト名。という解釈です。
画像だけではなく、テキストを囲うことも可能です。むしろテキストを囲う事の方が多いです。
ロゴの表示サイズを調整する
ロゴが大きすぎて主張が激しいので、少し大人しめにしましょう。
index.htmlの、ロゴ部分にwidth＝”400”と書き加えます。
<h1><img src="image/logo.png" alt="漫画サイトつくるぞ！" width="400"></h1>
ブラウザで確認してください。
サイズが小さくなり、いい感じにまとまりました。
書き足した「width」は、横幅という意味で、「400」は400pxという意味です。分かりやすく「400px」と記述しても問題ありません。
今回はhtmlで指定しましたが、cssでも指定可能です。というか本来はcssのお仕事です。では、なぜhtmlで指定したか。……手軽だからです。
楽できるところは、楽しながら作っていきましょー。
おまけ
コード…いるかな？重複してるけど、一応置いておきます。
<h1><img src="image/logo.png" alt="漫画サイトつくるぞ！" width="400"></h1>
サイト名がロゴ化できました。お疲れさまでした。
コメント