• MENU●●●●
  • スマホとPC画面を分離適合サイズで読み易く表示する方法


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    スマホ構成 PC構成を個別に構築する

    近況のサイト検索をしていますと パソコン検索画面と スマホで見た
    内容では記事は同じようであるが

     

    きちんとスマホサイズに配列されている

     

    または 押しボタンなど PC画面とは異なる認識しやすいボタンに
    大きな切り替わっている

     

    その他 記事は同じながらもスマホにぴったりと構成があっている

     

    まあ 大手サイトは皆そんなものですが 個人サイトでも

     

    綺麗に 別サイトのように構築しておられる方がおります

     

    また PCサイトと全然構成が違う

     

    記事など7割程いて バナー 一覧みたいな

     

    とても同じサイトとは思えないような

     

    はて?
    PCサイトとスマホ専用のサイトをどのようにすれば
    こんな構成できるんだろうかと?

     

     

    シリウス機能でスマホサイトに切り替えても 記事の折り返しは
    中途半端でよ読みずらくてたまりません

     

    シリウス機能のiPhoneサイトを同時育成 画面をスマホサイズに自動調整と
    いっても 100%お任せの機能で PCサイト用に配列された構成を
    スマホサイトに綺麗に配置してくれる事ではないのですね

     

     

    スマホ対応にしなければグーグル検索でランク落ちとせかされて
    対応したものの 見ずらいスマホサイト作ってもいかがなもんかなと?

     

     

    PCサイトでの構成をスマホサイトをどちらも綺麗に構成するよう
    両方のサイトをどちらにでも合わせることは慎重び作業を行えば
    可能かとも思われますが膨大な時間が費やされることでしょう

     

    スポンサーリンク

     

     

    そこで一考

     

    前置きですが 今回は私の勝手な判断でやっていることなので
    当サイトの言うこと信じて グーグルさんからランク落とされても
    恨まないでくださいね

     

    当初は スマホサイトを別にページ作って読み込みできないかなどと
    無謀なこと考えてましたが どうにもならず

     

    そんな時パッとヒラメキ 実行したところ 
    上手く表示されたのでこれでいいじゃんと!

     

    しかし
    不安のある方はやらないことが賢明な選択です

     

     

    その方法とは 一つのページ内に

     

    パソコン用表示と

     

    スマホ表示と 二つ作ることです

     

     

    PCサイト用記事を コピーして

     

    ページ内下部に再度貼り付け スマホサイズに構成を変えます

     

    PC記事

     

    パソコンでのみ表示される;pccコードで囲む
    <pcc>
    テキスト
    画像
    バナー広告
    パソコン記事
    </pcc>

     

     

    スマホ記事

     

    スマホでのみ表示されるコードで囲む
    <ipc>
    テキスト
    画像
    バナー広告
    スマホ記事
    </ipc>

     

     

    一つの ページに PC表示用 スマホ表示用記事を
    置く事になるわけですね

     

    上記のPC スマホ指定コードで囲めば

     

    PCで閲覧時はPCサイト 

     

    スマホで閲覧時はスマホサイトとして自動判別されて表示されます

     

    デモ 以上の分別指定された場合は グーグルのSEO対策として
    シリウスのiPhoneサイト設定をONにしてください

     

    シリウスのiPhoneサイト設定は PCサイトをスマホで閲覧時に
    スマホサイズに切り替える指定ですが 当サイトの指定コードが
    優先され表示されます

     

     

    PC記事は 今後も通常道理作成してますが

     

    スマホ記事は シリウスシステム設定でシリウス通常プレビュー機能画面に
    切り換えれば 記事の折り返しを調節して
    画像やバナー広告はスマホ用に合わせることが出来ます

     

     

    又 例として挙げますが 上位サイトの例で

     

    PCKサイトとスマホサイトではコンテンツは同じながら
    記事は7割ほど省いて 後は広告バナー一覧何てサイトもありました

     

    まあ スマホサイトですから文字ばかりではなく
    見た目デザイン重視かなと?

     

     

    作業は てんこ盛りページがたくさんあると大変ですが
    まずはトップページからコツコツと進めましょう

     

    あとがきですが スマホ OCサイズ同時公開もよいでしょうけれど
    ipad タブレットサイズでの閲覧状況も考えるなら
    レスポンシブデザインを追加することもおすすめします
    SIRIUS シリウスレスポンシブデザインテンプレート公開

     

     

    スマホで見ずらい置物はは省く

     

    PCサイトでよく使われるボックス等で スマホ表示では
    見ずらい置物は省きましょう

     

    PCサイトでは 良い置物でもスマホサイトで確認すると
    認識上構成が変わり邪魔になるものもございます

     

    スマホサイズは小さいのですから 致し方ないことで

     

    デザインよりも
    読みやすさに重点を置きましょう

     

     

    スマホとPC画面を分離適合サイズで読み易く表示する方法 P-TOP
    SIRIUS iPhone機能 シリウスモバイル対応カスタマイズ P-TOP
    SIRIUS シリウスカスタマイズ

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト