• MENU●●●●
  • 端末により記事コンテンツを切り替え表示する


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

    スポンサー広告

    関連記事


    Media Queries 閲覧するデバイスでコンテンツの非 表示切替え方法 

    メディアクエリを組み込むレスポンシブサイトでは パソコンでは表示する
    コンテンツをスマートフォンやタブレットサイズの端末では 非表示とする

     

    または パソコンサイトとコンテンツは同類でも スマートフォンサイズの
    端末では別な記事を表示させるということもできます

     

    大手サイトでもそんなサイトありますね

     

    パソコンと スマートフォンではサイトコンテンツはは同じながらも
    記事列が極端に少ないとか

     

    パソコンサイトとは異なる記事とかですね

     

    スタイルシートのメディアクエリで指定すれば

     

    一つのページを複数のスタイルで公開できますが今回は

     

    スマートフォン パソコンでの切り替えで解説します

     

    スポンサーリンク

     

     

    2015 0712更新
    手順の工程に訂正がございます


     

    ネット上では別なファイルを置いて パソコン スマートフォンタブレットとも
    異なるページを読み込ませている
    ...なんてことも見聞きいたしましたが 面倒そうでやりたくもありません

     

    しかし シリウスでそんな構造のサイトを公開したい方は
    全然面倒なく?

     

    できますのでお試しください

     

    関連情報として 画像を端末により切り替え表示
    画像の表示非表示方法もサイト内にございますが 基本的には同じです

     

    画像もという方は 記載が若干異なりますのでご確認ください
    スマートフォン パソコンサイトで画像を切り替え表示指定する

     


     

    では進めましょう

     

    反映スタイルをご確認ください

     

    以下例 

     

    パソコン画面サイズ表示されるテキストが表示されていますが
    サイト幅をスマホサイズに狭めるとテキストが切り替わります

     


     

    スマートフォンでは見えません 

    シリウスパソコンコンテンツテキストッです

     

     

    パソコンでは見えませんがスマートフォンサイズに狭めると表示されるテキスト
    スマートフォンサイトコンテンツテキストです

     


     

    例は 短文ですが ページ全体を囲み さらにもう一つのコンテンツを
    下に置き サイト全体を別な構成で作成し切り替えることも可能
    大手サイトではよく見かける構成かと思います!

     

     

    記事を切り換える また非表示とするは 切り替え指定をするのではなく 

     

    フォントをデバイスにより 非表示か 表示という どちらかを
    スタイルシートで指定しますが  非表示の箇所に 別コンテンツを
    表示させれば結果として切り替わるとなるのです

     

    そのコンテンツのもととなる フォント 文字を指定の対象物として
    全体的にターゲットします

     

    ターゲット 目標物を 

     

    パソコン用として<pc>要素で囲みます

     

     

    スマートフォン用として<spc>要素で囲みます

     

    <pc>シリウスパソコンコンテンツ</pc>

     

    <spc>スマートフォンサイトコンテンツ</spc>

     

     

     

    pc spc要素は画像の切り替え 非 表示と同じものを使いますが
    名称文字は任意ですので当サイトでは例として使うものです
    固定ではりません

     

     

    pc spc要素の指標範囲は?

     

    パソコン スマートフォン端末共通表示をする場合はコンテンは要素で
    囲まなくともOKかと

     

     

    囲む範囲は

     

    pc要素は 
    スマートフォンでは非表示とする範囲
    スマートフォンでは表示されないということです

     

    spc要素は 
    スマートフォンでは表示するがパソコンでは非表示とする範囲

     

     

    記事内に限らずフリースペースでも障害なく反映しますので
    バナー広告等 パソコンサイトでは大きめの物でも スマートフォンでは
    小さいものに変えるとか?

     

    表示させないとか?

     

    いろんなことに適用できます

     

    この作業は 通常の記事書く操作画面で行います

     


    操作画面での改行設定

     

    操作画面では もう一つの指定作業があります

     

    操作画面では 一番下に改行設定メニュ―が備えありますね

     

    通常はPタグ指定かと思われますが BRタグにチェックしてください
    ここが大事なとこで Pタグ指定の場合は小範囲の反映しかできないのです

     

    事情はこちらでご確認ください
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作

     

    ご注意

     

    シリウス機能アイフォンサイト設定では
    以下のコンテンツ 表示 非表示の要素指定をする
    <pcc>
    <ipc> 要素がございますが メディアクエリレスポンシブコード内では
    正常反映されません

     

    <pcc>はスマートフォンでは表示されたまま

     

    <ipc>はPCスマホでも表示されない

     

    メディアクエリでこの記述は 障害となりますので使わないでください

     


     

     

    では次

     

    スタイルシートで指定しましょう

     

     

    意外かもしれませんがCSS指定では
    記事コンテンツテキストを要素指定するのではなく
    フォントを 記事文字を非表示 表示とするよう記述します

     

     

     

    最初はデフォルトスタイルシートの位置に進んでください
    メディアクエリ内ではなく原本に記載します

     

     

    パソコンから見たときスマートフォン記事は非表示とする指定記載ですが
    非 表示の選択指定するにはfont;ですよ
    ご確認ください

     

     

    原本内に配置してください
    spc {
    font;
    display: none;
    }

     

    で ここは終了

     


    次にメディアクエリ内に移動

     

     

    メディアクエリ内に置く記載は二つ

     

    パソコンで表示されるフォントは 非表示とする指定記載

     

    pc {
    font;
    display: none;
    }

     

     

    スマートフォンでは表示する指定記載

     

    spc {
    font;
    display: block;
    }

     

     

     

    スタイルシートへ3つ記載コードを配置すれば 完了です

     

    後は 記事コンテンツを追加し または見直し

     

    pc spc要素で囲めば反映は確認できます

     


     

    画像 記事コンテンツCSS指定コード記載例

     

    念のため

     

    間違いを防ぐため 効率よくするため

     

     

    <pc>

     

    <spc>は 画像 記事コンテンツとも同じものにすると
    分離しないで済むので効率が良いです

     

    <spc>を同じ指標にしておけば 要素囲みでどりらかのCss指定が
    作動し反映されます

     

     

    後あとの不便を回避するため
    スタイルシート記載はどちらも同じ位置に配置しましょう

     

     

     

     

    画像切り替えコードと記事コンテンツ切り換えコードの
    配置を合わせた例

     

    スタイルシート原本とは もともとのスタイルシートをいってます

     

    配置はどこでもよいのですが解り易いところがいいかな

     

    当サイトは
    /* 基本レイアウト */
    の上においてます

     

    2列入り
    上がパソコンで非表示画像指定
    下がパソコンでフォント非表示の指定

     

     

    spc img {
    background: url(../img/.jpg) no-repeat center;
    display: none;
    }

     

    spc {
    font;
    display: none;
    }

     

     

    メディア」クエリ内
    どこにおいても作動しますが並べておきましょう

     

    PCで画像非表示

     

    pc img {
    background: url(../img/.jpg) no-repeat center;
    display: none;
    }

     

    スマホで画像表示
    spc img {
    background: url(../img/.jpg) no-repeat center;
    display: block;
    }

     

     

    PCでフォント非表示
    pc {
    font;
    display: none;
    }

     

    スマホでフォント表示
    spc {
    font;
    display: block;
    }

     

    全部で6つ配置で終了

     

     

    何が何やらですか?

     

    意味
    display: none;非表示指定

     

    display: block;表示する指定

     

    覚えてください

     

     


     

    複数のメディアクエリで異なるコンテンツを表示する

     

    ここまでは スマートフォン パソコンの2例ですが

     

    もう一つメディアクエリを追加する場合 ipadやタブレット

     

    その際は<pc> <spc>要素を別名で

     

    スタイルシート指定も含めて追加してください

     

     

    メディアクエリにも限界はあるかと思いますが
    後一つか 二つは追加可能です

     

     

    端末により記事コンテンツを切り替え表示する
    SIRIUS シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

    端末により記事コンテンツを切り替え表示する関連解説
    サイトをレスポンシブウェブ化カスタマイズする今事情
    SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
    レスポンシブウェブデザイン設定事情を理解しよう
    シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
    レスポンシブウェブデザイン変更前の説明
    SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
    レスポンシブウェブデザインカスタマイズのレイアウト変更値
    シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
    ヘッダー画像をレスポンシブウェブ構造で作動させる方法
    シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
    シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
    デフォルト一カラムレスポンシブウェブデザイン設定
    シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
    2カラムテンプレート レスポンシブデザイン設定方法
    SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
    3カラムテンプレート レスポンシブウェブデザイン追加方法
    SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
    SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
    シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
    SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
    シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
    レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
    シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
    シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
    パソコン スマートフォン画面でどちらも記事列を適合表示する指定
    シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
    iPhone ipadでサイト背景を固定化する仕様設定
    シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
    シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
    レスポンシブウェブデザイン構造でのフォントサイズ指定
    シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
    レスポンシブウェブデザインに適合する画像サイズ
    シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
    シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作
    SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
    スマートフォン パソコンサイトで画像を切り替え表示指定する
    当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
    スマートフォンサイトではスライダー画像は必要か?
    SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
    トップページ全体をワイドヘッダー画像で表示したい?の勘違い
    SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
    シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
    スマートフォンでは、固定のグローバルは出現させない
    SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
    iphone設定からレスポンシブデザインへ移行する際の注意事
    SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
    SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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