ブロック単位に画面サイズによる出し分け

VWSとは フォーラム Lightning ブロック単位に画面サイズによる出し分け

ブロック単位に画面サイズによる出し分け

  • このトピックには25件の返信、1人の参加者があり、最後にmomoにより4年前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全26件中)
  • 投稿者
    投稿
  • #18773

    momo
    閲覧者

    最近、BizVektorみたいなスマホのヘッダー部分でのスクロールする連絡先表示が欲しいと要望してましたが、その代わりになる代替案を思いつきました。
    連絡先の表示ソースを再利用ブロックにして現在、必要箇所に入れることは既に実施しているのですが、その中でヘッダーに近い部分の連絡先ブロックに対して、スマホで表示、PCで非表示とすれば、FORTの場合にPCではFORT自身の機能として連絡先が表示されてます。
    それに対してスマホではFORTの機能では連絡先はヘッダー表示しませんが、連絡先の再利用ブロックに対してスマホは表示すればBizVektorと同等だと想像します。

    ハンバーガーメニューに連絡先を表示できる現在のLightningの基本機能は素晴らしいのですが、私もそれで良いかな?と昨日思っていたのですが、里帰りして来た娘に私のLightningテスト中サイトを見せて感想を聞いたところ、対抗馬として実験していたサイトに比較して連絡先が目立たない。すぐに分からない所は飛ばしてしまう。
    と言われてハッとしました。

    確かにハンバーガーメニューの中の連絡先は画期的で使いやすいのですが、それはLightningを見慣れている私たちの場合で、Lightningを知らない娘たちには、そこをひらけば連絡先が明示されていることを知らないので、存在を知らなければ開くこともないんですね。

    同様にモバイル固定フッターも常時表示している訳ではなく隠れている場合もありますし、新しいこの方式に見慣れてない娘にはピンと来てないようでした。

    私の業種の場合ですが、新規の急を要する潜在的なお客様は、検索結果からパッと見て即電話をかけてくるタイプなので、娘のようなHPの設計に無頓着な人であれば、バカでも分かるレベルで連絡先が目立つ必要性はやっぱりあるようでした。

    その対策としてFORTの利用が必須で、スマホのFORTの現在の仕様は変更が難しい場合は、ブロック単位でスマホ、PCの表示有無が設定できれば解決できる話だと思いました。

    他社のテーマの中には、それが既に実装されているテーマもあるようで、Lightningでも出来る可能性が高いと思って要望してみました。

    #18775

    DRILL LANCER
    モデレーター

    連絡先の表示ソースを再利用ブロックにして現在、必要箇所に入れることは既に実施している

    一番手っ取り早いのは、そのブロックの一番外側の要素のクラスに
    visible-xs-block hidden-md(BS4版の場合はd-block d-lg-none
    を追加すると実現できると思います。
    詳しい説明はBS3版BS4版を参照してください。

    • この返信は4年、 7ヶ月前にDRILL LANCERが編集しました。
    #18782

    DRILL LANCER
    モデレーター

    補足します。

    連絡先の表示ソースを再利用ブロックにして現在、必要箇所に入れることは既に実施している

    とは下記記事にある作業を行ったと解釈していますがそれでOKでしょうか?

    お問い合わせ情報の別パターンを増やす

    その場合、そのブロックを下記の例の様に編集すれば実現可能と思われます。

    BS3の場合

    <div class="veu_contact visible-xs-block hidden-md">
    	<section class="veu_contact veu_contentAddSection">
    		<div class="contact_frame">
    			<p class="contact_txt">
    				<span class="contact_txt_catch">お気軽にお問い合わせください。</span>
    				<span class="contact_txt_tel veu_color_txt_key">000-000-0000</span>
    				<span class="contact_txt_time">受付時間 9:00 - 18:00 [ 土日・祝日除く ]</span>
    			</p>
    			<a href="https://demo-ja.lightning.nagoya/contact/" class="btn btn-primary btn-lg contact_bt">
    				<span class="contact_bt_txt"><i class="far fa-envelope"></i> お問い合わせはこちら <i class="far fa-arrow-alt-circle-right"></i></span>
    				<span class="contact_bt_subTxt">お気軽にお問い合わせください。</span>
    			</a>
    		</div>
    	</section>
    </div>

    BS4の場合 (一応)

    <div class="veu_contact d-block d-lg-none">
    	<section class="veu_contact veu_contentAddSection">
    		<div class="contact_frame">
    			<p class="contact_txt">
    				<span class="contact_txt_catch">お気軽にお問い合わせください。</span>
    				<span class="contact_txt_tel veu_color_txt_key">000-000-0000</span>
    				<span class="contact_txt_time">受付時間 9:00 - 18:00 [ 土日・祝日除く ]</span>
    			</p>
    			<a href="https://demo-ja.lightning.nagoya/contact/" class="btn btn-primary btn-lg contact_bt">
    				<span class="contact_bt_txt"><i class="far fa-envelope"></i> お問い合わせはこちら <i class="far fa-arrow-alt-circle-right"></i></span>
    				<span class="contact_bt_subTxt">お気軽にお問い合わせください。</span>
    			</a>
    		</div>
    	</section>
    </div>
    #18784

    momo
    閲覧者

    RICKさん、詳しい実例までありがとうございます。
    BS3とBS4で変わるんですね。
    Lightningは間も無く4対応と言うことは、今は3で記載して、4に切り替わるタイミングで4対応版にする感じですね。
    実際にLightningがBS4対応に切り替わる日に私が暇でPCの前にいるか分からないことを考えると、BS4にLightningが対応した後で、RICKさんに教えていただいたBS4対応の連絡先ブロックに書き換えようかな?と思ってます。

    それにしても、RICKさんのような対応を頂けるのは世の中に稀です。
    LI● PR●なども興味はあっても、私のように自力で何でも、Wordpressはどんなことでも大丈夫とは言えないレベルな場合、Lightningの強みはフォーラムの存在とRICKさんの存在ですね。

    LI● PR●にもフォーラムでもあれば、仕事以外のサイトはLI● PR●で、仕事のサイトはLightningとか使い分けも楽しそうなのですが。

    #18785

    momo
    閲覧者

    RICKさん、先ずは実験用にコピーしたサイトで上記を試したらバッチリでした!
    iPhoneでは連絡先が表示されて、Macでは非表示でした。
    自分ではBS3の説明も改めて見ても、どう設定すれば希望のように出したり隠したりになるのか?
    頭が混乱してしまったのですがお陰様でこれで行けそうです。

    #18786

    momo
    閲覧者

    iPadの縦持ちの場合も連絡先ブロックを表示させたいと思ったので、visible-sm-blockも追記して見たら、iPadの縦は連絡先を見せて、横にしたら隠れるようになりました。
    RICKさんのお陰で、デバイスのサイズによる出し分け勉強になりました。

    あとはLightningのBS4対応待ちですね。

    #18801

    DRILL LANCER
    モデレーター

    新たにCSSのクラスを設けてそれで対応する方法もあります。
    HTML

    <div class="veu_contact hogehoge">
    	<section class="veu_contact veu_contentAddSection">
    		<div class="contact_frame">
    			<p class="contact_txt">
    				<span class="contact_txt_catch">お気軽にお問い合わせください。</span>
    				<span class="contact_txt_tel veu_color_txt_key">000-000-0000</span>
    				<span class="contact_txt_time">受付時間 9:00 - 18:00 [ 土日・祝日除く ]</span>
    			</p>
    			<a href="https://demo-ja.lightning.nagoya/contact/" class="btn btn-primary btn-lg contact_bt">
    				<span class="contact_bt_txt"><i class="far fa-envelope"></i> お問い合わせはこちら <i class="far fa-arrow-alt-circle-right"></i></span>
    				<span class="contact_bt_subTxt">お気軽にお問い合わせください。</span>
    			</a>
    		</div>
    	</section>
    </div>

    CSS

    .hogehoge { 
        display: block;
    }
    
    @media ( min-width: 992px ) {
        .hogehoge {
            display:none;
        }
    }

    これだとBS4版になっても切り替える必要はありませんが、
    記述するCSSの容量が若干増えるので一長一短ではあります。

    これのためだけに定義するのも癪だったりするので・・・
    他に活用用途がある場合はこの方法を選択するのも良いでしょう。

    P.S.
    クラス名hogehogeは適当につけただけなので適当に変更していただいても結構です。
    (↑適当な名前が思いつかなかったので・・・)

    #18803

    Bootstrap4は一応使える状態にはなっているのですが、まだファイル構造など変更する可能性が高いので、今の開発版を前提に子テーマでのカスタマイズなどする人が出ると話がややこしくなってしまうなという事で調整中です。

    https://github.com/vektor-inc/Lightning/tree/skin_bs4

    現状 vektor-inc.co.jp に適用している開発中のPro版は slack の「開発状況と日報」チャンネルにアップしました。
    ※ 子テーマでCSS以外をカスタマイズしているサイトでは調整が必要ですが、調整内容の記事を書くのは後日にしたいのであくいまで未改造のテスト使用を前提としたものです。

    ※ Bootstrapのバージョンはスキン毎に対応がかわります。現状Bootstrap4が適用されるのは Origin II のみです。

    #18821

    momo
    閲覧者

    RICKさん、おはようございます。
    BSに頼らない出し訳もあるってことですね。
    お陰様で画面サイズの出し分けが2パターンも勉強になりました。
    しかも、実際使える見本付きで。
    どっちにしようか迷ってます。贅沢な悩みですね(笑)。

    #18822

    momo
    閲覧者

    kurudriveさん、おはようございます。
    リンク先をちょっと覗いたのですが、私が使ってみるには何が何だか分からない感じでした。
    なので、正式リリースを待ちたいと思います。
    でもご紹介はありがとうございます。

    そんな訳で技術力的に試せないので質問なのですが、
    BS4対応版になったら、例のiPadのグローバルメニューが直ったり、サイトの表示速度自体も速くなったりするのでしょうか?

    現在、子テーマに

    /*ipadでのドロップダウン機能停止*/
    .device-mobile ul.gMenu ul { display: none !important; }

    での対応をここで教えて頂いて入ってますが、BS4版になったタイミングで上記の行を削除したいと思いますので。

    #18823

    DRILL LANCER
    モデレーター

    現在の仕様のBS4版は下記サイトで運用されているのでチェックしてみると良いかもしれません。
    (8月13日の時点のものなので多少の仕様変更はあるかも?)

    トップページ


    上記サイトは株式会社 Vektor の公式サイトです。

    #18832

    DRILL LANCER
    モデレーター

    開発途上版をテストしたい場合はSlackに突撃すると良いでしょう。
    (私も今日突撃して開発途上版を入手しました。)

    #18841

    Vektor,Inc
    キーマスター

    Slackに上がっていたバージョンでエラーがあったので修正版再度Slackにアップしました。

    #18847

    momo
    閲覧者

    RICKさん、BS4ページをiPadで確認しました。
    問題の部分(グローバルメニューのプルダウン)は直ってました。
    安定的な動作でした。

    速度の面はわかりませんでした。
    このサイトの元のスピード点数が分からないので。。。
    ちなみにモバイルは43点だったのでPageSpeed Insightsの遅いって赤信号表示でした。

    この速度ってどの程度SEOに影響するんでしょうかね。
    SEO以前に見る人がイラつくのか?って観点でも私はさっぱり分からないんです。
    自分では、この43点で遅いと思ったかといえば全然感じませんでした。
    自宅Wi-Fiは光回線だからか?と思って、ドコモの回線で見ても問題は感じませんでした。
    赤信号の点数でも全然不快な遅さではないので、スピード点数って本当に大事なのか?と。

    でも世間でスピードは大事だとあれだけ見かけるからそうなんでしょうけど。

    #18973

    momo
    閲覧者

    RICKさん、私はまだ開発版をダウンロードする勇気、と言うか、Wordpressのスキルはそこまで無いので
    大人しくして、BS4版を待ちます。
    でも、BS4版も最初はLightning Originだけなのかな?
    と思うと、FORTに固執しないで、一番対応が早い事とトラブル少なそうなorigin路線で行った方が楽しいのかなあ?と思ったり。
    それにしても、BS4対応でiPadでも安心してメニュー全開に使えるのが待ち遠しいです。

15件の投稿を表示中 - 1 - 15件目 (全26件中)
  • このトピックに返信するにはログインが必要です。