pc_contentsとsp_contents

キャプチャ画像

iPhoneサイト同時生成機能の独自タグを使えば、
PCとスマホで表示内容を簡単に分けることができます。

 

しかしレスポンシブデザインテンプレートではその独自タグが使えません。

 

その代わりというわけでもないでしょうが、
独自タグと同等の機能を持つ専用のクラス(class)が用意されています。


PCとスマホで表示内容を変えたい時に重宝

iPhoneサイト同時生成機能をONにした場合、PCブラウザでのみ表示可能なコンテンツには<pcc>~</pcc>スマホ表示用には<ipc>~</ipc>というSIRIUSの独自タグでくくってあげるだけで表示分けが可能になります。

 

しかしながらレスポンシブデザインテンプレートではその独自タグが使えません。

 

じゃあ表示分けはできないの?というところですが、その辺はSIRIUS側もちゃんと考えていてくれて、PC表示用のクラス(pc_contents)スマホ用のクラス(sp_contents)をスタイルシートに最初から盛り込んでおくことで対応してくれてます。

 

具体的にどうやって使うのか

たとえば「PCとタブレットでのみこのテキストが表示されます。」というテキストを
PCブラウザでのみ表示させたい時は、

 

コード

<div class="pc_contents">
①PCとタブレットでのみこのテキストが表示されます。
</div>

というふうにpc_contentsというクラス名を付けたdivブロックで囲ってやります。

 

”<div>と<span>”

<div>というタグはブロック単位で、つまり矩形単位でくくるときに使います。

 

これに対して<span>というタグは、一つの文(章)の中の一部分という単位でくくる時に使います。

 

といってもイマイチわからんという方も多いことでしょう。

図で表すとこんな↓感じです。

 

キャプチャ画像

 

一方、「スマホのみこのテキストが表示されます。」というテキストを
スマホでのみ表示させたい時は

 

コード

<div class="sp_contents">
②スマホのみこのテキストが表示されます。
</div>

というふうにsp_contentsというクラス名を付けたdivブロックで囲ってやります。

 

ところでiPad(タブレット)はどっちに入るのでしょう?

 

正解はPC表示用のクラス(pc_contents)に含まれます。

 

つまりpc_contentsというクラス(class)を指定した場合は、正確にはPCブラウザとiPad(タブレット)でのみ表示されるというものです。

 

ちなみに先ほどの表示分けした2つのコードをそのままコチラ↓に書いてみました。

 

PCブラウザとiPad(タブレット)では①の文章だけが、
iPhone(スマホ)では②の文章だけが見えてるはずです。

(※PCブラウザで見ている方はブラウザ幅を狭めていくと途中からテキスト内容が変わるハズです)

 

①PCとタブレットでのみこのテキストが表示されます。

②スマホのみこのテキストが表示されます。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

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

入手方法についてはコチラ↓をご覧ください

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

PC版レイアウトに切替

スマホ版レイアウトに切替