facileテンプレートでPCとスマートフォンで表示を切り替える設定方法
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。
【facile】デモサイトを見て頂ければ分かりますが、コンテンツの一部分がPC端末で見た場合と、スマートフォン端末で見た場合で表示される画像・文章・広告が切り替わるようになっています。
【リンク】facileテンプレートデモサイト
PC⇔スマートフォン表示切替設定方法
上記のように、コンテンツ部分やフリースペース(広告貼り付け部分)に、PCで表示されるタグ、スマートフォン・タブレットで表示されるタグを利用します。
上記画像はfacileデモサイトのフリースペース部分のHTMLです。
この特殊なタグを用いることで、PCとスマートフォンの表示広告を切り替えています。
タグ打ちが面倒な人はクラス設定をしておこう
「<div class="mobile_display">~</div>」の手入力でタグ打ちは面倒なので、クラス設定をしておけば1クリックでこのタグを付加することができます。
まずシリウス編集画面左上の「S]マークをクリックして、「クラス設定」を選択。
新規追加をクリック。
上記の通りに記入してOKをクリック。
クラス名には「mobile_display」と打ち込み、「DIV」のボタンをクリックして説明書きをしてOKをクリック。
PCのみ表示タグの設定はクラス名に「pc_display」と打ち込み同様の手順で。
シリウス編集画面のデザインモードボタン横の「CL]マークをクリックすると、先ほど設定したクラスが表示されます。
今後はこれを1クリックするだけで、タグを入れ込むことが出来ます。
一応、コピペして使えるようにサンプルタグのコードを記載しておきます。
<div class="pc_display">
PC端末のみに表示
</div>
<div class="mobile_display">
スマートフォン・タブレット端末のみに表示
</div>
「というか、この機能、どんな場合に使うの?」と思った人もいると思いますので、軽く解説しておきます。
初心者にはちょっと難しい内容になるかも。
PCとスマホは基本的に別サイトと考える人向け
PCサイトとスマートフォンサイトは、1画面に表示される情報量が大きく違うため、基本的には別サイトとして構築する方が良いという考え方もあります。(私もそうです)
ですが通常のレスポンシブウェブサイトだと、単にサイドバー部分がコンテンツの下に潜り込むだけです。
その結果、スマートフォンで見た場合、サイドバーの下に配置した広告はコンテンツのずーっと下奥に追いやられてしまうため、クリック率が大幅に減少します。
ですので、クリック率を多くし成約を高める為には、広告は記事下やまたはメニュー手前に配置するのが望ましいです。
ところがスマートフォン向けの広告配置をしてしまうと、今度はPCサイトでの広告配置が適切な状態ではなくなってしまいます。
「スマートフォンからの閲覧者が7割だけど、3割はPCから。割合からするとスマートフォン閲覧者優先の配置にするべきなんだろうけど、PCからの訪問者も出来れば逃がしたくない」
というシーンが出てきます。
だから、PCサイトとスマートフォンサイトは本来切り分けた方が良いのです。
この問題を出来るだけ解消するために、【facile】ではPCとスマートフォンで表示を切り替える機能を搭載しました。
例
では簡単にですが例示します。
PC表示では、サイドバー広告を2つ追尾させています。
1つでも良いのですが、サイト訪問者の属性が2パターンに分かれる場合、2種類の広告を配置するとクリック率が向上する可能性があるからです。
また、PC端末で見る人間とスマートフォン端末で見る人間は、取り巻く環境や意識の高さが変わってくるため、このことも考慮して広告を貼ります。
PCでは2つ縦並びの広告が配置されていましたが、スマートフォンで見ると1つの広告になり、別の広告に切り替わるようにも出来ます。
2つ広告が並ぶと、訪問者から嫌われる可能性があることと、スマートフォンユーザーはいろんな年代や層がいるため、そういったターゲットに適した広告を選ぶことを考えることも時には必要になります。
ほとんどの人はPCサイト向けもスマートフォンサイト向けも同じ広告を貼っていますが、場合によってはいろんな機会を損失している可能性もあります。
どうせサイトを運営するなら、最大限に活かした方が良いでしょう。
この切替機能はそのために役立てると思います。
フリースペースにアドセンスを入れる場合
facile、fine、grandのフリースペース幅は最大292pxで、この幅より大きい画像は自動的に292pxにリサイズされます。
ですがアドセンスは画像コードではないので、自動リサイズはされません。
そこで対応策として、PCとスマホの表示切替機能を使います。
<div class="pc_display">
PC端末のみに表示するアドセンスコード
(幅250pxのアドセンス)
</div>
<div class="mobile_display">
スマートフォン・タブレット端末のみに表示するアドセンスコード
(幅300pxのアドセンス)
</div>
上記の通りフリースペース内に記述することで、PCとスマホでアドセンスの表示を変える事が出来ます。
ツイート
関連ページ一覧
【facile】テンプレートのインストール方法 | ホームページ作成ソフトSIR...
特典サイトにて2商品購入者用IDとパスを入力し、テンプレートファイルをダウンロードします。ダウンロードファイルはZIPファイルになっているので、ダブルクリックして解凍します。解凍されたフォルダを開いてください。ランキング機能の付加方法次に、...
【facile】利用画像のサイズ幅 | ホームページ作成ソフトSIRIUS
facileで利用できる画像幅について解説します。【facile】テンプレート推奨画像サイズヘッダー部分・・・最大幅980pxコンテンツ部分・・・最大幅610px(これより大きい幅は自動リサイズされる)サイドバー広告部分・・・PCでは幅29...
【facile】PCとスマートフォン表示切替設定方法 | ホームページ作成ソフト...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。【facile】デモサイトを見て頂ければ分かりますが、コンテンツの一部分がPC端末で見た場合と、スマートフォン端末で見た場合で表示される画像・文...
【facile】追尾機能とフリースペースを増やす方法 | ホームページ作成ソフト...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。このテンプレートではメインメニュー(下段)部分が自動で追尾されます。特別な設定は必要はありません。追尾チェックの注意点なお、テンプレートを初めて...
【facile】ランキング機能ボタン画像カラーの変更方法 | ホームページ作成ソ...
「画像管理」を開くと、「詳細ページはこちら」と「公式ページはこちら」のボタンのカラーバリエーションが同梱されています。「詳細ページはこちら」は、「button_more.png」が、「公式ページはこちら」は、「button_official...
【facile】youtube、Googlemapのレスポンシブタグ | ホーム...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。youtubeの埋め込みタグは動画上で右クリックをすると取得できますが、それをSIRIUSの編集画面上にそのまま貼り付けてしまうと、スマホなどで...
【facile】個別ページのヘッダー画像変更方法 | ホームページ作成ソフトSI...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。レスポンシブテンプレートの仕様上の都合で、エントリーページ(個別ページ)のヘッダー画像をトップページのものと別の画像にしたい場合は、HTMLのカ...
【facile】フラットデザインCSSボタンの活用 | ホームページ作成ソフトS...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。facileではランキング機能のカラーボタンとは別に、コンテンツのどの部分でも気軽にテキストも変更して設置できるCSSボタンタグを表示させること...
【facile】グローバルメニューの横並びの数について | ホームページ作成ソフ...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。【facile】PCで見えるテンプレートのグローバルメニューは、1列5個までの設定となっています。メニューの6個目以降は2列目に配置される仕様で...
【facile】スマホで見た時のフォントサイズ変更 | ホームページ作成ソフトS...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。SIRIUSのテンプレートは、サイトオプションから文字サイズの調整が出来ます。これはfacileも同様ですが、ここで指定した文字サイズは、スマー...
【facile】サイトマップ修正の件
お世話になっております。マナです。facileオレンジのサイトマップファイルに不具合が発見されました。私が制作中のサイトマップHTMLファイルをテンプレートに入れてしまっており、サイトマップにしっかりした表示がされない不具合がございます。お...
【facile】スタイルシート一部ファイル削除の件
お世話になっております。facileテンプレートのバグが見つかりました為、2015年11月3日21時より前にダウンロードした方は、大変お手数ですが以下の修正を宜しくお願い致します。*バグ内容吹き出し機能を立ち上げるとエラー表示が出る(シリウ...