• MENU●●●●
  • スマートフォン パソコンサイトで画像を切り替え表示指定する


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

    スポンサー広告

    関連記事


    画像の表示非表示の選択および異なる画像との切り替え指定

     

    シリウスに取り入れたレスポンシブ化構造では パソコンでは表示する
    画像でも スマートフォンでは非表示とする

     

    また 非表示とした配置箇所へ異なる画像を表示することも
    CSS指定により可能です

     

    パソコンでは大きな画像でもスマートフォンではコンテンツは
    同じながらもデザインを替えた異なる画像の表示

     

    同一画像が綺麗に縦配置とか

     

    ネット上にもそんなスタイルのサイトは多く存在しているので
    お見かけしたことはあると理解します

     

    お隣ページではパソコンサイトに同一サイズの画像を配置すれば
    スマートフォンでも縮小された画像が縦配置で綺麗に並ぶので

     

    それで良いのではと

     

    解説しておりますがここではさらに一歩進んで

     

    パソコン用画像

     

    スマートフォン用画像として独自に切り換え表示

     

    または どちらかでは表示する しないの選択指定

     

    という解説になります

     

     

    シリウスのデフォルトiPhoneサイト設定でのサイトでしたら

     

    パソコン スマートフォンサイトの画像の表示非表示は

     

    pcc ipc要素で画像を囲めば簡単に実行はできますが

     

    シリウスアイフォンサイト非採用のテンプレーとで進める場合は 
    初期作業をスタイルシートで設定を追加することになります

     

     

    初期作業が完了すればシリウスアイフォンサイト機能同様の
    表示切り換え手段が以降容易に行えますが当該ページでは
    画像のみの指定方法です

     

    記事コンテンツも同様に指定する際は

     

    こちらに含めてございます 
    ご確認ください
    端末により記事コンテンツを切り替え表示する

     

     


     

     

     

    切り替え表示 表示 非表示指定作業手順

     

    今回は classはしません...desu

     

     

    記事内HTML 通常のコンテンツ箇所に画像は位置

     

    スタイルシートは3か所の読み込み判別欄を置きます
    それだけ

     

     

    パソコンで表示する画像 スマートフォンサイト 
    ipad タブレットでも反映されますのでスマートフォンの範囲には
    収まりません 

     

    反映はメディアクエリ指定する範囲で確認いただけます

     

    取り付け例 
    パソコンで確認できる画像で スマートフォン用画像はパソコンの
    画面サイズからは確認できませんが

     

    pc画面を狭めると確認いただけます

     

     

    例 1

     

     

     

     

     

    例 2

     

     

     

     

    上記 例 1 2 とパソコンから閲覧すると 二つの画像が確認できますが
    どちらも 二つの画像を配置しており パソコンの画面サイズと
    スマートフォン用サイズでは異なる画像を切り替えて表示させています

     

     

     

    また 表示する画像のみが表示され 非表示のコード配置スペースは
    サイト上では無いものとして消滅しますので 隙間なくの表示となります

     

    例 1 2とも 表示切替は同じですが 指定方法に違いがります

     

     

    例 1は最新情報
    スタイルシートで指定しておけば 後あと画像の切り替えは
    記事カラムで指定できる方法です

     

     

     

    例 2は 本掲載日より 一日前で少し面倒な手順
    記事HTMLと スタイルシート指定欄に 切り替え画像追加を 
    一度ごとに手動追加する

     

    いつか飽きてしまう方法ですね

     

    ですが 一度 記事にしたもので削除するのも もったいないんで
    スタイルシートの記載コードのみ巻末に残しております

     

    追記
    この手順はフリースペースでも有効です

     


     

    では進めます

     

     

    例1のスタイル

     

     

    記事カラムの作業から進めます

     

    記事内HTMLに パソコンで表示する画像コード
    スマートフォンで表示する画像コードを二つ並べます

     

    次にCSSで読み込み分別指定するために要素で囲みます

     

    要素内名称pc spcは任意の文字です

     

    他名称でも構いません

     

     

    <pc>画像コード</pc>

     

    <spc>画像コード</ipc>

     

     

    pcで表示する スマートフォンでは非表示
    <pc><img src="<% pageDepth %>img/画像コード.a" style="width:295px;" alt="" /></pc>

     

    pcでは非表示  スマートフォンでは表示する
    <spc><img src="<% pageDepth %>img/画像コード.b" style="width:295px;" alt="" /></spc>
    との指定分別として進めます

     

     

    ページに複数の画像を置く際は 表示コード 非表示コードを
    交互に並べても上下で分けてもどちらでもよいです

     


     

     

    次は スタイルシートを開きます

     

    スタイルシート原本のどこかに?

     

     

    スペースがあるとこに パソコンでは非表示とする指定コードを配置します

     

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

     

     


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

     

    /* 基本レイアウト */

     

    省略

     

     

    パソコンでは非表示とする指定コードとは
    スマートフォンでは表示させるコードを指します

     

     

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

     

     

    パソコンでは非表示とする display: none;で指定してます

     

     

    パソコンで表示するための画像指定はしませんが表示されます
    ので不要

     

     

     

    画像は読み込み指定のためjpgで統一してください 

     

    でもpng画像で進めたい場合はjpgを書換えてください 
    url(../img/.png)

     

     


     

    次にメディクエリ内

     

    ここでパソコンで表示される画像は非表示にします
    display: none;で指定

     

    訳わからんと言わないでよく 意味理解してください

     

    この記述置かないと スマートフォンでも表示されてしまうのです

     

    どこか スペース見つけておいてください

     

    @media(max-width:670px){

     

    どこか?
    適当な箇所に配置

     

     

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

     

     

     

    次です
    スマートフォンで表示させたい画像を上記コードの下に置きます
    display: block;で 表示するです

     

     

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

     

     

    手順としては以上です

     

    記述してコードは 原本に一つ

     

    メディアクエリに 表示 非表示の指定が二つ

     

    画像は他の要素がレスポンシブ化を実行してますので
    記述コード内に%指定は不要です

     

     

    スタイルシートで表示 非表示を指定しておけば 

     

    サイト内どこでも いくつでも ランダムに

     

    画像コードを配置して

     

    pc spc要素で囲えば

     

    <pc>画像コード</pc>
    <spc>画像コード</ipc>

     

    切り換え表示は可能となります

     

     


     

    過去検証

     

    一日前の

     

    例2 の表示例は 記事内HTMLは同様ですが

     

    読み込む指定に画像コードを直接入れ込んだのです

     

    background: url(../img/画像コードb.) no-repeat center;

     

    この方法でも切り換え 表示 非表示は正常に反映されますが

     

    記事内に画像を追加後 さらにスタイルシートで同画像コードを
    一度ごとに追加しなければならなかったのです

     

     

    pc img {
    background: url(../img/img/1a7771.jpg) no-repeat center;
    background: url(../img/img/1a77712.jpg.) no-repeat center;
    background: url(../img/img/1a77713.jp.) no-repeat center;
    display: none;
    }

     

     

    はっきりいって面倒でした

     

    ま 頭が回らんかったのですね

     

     

    では
    画像サイズは 見た目もきれいに! 統一しましょうね

     


     

    スポンサーリンク

     

     

     

    スマートフォン パソコンサイトで画像を切り替え表示指定する
    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配色ツールまとめサイト