サイトマップ
PC画面とスマホモバイルでの外部要素自動表示切り替え指定方法
シリウスサイトのパソコンでの閲覧表示のスタイルはiPhone機能での設定で
サイト内に置く画像は ヘッダー画像 およびサイズ指定なしのボックス枠を
含めて自動調整されます
その他のサイズのある置物
スライダー画像やユーチューブ動画などは PCサイトでサイズの指定を
しており スマホ モバイル画面で表示される際は枠内に収まりきれず
適合表示しないとなり 閲覧者目線で見てみれば ずれがある
見ずらい となり それはまたグーグルさんも評価は同じで コンテンツは
優れていても サイト構成がいまいちならば 良いサイトとして
みなされないと判断されるようです
対処法は スマホ モバイル画面内で表示される際は適合サイズに
自動調度されピタッと収まるようサイズを指定すればよいのです
スポンサーリンク
では 大まかですが解説します
詳細を求める方は 巻末のエントリーメニューより 各要素の
指定手順をご覧ください
スライダー画像を例にに進めます
パソコン画面で表示されるスライダー画像とスマホモバイル画面で
表示されるものを順に一つずつ 二つ縦並びにします
二つ並べて 一つはパソコンで表示される記述コードで囲むのです
記述コード
<pcc>
</pcc>
スライダーを表示するための画像ファイルは記事カラム内に
通常置きますがその表示用画像ファイルを囲むということです
<pcc>
ここに要素を置きます
スライダーなら 画像ファイル
ユーチューブなら 埋め込みコード
サイト内で置いていたサイズ指定は変更なしです
</pcc>
もう一つをスマホモバイル用として指定します
スマホモバイル用記述コード
記述コード
<ipc>
</ipc>
<ipc>
スマホモバイルでの表示では
要素のサイズは自動調整されませんので ３００PXとか３１０PXとかに
サイズ調整してください
</ipc>
アクセス状況によりどちらかが判断され 表示されます
PC用要素で囲めばPC画面でのみ表示され
スマホ モバイル画面では表示されない
スマホモバイル要素で囲めば
PC画面では表示されない
二つ並べても 表示されない要素はないものとして判断されますから
隙間は空きません
パソコン用に横サイズを５００PXにしてます
ですが パソコンでのみ認識できるコードでかこんでいるため
スマホ モバイルからは見えません
スマホモバイル用ですと３００程がベスト
以下サイズ これは画像です
今回の記述コードはシリウスサイトで外部スクリプトなどに有効に使えます
PC画面スマホモバイル自動切り替え要素指定方法 P-TOP
SIRIUS iPhone機能 シリウスモバイル対応カスタマイズ P-TOP
SIRIUS シリウスカスタマイズ
- iPhone機能を追加したなら手動作業も必要
- シリウスサイトを設定画面でiPhone機能を追加することは簡単にできますが、それて終わりではありません 手動でいくつものスマホモバイル適合作業を行う必要があるのです
- iPhone用テンプレート初期化
- シリウスで以前よりiPhone用テンプレート同時公開しているサイトで モバイルユーザビリティの警告があるような場合 テンプレートに問題がある可能性があります
- iPhone画面にユーチューブ動画表示サイズを適合する手順
- シリウスサイトをiPhone同時後悔設定にした際 サイト内に置いてあるユーチューブ動画もiPhone画面で調度良い表示サイズに指定しましないと半分程度の範囲でしか認識できません
- iPhoneサイト背景カラーをカスタマイズ
- SIRIUS シリウスiPhoneサイトの背景カラーを意味深なカラーにカスタマイズしてみるとまた違ったイメージを打ち出せるかもしれません？
- iPhone機能 モバイル表示画面を確認する
- シリウスをiPhone同時公開に指定する際 モバイル画面では どのように表示されるかを確認しながら構築してゆくことが出来ます
- スマホとＰＣ画面を分離適合サイズで読み易く表示する方法
- シリウスサイトのスマホサイトとＰＣサイトでの表示内容をモニタリングサイズに適合した読みやすい構成に分離表示する方法のご案内です
- スマホサイト フォントサイズを簡単カスタマイズする方法
- SIRIUS シリウスのiPhone機能 デフォルトフォントサイズは スマホサイトの構成により 小さすぎて読みずらい場合もありますが 読みやすくカスタマイズ変更するこは簡単にできます
