2025.6.26 CSS 調整
VK Blocks がバージョン 1.105.1 にアップデートされて、アラートブロックでスマホ表示時にアイコンを上部に配置できるようになったことにより、この記事で行っているカスタマイズでレイアウトがおかしくなったため、CSS に display: grid; を追加しました。
この記事のカスタマイズについて
この記事で行っているレスポンシブ対応は、アラートブロック標準のアイコンを上部に配置する機能を使わずに独自にカスタマイズを行っています。アラートブロック標準のレスポンシブ対応と異なる点は下記の通りです。
- ブレークポイントを選べる。
- 縦積み表示のときに短いボーダーを表示する。
画面幅が小さくなったら VK Blocks のアラートブロックが縦積みレイアウトに切り替わるカスタマイズを行いました。
縦積み表示のときのボーダーが短い方が好みなので、カスタマイズして短いボーダー表示にしてあります。
画面幅が 576px より小さくなったら縦積み
スタッフ
紹介
紹介
追加 CSS クラス xs-vertical
画面幅が 768px より小さくなったら縦積み
スタッフ
紹介
紹介
追加 CSS クラス sm-vertical
画面幅が 992px より小さくなったら縦積み
新着情報
追加 CSS クラス md-vertical
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2025年10月9日メニュー編集画面の「メニューを削除」を右端に配置するには
ExUnit2025年9月20日アーカイブページのページタイトルをわかりやすい表示にカスタマイズ
カスタマイズ2025年8月31日スクロールして表示されたときにアニメーションが始まるカスタマイズ例②
カスタマイズ2025年8月31日スクロールして表示されたときにアニメーションが始まるカスタマイズ例①
WordPress のトラブル解決・設定・カスタマイズ
ベクトル公式テクニカルパートナー
があなたをお手伝いします
Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。
PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。
