こんにちは。のっくんです。
今日の記事では自分の作ったウェブサイトにロゴ画像をレスポンシブに表示する方法をご紹介します。
[toc]やりたいこと
ロゴ画像があるとサイトの名称を覚えてもらいやすくなるので大事です。
レスポンシブって言うのは、画面の幅によってサイトの見た目や配置が変わること。
サイトがレスポンシブな作りになっていると、PCでもスマホでも見やすく表示されます。
・PCで見た時
・スマホで見た時
レスポンシブと言えばBootstrapを使うのが定石ですが、今回は画像の表示だけなのでスタイルシートを使って自分で調整する方法をご紹介します。
ロゴ画像の作成
まず、ロゴ画像を作りましょう。
PhotoScapeXを使って作るのがオススメです。
macだとApple Storeから無料でダウンロードできますよ。
色んなフォントを選べますのでお好きな物を選びましょう。私は「Hannotate TC」フォントを使っています。
PhotoScapeXだと、画像のサイズ変更や切り抜きも簡単に出来るので好きなサイズでロゴ画像が作れます。
私は、535 × 100 の以下のロゴ画像を作りました。
作成したロゴ
背景を透明にしたい方は以下のサイトなどを利用して下さい。
PhotoScapeXだと背景を透明にできません。
https://www.peko-step.com/tool/alphachannel.html
ロゴ画像の配置
header.html
<!-- ヘッダー -->
<header class="py-4">
<div class="container text-center">
<h1 class="header_new"><a href={% url 'top' %}><img src="{% static 'img/soccer_talk_trans.png' %}" alt="Soccer Talk" width="100%"></a></h1>
</div>
</header>
<!-- ヘッダー -->
こんな感じで、<h1> <a> <img> タグの順番で記載します。それぞれのタグの意味は以下の通り。
- <h1> 大見出しタグです。ページの文章の見出しを記載します。
- <a> リンク先を指定するタグです。
- <img> 画像を指定するタグです。
ロゴ画像をクリックしたときにサイトのトップページに行くように、aタグを使います。
私は、Djangoを使っているのでリンク先を{% url ~~%}で指定していますが、そうでない方は’path/top.html’のように記載します。
imgタグを使うときは、width=100%を指定することでロゴ画像全体が表示されるようになります。
ただし、これだけだとPCで見たときに必要以上にロゴ画像が拡大されて見辛くなってしまうのでスタイルシートを使って調整していきます。
スタイルシート
style.css
.header_new img {
max-width:535px; /* 画像の最大幅 */
margin: auto; /* 画像の左右の余白を同じ幅にする */
display: block; /* 画像の下の隙間をなくす */
}
max-widthでロゴ画像の最大幅を決めます。元画像のサイズと同じにするとちょうど良いです。
これでロゴ画像がレスポンシブに表示されるようになります。
以上です。
最後まで読んで頂きありがとうございました。
