※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

レスポンシブテンプレートでPCとスマホで別々のヘッダー画像を表示させるやり方

キャプチャ画像

SIRIUSのレスポンシブテンプレートの場合、PC用に設定したヘッダー画像は自動的にスマホサイズに縮小されて表示される仕様なので設定がラクっちゃあラクと言えます。

 

ところがヘッダー画像のデザインによってはPCでは問題なく”読めて・見えて”いたのがスマホで見たら全体的に縮小されたせいでどんな画像なのかがわかりにくいといったケースが生じることもあります。

 

ファーストビューでサイト訪問者の意識をぐっと惹きつけたいのなら、スマホユーザーが増えてきた昨今、この現象はとてももったいないですね。

 

もちろんPCでもスマホでもどちらでも視認性の言いヘッダー画像が作れるのなら何の問題もありません。

 

しかし現実にはなかなかそううまくはいかないものです。

 

こんな時に役立つのがPCとスマホで別々のヘッダー画像を振り分け表示させる機能です。

 

もっともSIRIUSの『iPhoneサイト同時生成』なら問題は即解決です。

振り分け機能がもともと備わってますから。

 

ところがレスポンシブテンプレートだとそうはいきません。

 

ですがご安心を。

レスポンシブテンプレートでもPCとスマホで別々のヘッダー画像を表示させるやり方があるんです。


PC用とスマホ用の2枚のヘッダー画像で振り分け表示するやり方

SIRIUSにはヘッダー画像を表示させるのに<% pageHeaderImage %><% pageHeaderImage2 %>といった独自タグが用意されてます。

 

この独自タグを使うことで”ヘッダー画像をどのページで表示させるか”などのヘッダー画像に関するオプション機能が有効になるんですね。

 

そのためこの独自タグはそのまま利用しつつPCとスマホで別々のヘッダー画像を表示させることにします。

 

区切り画像

 

まず通常のヘッダー画像用(PC用)に、テンプレートの横幅と同サイズか若干大き目のヘッダー画像を用意します。

 

画像ファイル名は通常通り「header.jpg」のままにします。

(というかこのファイル名以外ではヘッダー画像と認識してくれません)

 

今回、サンプル用としてコチラ↓の画像を使ってみます。

(実際のサイズは1160px×300px)

 

 

そしてスマホ用に横幅320px~500pxぐらいのヘッダー画像を別に用意します。

 

サンプル用に用意したのがこちらの画像。

(実際のサイズは500px×300px)

 

 

こちらの画像ファイル名は「header_sp.jpg」とでもしておきます。

画像ファイル名はheader_sp.jpg以外でも問題ありませんが、このあとご紹介する独自タグ内のファイル名も同じファイル名に書き換える必要があります。

スマホ用の画像サイズはあくまで目安です。

 

あまりに横幅が大きいと縮小された時にわかりにくくなるし、小さすぎると引き伸ばされてぼけてしまいます。

 

続いてヘッダー画像表示用の独自タグを書き換えます。

 

【テンプレート】→【HTMLテンプレート編集】→【トップページ】を開き、<% pageHeaderImage2 %>(または<% pageHeaderImage2 %>)という行を以下の(2行の)コードで置き換え(差し替え)ます。

 

コード画像

<% pageHeaderImage2 | tag_insert(div class="pc_contents") %>
<% pageHeaderImage2 | tag_insert(div class="sp_contents") | str_replace(header.jpg,header_sp.jpg)%>

今回は<% pageHeaderImage2 %>を例にご紹介してます。

 

<% %>までが1行になり、全部で2行になります。

 

意味合いとしては『(SIRIUSに標準で搭載されてる)PC&タブレットでのみ表示用クラス(pc_contents)内ではheader.jpgを表示し、スマホでのみ表示用クラス(sp_contents)内ではheader._sp.jpgを表示してね』というものです。

 

”pc_contents”と”sp_contents”がよくわからないという方はコチラ↓の記事をご覧下さい。

(当サイト内の記事です)

pc_contentsとsp_contentsのレスポンシブテンプレートでの使い方

SIRIUSレスポンシブデザインテンプレートで使える”PCとスマホで表示分け”可能なスタイルをご紹介します。

 

実際に表示させてみた

通常の<% pageHeaderImage2 %>のままで表示させたときの表示がコチラ↓。

 

スマホ表示ではヘッダー画像が小さくなったせいかひと目ではわかりにくい印象を受けますでしょ。

なにより目立たないですよね。

 

キャプチャ画像

 

一方<% pageHeaderImage2 %>を、先ほど書き換えた2行で置き換えて表示させた結果がコチラ↓。

 

スマホでは専用のヘッダー画像(header_sp.jpg)が代替表示されて、さっきと比べるとぐっとわかりやすくなりました。

(デザインの良し悪しは無視してください)

 

キャプチャ画像

 

ソースを見るとPC用とスマホ用にちゃんと分かれているのが確認できます。

 

キャプチャ画像

 

【サイトオプション】→【サイトデザイン】→【ヘッダーの表示設定】トップページ以外でもヘッダー画像を表示させる設定にしてあるのであれば該当するテンプレートも同様に置き換え作業が必要です。

1枚のヘッダー画像の表示領域を変更するやり方

ここまでは2枚のエッダー画像を振り分け表示するやり方でしたが、ここからは1枚のヘッダー画像を疑似的に別々の画像のように見せかけ表示するやり方をご紹介します。

 

ちょっと特殊なやり方なので使えるデザインは限定的なものになります。

 

画像サイズ(縦・横)によっては見せたい領域が思った通りにいかない場合もあるので若干高度な設定方法になります。

 

たとえばこちらのヘッダー画像、わざと左右に余白を多めにとって中央部分にデザインを集中させた画像になってます。
(実際のサイズは1160px×350px)

 

キャプチャ画像

 

これをPCではそのまま表示させ、スマホ&タブレットでは中央部分だけを表示させることで疑似的な振り分け表示が可能になります。

 

イメージはこんな感じですね。

 

キャプチャ画像

 

やり方はこちら↓。

 

【テンプレート】→【スタイルシート編集】→【ユーザー指定スタイル】を開き、以下を加筆します。

 

コード画像

@media screen and (max-width: 999px) {
#header img {
width:100%;
height:350px;
object-fit: cover!important;
object-position: center center!important;
}
}
@media screen and (max-width: 640px) {
#header img {
width:100%;
height:200px;
object-fit: cover!important;
object-position: center center!important;
}
}

 

赤文字がタブレット用の設定青文字がスマホ用設定です。

 

いずれも太字になってる数値を上下させることで表示領域が広がったり狭まったりします。

(height:350px;とかheight:200px;の部分)

 

注意点としては元の画像の高さを超えた数値を指定してしまうと画像が拡大されてぼやけてしまうので、指定可能な数値は実際の高さまでと覚えてください。

 

そして上記の設定で実際に表示されたのをキャプチャした画像がこちら↓です。

 

キャプチャ画像

 

以上です。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

詳細および入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像