スマホ用テンプレート(2)ヘッダー画像を表示する

Jimdoのスマホ・テンプレートの「head部分」には、既にビューポートが記述されています。

なので、メディアクエリCSS3を使用してプチ・レスポンシブデザインにすることが可能になります。そこで、せっかくなのでメディアクエリを積極的に利用してみましょう。

ここではスマホ用テンプレートにヘッダー画像を付けた表示にしたいと思います。

 

★前回(1)までのデザイン
★前回(1)までのデザイン
★viewport
★viewport

なお、こちらのカスタマイズ方法は独自レイアウトを選んでいる方が主な対象になります。

旧レイアウトをご利用中の方は、スマホ画面にもPC版ヘッダー画像が自動的に表示されます。しかしながら、ヘッダーの見出しを消す方法は結構役立つかと思います。

 


※このページから閲覧を開始された方は、スマートフォン表示用のテンプレートからお読み頂けると幸いです。

1. ヘッダー画像をアップロードする

今回はこの画像をアップロードし、ヘッダーに付けてみます。

テスト用サンプル画像

【画像名(1例) ud-test.jpg】

 

【横幅 430px・縦幅 185px】

 



 独自レイアウトを使用中の状態で、「デザイン」>「独自レイアウト」にてファイルをクリックして任意の画像をアップロードすます。

次にHTMLタブをクリック後、左下の「保存」を押せば完了です。

【ご注意】

画像のアップロード時に、画像名に「アンダーバー(_)」が入っていないかご確認を。独自レイアウトではアップ画像名にアンダーバーがあるとハイフンに強制変更され、画像表示ができなくなります。ですので、使用するなら最初から「ハイフン(-)」にしましょう。

2. 実際にヘッダー画像を表示してみる

最近は、モバイル端末からのサイト訪問者のほとんどが、Apple iPhoneなどのスマホ経由である場合が多いと思います。

「iPhone6 Plus」でもブラウザの解像度が「横幅414px・縦幅736px」なので、ここでのブレイクポイントは少し余裕をもって430pxにしておきましょう。

つまり、横幅430px以下のスマホ画面からアクセスがあった場合は、ヘッダー画像も表示するということになります。

ヘッダーエリアの高さは、スマホから見ても大きすぎない110pxに設定します。

 

早速、「デザイン」>「独自レイアウト(CSS)」へ下記のスタイルを記述(コピペ)後、保存ボタンを押しましょう。

このとき、「アップロードした画像名」の部分を半角英数字の画像名に入力し直しておくことをお忘れなく。


@media screen and (max-width: 430px) {

 

header {

height: 110px;

background: url('アップロードした画像名') no-repeat;

background-size: 100%;

}

}

 

※ヘッダー画像を表示できないテンプレートもあります。

 


正しく記述されていればこんな感じになります。

ヘッダー画像の実装に成功!

お好みにもよりますが、このままですとヘッダーの見出しH1で画像の上側が隠れてしまいます。

そこで、ヘッダータイトルが不要な方は、思い切って非表示にしてしまいましょう!

 

header h1 { display: none !important; }

 

※これはメディアクエリ外の空行に記述してもよいでしょう。

 

ヘッダーの大見出しを非表示にした

だんだんと、いい感じのレイアウトになってきました。

3. その他、ヘッダー・エリアの調整

念のため、ヘッダー周りのシャドウ(影)も消したいという方は下記のスタイルをどうぞ。

 

header { box-shadow: none !important; }


また、横幅が431px以上・768px以下のモバイル端末でもヘッダー画像を見せたい場合は、別サイズの画像を用意し、例えば下記のようなメディアクエリを別行に追加します。

 

@media only screen and (min-width: 431px)

and (max-width: 768px) {

 

/* この上か下の行にheaderのCSSを記述。高さは160px位がいいのかな? */

 

}


このようなメディアクエリをいくつも設定することで、モバイル端末の画面サイズに合わせたヘッダー画像を色々と表示することが出来るので面白いですよね。

 


さあ、ここまでの見栄えを一度確認してみましょう。

PC画面でご自身のサイトのスマホ&タブレット表示を見たい場合は、

サイトURLの末尾に /?mobile=1 を付ければOKです。

そこでブラウザーの横幅を縮めたり拡げたりしたデザインをぜひ、確認してみて下さい!

 

次ページでは、見出し大・中・小を装飾していきます。