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

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

PC専用クラス・スマホ専用クラス&タブレット専用クラス

キャプチャ画像

SIRIUSのレスポンシブテンプレートにはPC&タブレットでのみ閲覧可能なクラス(pc_contents)と、スマホでのみ閲覧可能なクラス(sp_contents)がそれぞれ最初から用意されてます。

 

しかしながらSIRIUSテンプレート【Volar】では、タブレットでのみ閲覧可能なクラス(tab_contents)も追加で設定してあります。

 

これらの使い分けについて簡単にご紹介いたします。

 

”クラス(class)とid”とは?

特定の一部だけを装飾したい場合、その部分にclassidを付けておくことで装飾指定を一元化できます。

classの名前はドット(.)で始まりidはシャープ(#)で始まります。

 

たとえばスタイルシート(【テンプレート】→【スタイルシート編集】で開く画面)内に『f_red』というclass名があったとします。

 

そこに書いてあるのが

.f_red {

color: red;

}

だったとします。

 

これは『f_red』というクラス名がついてる部分はフォント色を赤にする(color: red;)というものなんですが、これを行全体のテキストに適用する時は、記事内に

 

<p class="f_red">私の好きな色は赤です。</p>

 

こんな感じで書きます。

(※pは行を意味します)

 

行全体ではなく行の中の一部だけにclassを設定したい時、たとえば上の例なら「赤」というテキストだけフォント色を赤にしたいような場合は

 

私の好きな色は<span class="f_red">赤</span>

 

このように”span”という文字を付けて書きます。

(spanについてはあまり深く考えず”文の中の一部の装飾にはspanを付ける”ぐらいに思っておくといいでしょう)

 

そしてこのclassは繰り返し使えます。

 

つまり他にもフォントを赤くしたい箇所があれば何度使ってもいいのです。

 

これに対しidは一度しか登場しません

 

たとえばヘッダー部分に使われてる<div id="header">なんかはそのいい例です。

ヘッダーはページ内に2つ出てくることはありませんから。

 

仮にここで『ヘッダー部の背景色は赤にする』なんて設定を付けたい場合はスタイルシートに

#header {

background-color:red;

}

というふうにドット(.)ではなくシャープ(#)をアタマにつけて指定します。

 

どこにクラスをつけてどこにidをつけるかははっきり言って慣れです。

 

迷ったらクラスを付けておけば間違いないです。

 

pc_contentsとsp_contentsについての詳細はコチラ↓の記事をごらんください。

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

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


tab_contents

SIRIUSのレスポンシブテンプレートの設定だと、タブレットでのブラウザ表示はPCブラウザ用の設定が(ほぼ)そのまま使い回される(?)ようになってます。

 

もちろんタブレット上で”PCブラウザと全く同じレイアウト”で表示されるならそれはそれで問題ないんですが、SIRIUSの場合、タブレット用に若干サイズを縮めて表示するというちょっと特殊な仕様になっています。

 

そのため妙なサイズ感で表示されてしまう時がたまにあります。

 

それに”マウス操作”での指示をページ内に盛り込む時なんかは、本来ならPCブラウザではマウス操作タブレット)とスマホブラウザではタップ(or スワイプ)操作と表示分けしたいところが、SIRIUSデフォルトの設定だとタブレットブラウザでも”マウス操作”の文言が表示されてしまったりもします。

 

こういった”弊害”がまれに出てくるため【Volar】では新たにタブレット用のクラスtab_contets』を設けてあります。

 

これに伴い【Volar】ではpc_contentsというクラスはPCブラウザ”専用”の設定に変更してあります。

 

つまり今まで通りタブレットでの表示時もPCブラウザ用の設定と同じにしたい場合は、

"pc_contents tab_contets"

といった感じで、”pc_contents””tab_contets”半角スペースをはさんでの並列表記にする必要があります。

 

※サンプルコード

コード

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

 

もしもPCタブレットそれぞれ表示を変えたい時は、PC用は"pc_contents"、タブレット用は"tab_contets"と分けて指定します。

 

※サンプルコード

コード

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

 

ということでタブレットスマホ)両方で同じ表示設定にしたい場合は、"tab_contents sp_contents"となります。

 

※サンプルコード

コード

<div class="tab_contents sp_contents">
PCではこのテキストは表示されず、タブレットとスマホでのみこのテキストが表示されます。
</div>

 

結局のところ、今まで通りに使いたい時は、PC(およびタブレット)用に

<div class="pc_contents tab_contets">~</div>

 

スマホ用には

<div class="sp_contents">~</div>

という書き方になります。

SIRIUSデフォルトの設定本来のpc_contentsの設定)に戻すこともできます。

SIRIUSテンプレート【Volar】

キャプチャ画像

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

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像