ブロック単位に画面サイズによる出し分け
ブロック単位に画面サイズによる出し分け
- このトピックには25件の返信、1人の参加者があり、最後に
により4年、 9ヶ月前に更新されました。
-
投稿
-
最近、BizVektorみたいなスマホのヘッダー部分でのスクロールする連絡先表示が欲しいと要望してましたが、その代わりになる代替案を思いつきました。
連絡先の表示ソースを再利用ブロックにして現在、必要箇所に入れることは既に実施しているのですが、その中でヘッダーに近い部分の連絡先ブロックに対して、スマホで表示、PCで非表示とすれば、FORTの場合にPCではFORT自身の機能として連絡先が表示されてます。
それに対してスマホではFORTの機能では連絡先はヘッダー表示しませんが、連絡先の再利用ブロックに対してスマホは表示すればBizVektorと同等だと想像します。ハンバーガーメニューに連絡先を表示できる現在のLightningの基本機能は素晴らしいのですが、私もそれで良いかな？と昨日思っていたのですが、里帰りして来た娘に私のLightningテスト中サイトを見せて感想を聞いたところ、対抗馬として実験していたサイトに比較して連絡先が目立たない。すぐに分からない所は飛ばしてしまう。
と言われてハッとしました。確かにハンバーガーメニューの中の連絡先は画期的で使いやすいのですが、それはLightningを見慣れている私たちの場合で、Lightningを知らない娘たちには、そこをひらけば連絡先が明示されていることを知らないので、存在を知らなければ開くこともないんですね。
同様にモバイル固定フッターも常時表示している訳ではなく隠れている場合もありますし、新しいこの方式に見慣れてない娘にはピンと来てないようでした。
私の業種の場合ですが、新規の急を要する潜在的なお客様は、検索結果からパッと見て即電話をかけてくるタイプなので、娘のようなHPの設計に無頓着な人であれば、バカでも分かるレベルで連絡先が目立つ必要性はやっぱりあるようでした。
その対策としてFORTの利用が必須で、スマホのFORTの現在の仕様は変更が難しい場合は、ブロック単位でスマホ、PCの表示有無が設定できれば解決できる話だと思いました。
他社のテーマの中には、それが既に実装されているテーマもあるようで、Lightningでも出来る可能性が高いと思って要望してみました。
補足します。
連絡先の表示ソースを再利用ブロックにして現在、必要箇所に入れることは既に実施している
とは下記記事にある作業を行ったと解釈していますがそれで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>RICKさん、詳しい実例までありがとうございます。
BS3とBS4で変わるんですね。
Lightningは間も無く４対応と言うことは、今は３で記載して、４に切り替わるタイミングで４対応版にする感じですね。
実際にLightningがBS4対応に切り替わる日に私が暇でPCの前にいるか分からないことを考えると、BS４にLightningが対応した後で、RICKさんに教えていただいたBS4対応の連絡先ブロックに書き換えようかな？と思ってます。それにしても、RICKさんのような対応を頂けるのは世の中に稀です。
LI● PR●なども興味はあっても、私のように自力で何でも、Wordpressはどんなことでも大丈夫とは言えないレベルな場合、Lightningの強みはフォーラムの存在とRICKさんの存在ですね。LI● PR●にもフォーラムでもあれば、仕事以外のサイトはLI● PR●で、仕事のサイトはLightningとか使い分けも楽しそうなのですが。
RICKさん、先ずは実験用にコピーしたサイトで上記を試したらバッチリでした！
iPhoneでは連絡先が表示されて、Macでは非表示でした。
自分ではBS3の説明も改めて見ても、どう設定すれば希望のように出したり隠したりになるのか？
頭が混乱してしまったのですがお陰様でこれで行けそうです。iPadの縦持ちの場合も連絡先ブロックを表示させたいと思ったので、visible-sm-blockも追記して見たら、iPadの縦は連絡先を見せて、横にしたら隠れるようになりました。
RICKさんのお陰で、デバイスのサイズによる出し分け勉強になりました。あとはLightningのBS４対応待ちですね。
新たに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は適当につけただけなので適当に変更していただいても結構です。
（↑適当な名前が思いつかなかったので・・・）Bootstrap4は一応使える状態にはなっているのですが、まだファイル構造など変更する可能性が高いので、今の開発版を前提に子テーマでのカスタマイズなどする人が出ると話がややこしくなってしまうなという事で調整中です。
https://github.com/vektor-inc/Lightning/tree/skin_bs4
現状 vektor-inc.co.jp に適用している開発中のPro版は slack の「開発状況と日報」チャンネルにアップしました。
※ 子テーマでCSS以外をカスタマイズしているサイトでは調整が必要ですが、調整内容の記事を書くのは後日にしたいのであくいまで未改造のテスト使用を前提としたものです。※ Bootstrapのバージョンはスキン毎に対応がかわります。現状Bootstrap4が適用されるのは Origin II のみです。
RICKさん、おはようございます。
BSに頼らない出し訳もあるってことですね。
お陰様で画面サイズの出し分けが2パターンも勉強になりました。
しかも、実際使える見本付きで。
どっちにしようか迷ってます。贅沢な悩みですね(笑)。kurudriveさん、おはようございます。
リンク先をちょっと覗いたのですが、私が使ってみるには何が何だか分からない感じでした。
なので、正式リリースを待ちたいと思います。
でもご紹介はありがとうございます。そんな訳で技術力的に試せないので質問なのですが、
BS４対応版になったら、例のiPadのグローバルメニューが直ったり、サイトの表示速度自体も速くなったりするのでしょうか？現在、子テーマに
/*ipadでのドロップダウン機能停止*/
.device-mobile ul.gMenu ul { display: none !important; }での対応をここで教えて頂いて入ってますが、BS４版になったタイミングで上記の行を削除したいと思いますので。
現在の仕様のBS4版は下記サイトで運用されているのでチェックしてみると良いかもしれません。
（8月13日の時点のものなので多少の仕様変更はあるかも？）
上記サイトは株式会社 Vektor の公式サイトです。開発途上版をテストしたい場合はSlackに突撃すると良いでしょう。
（私も今日突撃して開発途上版を入手しました。）RICKさん、BS4ページをiPadで確認しました。
問題の部分（グローバルメニューのプルダウン）は直ってました。
安定的な動作でした。速度の面はわかりませんでした。
このサイトの元のスピード点数が分からないので。。。
ちなみにモバイルは４３点だったのでPageSpeed Insightsの遅いって赤信号表示でした。この速度ってどの程度SEOに影響するんでしょうかね。
SEO以前に見る人がイラつくのか？って観点でも私はさっぱり分からないんです。
自分では、この４３点で遅いと思ったかといえば全然感じませんでした。
自宅Wi-Fiは光回線だからか？と思って、ドコモの回線で見ても問題は感じませんでした。
赤信号の点数でも全然不快な遅さではないので、スピード点数って本当に大事なのか？と。でも世間でスピードは大事だとあれだけ見かけるからそうなんでしょうけど。
- このトピックに返信するにはログインが必要です。
