【ロゴ】 タイトル部分のレスポンシブ化 【ヘッダー】

タイトル部分は、サイトやブログの窓になる重要な部分です。

ですので、できればカッコ良いものを、いや、かっこ良くはなくても、お客さんから覚えてもらいやすいものをと言うのが人情だったります。

PC専用サイトやブログの場合は、ヘッダーの部分ロゴとヘッダー用の画像を入れればOKだったんですが、レスポンシブではそう簡単には行きません。

このように、スマホではタイトル画像が横にはみ出してしまいます。
ですので、タイトル画像を横にピッタリフィットさせてあげる必要があります。

<!-- タイトルロゴ用のHTMLタグ -->

<div class="title">

<a href="http://***.***">
<img src="http://***.***.***.png" width="●●●" height="●●●">
</a>

</div>

# CSSファイルに記入

@media screen and (min-width:●●px) and (max-width:▼▼px){

.titile img{
    width:100%;
    height:auto;
    padding:0;
    margin:0;
}

}

こうすることで、横幅は一応ぴったりに治まったのですが、これだとタイトルが横長すぎてスマホではきびしいです。

ですので、そもそものタイトル画像自体をスマホとPCで共用化できるよう、考えてあげる必要があります。

うちの場合、スマホのタイトルはロゴ部分のみタブレットのタイトル画像とPCのタイトル画像はヘッダー画像付きのロゴと言う具合に分けています。

スポンサーリンク

【スマホ用のロゴ】
ロゴのみ


【タブレット用のロゴ】
ヘッダー画像+ロゴ
(ヘッダー画像は途中で切れてもいいように作った)


【PC用のロゴ】
ヘッダー画像+ロゴ


ロゴリンク付きの画像ファイル
タイトル画像CSSを使った背景画像で行います。

こうすることで、ロゴタップしたりクリックしたらホームページへジャンプさせることができます。
(背景画像をタップしたりクリックしてもホームページにジャンプしない)

HTMLタグのようになっています。
DIVタグのクラス名を入れ(ここでは仮にtitleにしてある)、その中にリンク付きの画像用のHTMLタグを入れます。
(HTMLタグの構造自体はすごくシンプルです)

<!-- タイトルとロゴ用のHTMLタグ -->
<div class="title">
<a href="http://***.***">
<img src="http://***.***.***.png" width="●●●" height="●●●">
</a>
</div>

HTMLタグの方はかなりシンプルですが、CSSの方は端末によって3つの表示方法を指定します。
(スマホ・タブレット・PC端末用)


スマホの場合

/* スマホ用CSS */
@media screen and (min-width:0px) and (max-width:459px){

.title{}/* 空欄 */

.title img{
    width:100%;
    height:auto;
    padding:0;
    margin:0;
}

}

スマホ用のCSSでは、タイトルの背景画像は空欄にします。
空欄になると、タイトル部分の背景画像は何も表示されなくなります。

ロゴのサイズは width:100%; にします。
こうすることで、ロゴが画面一杯に広がり、左右に空白ができるのを防止できます。

heightauto になっているのは、横幅に合わせて縦幅を調節しないといけないからです。

もし、これが固定の px で指定されていると、横幅が広がるにつれて横長に間延びしたロゴになってしまいます。

こちらのケースの場合、ロゴは460pxの設定にしてありますので、@media screen and (max-width:459px) にします。

今回は、横に空白を作らないで表示するように作ったロゴと言う設定ですので、paddingとmargin0 にしてあります。

左右・上下に空白があった方が良くなる場合は、padding と margin で左右・上下の空白を作ってあげて下さい。


タブレットの場合

/* タブレット用CSS */
@media screen and (min-width:460px) and (max-width:899px){

.title{
    width:100%;
    height:●●●px;
    padding:0;
    margin:0;
    background:url(ヘッダー画像のファイル名) no-repeat;
}

.title img{
    margin:0;
}

}

タブレット端末の場合は、ロゴ+ヘッダーの背景画像で組み合わせます。
(ロゴのみでもOKな場合は、背景画像のCSSは不要です)

このケースの場合、ロゴは460pxの設定にしてありますので、@media screen and (min-width:460px) にします。

画面サイズが 900px 以上になると、PC用のCSSを適用させたいので、max-width は、899px にしました。
(これは、実際にうちで使っている数字です。(´∀` ))

タイトルの背景画像用のCSSの width は 100% にします。
こうすることで、タイトルの背景画像画面サイズに応じて広がります。

height固定値 ( px ) 指定します。
こうすることで横幅だけが広がり高さが固定されます。

タイトル背景用の画像は、途中で切れてもそれほど問題がないデザインにします。
途中で切れたら尻切れトンボに見えるデザインだと、このやり方はできません。

ロゴは左右の隙間なしに配置したいので、margin:0; とします。
隙間があった方が良い場合には、margin か padding上下・左右に隙間を入れます。

スマホ用のCSSであった .title img { width:100%; } を入れてしまうと、タブレットの横幅一杯にロゴが広がってしまうので、タブレット端末・PC端末用のロゴのCSSには、width:100%; は書かないようにします。


PCの場合

/* PC用CSS */
@media screen and (min-width:899px) {

.title{
    max-width:●●●px;
    height:●●●px;
    width:100%;
    padding:0px;
    margin:0px;
    background:url(ヘッダー画像のファイル名) no-repeat;
}

.title img{
    margin:0;
}

}

画面サイズの指定 ( media screen ) は、最小値だけ書きます。
@media screen and (min-width:899px)

こうすることで、これ以上の画面サイズ全部このスタイルを適用することができます。

タイトルの背景画像のCSSは、width:100%; の他に、最大値 ( max-width ) を入れます。
これがないと、最大値を超えて表示されてしまいます。
(1200px を最大と思って作成したのに、1600px とか 1800px で表示されてしまい、デザインが崩れてしまう)

ロゴは左右の隙間なしに配置したいので、margin:0; とします。
隙間があった方が良い場合には、margin か padding上下・左右に隙間を入れます。


次ページ

【横幅を合わせて表示する】 画像をレスポンシブ化する方法

前ページ

【リダイレクト】スマートフォンとタブレットとPCで表示する方法


スポンサーリンク