TOP

PC画面とスマホモバイルでの外部要素自動表示切り替え指定方法

シリウスサイトのパソコンでの閲覧表示のスタイルはiPhone機能での設定で
サイト内に置く画像は ヘッダー画像 およびサイズ指定なしのボックス枠を
含めて自動調整されます

 

 

その他のサイズのある置物

 

スライダー画像やユーチューブ動画などは PCサイトでサイズの指定を
しており スマホ モバイル画面で表示される際は枠内に収まりきれず
適合表示しないとなり 閲覧者目線で見てみれば ずれがある
見ずらい となり それはまたグーグルさんも評価は同じで コンテンツは
優れていても サイト構成がいまいちならば 良いサイトとして
みなされないと判断されるようです

 

対処法は スマホ モバイル画面内で表示される際は適合サイズに
自動調度されピタッと収まるようサイズを指定すればよいのです

 

スポンサーリンク

 

 


 

では 大まかですが解説します

 

詳細を求める方は 巻末のエントリーメニューより 各要素の
指定手順をご覧ください

 

スライダー画像を例にに進めます

 

パソコン画面で表示されるスライダー画像とスマホモバイル画面で
表示されるものを順に一つずつ 二つ縦並びにします

 

二つ並べて 一つはパソコンで表示される記述コードで囲むのです

 

記述コード
<pcc>

 

</pcc>
スライダーを表示するための画像ファイルは記事カラム内に
通常置きますがその表示用画像ファイルを囲むということです

 

 

<pcc>
ここに要素を置きます
スライダーなら 画像ファイル
ユーチューブなら 埋め込みコード
サイト内で置いていたサイズ指定は変更なしです
</pcc>

 

 

 

 

もう一つをスマホモバイル用として指定します

 

スマホモバイル用記述コード

 

記述コード
<ipc>

 

</ipc>

 

 

<ipc>
スマホモバイルでの表示では
要素のサイズは自動調整されませんので 300PXとか310PXとかに
サイズ調整してください
</ipc>

 

 

アクセス状況によりどちらかが判断され 表示されます

 

PC用要素で囲めばPC画面でのみ表示され
スマホ モバイル画面では表示されない

 

スマホモバイル要素で囲めば
PC画面では表示されない

 

 

二つ並べても 表示されない要素はないものとして判断されますから
隙間は空きません

 

パソコン用に横サイズを500PXにしてます
ですが パソコンでのみ認識できるコードでかこんでいるため
スマホ モバイルからは見えません




スマホモバイル用ですと300程がベスト
以下サイズ これは画像です
PC画面スマホモバイル自動切り替え要素指定方法

 


 

今回の記述コードはシリウスサイトで外部スクリプトなどに有効に使えます

 

PC画面スマホモバイル自動切り替え要素指定方法 P-TOP
SIRIUS iPhone機能 シリウスモバイル対応カスタマイズ P-TOP
SIRIUS シリウスカスタマイズ

PC画面スマホモバイル自動切り替え要素指定方法関連解説
iPhone機能を追加したなら手動作業も必要
シリウスサイトを設定画面でiPhone機能を追加することは簡単にできますが、それて終わりではありません 手動でいくつものスマホモバイル適合作業を行う必要があるのです
iPhone用テンプレート初期化
シリウスで以前よりiPhone用テンプレート同時公開しているサイトで モバイルユーザビリティの警告があるような場合 テンプレートに問題がある可能性があります
iPhone画面にユーチューブ動画表示サイズを適合する手順
シリウスサイトをiPhone同時後悔設定にした際 サイト内に置いてあるユーチューブ動画もiPhone画面で調度良い表示サイズに指定しましないと半分程度の範囲でしか認識できません
iPhoneサイト背景カラーをカスタマイズ
SIRIUS シリウスiPhoneサイトの背景カラーを意味深なカラーにカスタマイズしてみるとまた違ったイメージを打ち出せるかもしれません?
iPhone機能 モバイル表示画面を確認する
シリウスをiPhone同時公開に指定する際 モバイル画面では どのように表示されるかを確認しながら構築してゆくことが出来ます
スマホとPC画面を分離適合サイズで読み易く表示する方法
シリウスサイトのスマホサイトとPCサイトでの表示内容をモニタリングサイズに適合した読みやすい構成に分離表示する方法のご案内です
スマホサイト フォントサイズを簡単カスタマイズする方法
SIRIUS シリウスのiPhone機能 デフォルトフォントサイズは スマホサイトの構成により 小さすぎて読みずらい場合もありますが 読みやすくカスタマイズ変更するこは簡単にできます