ある ワードプレス テーマの中で。ブロックシー 柔軟で軽量、高度なカスタマイズが可能です。モバイルデザインにおいて、BlocksyのMobile Headerは優(yōu)れたパフォーマンスを発揮し、明確に構成されたインターフェイス、Off Canvasスライドアウトメニューのサポート、多様な要素管理、様々なビジュアルコントロール機能を備えています。この記事では、Mobile Headerの設定方法、Off Canvasエリアの適用方法、高度な機能の詳細について紹介します。

I. モバイルヘッダー設定を入力する

モバイルヘッダーの設定を開始する：

• 入り込む ワードプレス バックエンドで「外観」>「カスタマイズ」を開く；
• ヘッダーエリアに行く；
• 下部にあるタブレット/モバイルビューに切り替える；
• デフォルトの表示はフラットビューで、比較的広いインターフェイスでも操作しやすい。

全體的な構成はデスクトップ版と同じで、3行レイアウトを採用している。

第二に、モバイルで利用可能な要素とレイアウト?ロジック

モバイルページは、要素構成の面で最適化されます。例えば、デスクトップではよく使われるが、小さな畫面では意味をなさないコンポーネントが隠されたり、置き換えられたりする。最も重要な変更のひとつが導入された：

• トリガー(Trigger)要素：クリックされるとOff Canvas領域が拡張され、ナビゲーションのエントリーポイントとなる。

ブロックジー?プレミアム?ユーザーの場合、メニューをヘッダーに直接挿入することもでき、トリガー構造をスキップして作業(yè)効率を向上させることができる。

III.オフキャンバスエリアの機能詳細

オフキャンバスは、メニューボタンがクリックされたときにスクリーンの端からスライドしてカスタムコンテンツのメニューを表示する領域です。

対応するコンポーネントは以下の通り：

• HTML こっかい
• ソーシャル?アイコン
• カスタマイズボタン
• モバイルメニュー

セットアップには以下が含まれる：

• 表示モード：フルスクリーンマスクまたはサイドスライド表示をサポートします；
• コンテンツの配置：上部、中央、下部のいずれか；
• スタイル設定：色、グラデーション、パターン背景などのパラメータを調整できます。

コンテンツは、モバイルの閲覧スタイルに合わせて縦に配置されている。

IV.モバイルメニューの設定（モバイルメニュー）

メニューはオフキャンバスエリアに配置するか、ヘッダーに直接挿入することができます。

スタイルを提供する：

• レギュラースタイル；

• セパレーション?スタイル（ボーダーとホワイトスペース付き）；

サブメニューの折りたたみ機能をサポートし、初期狀態(tài)ではサブメニューは非表示で、親アイテムをクリックすると展開されます。常に展開されるように設定することもできます。

ブロックシー?プレミアムには、ヘッダー行に挿入できるコンパクトなメニュー機能があり、少數(shù)のコアページエントリーを表示するのに適しています。

V. トリガー（トリガーボタン）の設定

トリガーは、オフキャンバスエリアの表示をコントロールするスイッチで、モバイルに追加する必要があります。フッターあるライン。

その特徴は以下の通り：

• アイコンは3種類から選べる；
• ボタンのスタイルをカスタマイズする；
• ラベルテキストを表示するかどうか；
• フォントとカラースタイルの調整；

は、モバイルページにおけるインタラクションの核となるコンポーネントのひとつである。

VI.デスクトップオフキャンバス機能（プレミアム）

アドバンス?バージョンでは、デスクトップでのキャンバス?エリアの呼び出しもサポートしています。レイアウトロジックはモバイルと同じですが、より大きな畫面表示に適応しています。

補助的な配置が可能メニューソーシャルリンクやインフォメーションモジュールで、すっきりとしたページレイアウトを。

VII.透明ヘッダーとスティッキーヘッダーの設定

モバイルのヘッダーには、透明度と粘著性のコントロールがあります：

• スティッキー?ヘッダーページスクロール時に上部に固定されます；
• 透明ヘッダーページ上部の背景が畫像や動畫の場合に適しています；

これら2つの機能はデスクトップとは関係なく、獨立して有効にすることができる。

概要

ブロックシー モバイルヘッダーデザインは明確に構成され、柔軟で調整しやすく、様々なシナリオのモバイルディスプレイのニーズに合わせることができます。シンプルなナビゲーションバーでも、高度なスライドアウトメニューでも、Blocksyはモバイルサイトレイアウトの強固な基礎を築くのに十分なモジュールと設定オプションを提供します。

モバイルサイトのナビゲーションを構築するなら、Blocksyのモバイルヘッダーモジュールを試してみてください。

最近の更新

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み