WordPressのグローバルナビを均一(同じ幅)で表示してヘッダーを整頓CSS標準装備のDigipress設定方法

WordPressのグローバルナビを同じ幅でCSS表示

WordPressのヘッダー部分にはデフォルトでメニューリンクがあります。

いわゆるグローバルナビの部分です。

このグロナビの部分を全て同じ幅にすることでサイトの見やすさやサイト内の誘導がずいぶん変わってくるものです。

グローバルナビを均一幅にする方法

WordPressの管理画面から簡単に設定できます。

まずがデフォルトのWordPress管理メニューにある

外観 → メニューを開いてグローバルナビのリンク先を設定しておきます。

ここ、ほったらかしだと固定ページへのリンクしか無い状態です。

ちゃんと設定すれば普通のWordPressテンプレートなら好きなリンク先設定を反映出来るものです(出来ないものもありますが、、w)

WordPressグロナビ管理画面

これですね。

さらに

表示オプションの「説明」にチェックを入れて

グロナビを2段デザインへ

表示オプションというのが管理画面上部にあるので、こちらを開き「説明」にチェックを入れます。

するとグローバルナビのリンクテキスト部分に加えて、その下にリンクのサブタイトルを入力出来るようになります。

これが出来ればコーポレートサイトなんかの場合、とても見やすさがアップしてデザインが洗練された雰囲気にかわりますよね。

※Digipress専用CSS(全てのデジプレスで設定可能です)

グローバルナビの表示幅を均一化する設定方法

グロナビの幅を均一化設定方法

WordPressのグロナビってどのテーマ使ってもこの図の上のメニューみたいに左寄せになってしまいますよね。

これだと右側が大きく余ってなんだか寂しい感じがします。

僕は血液型がA型なんでこういうのちょっと苦手なんですよね(笑)。

DigipressのCSSで一発で幅を同じにする方法

デジプレスのグロナビCSSでこれがデジプレスの管理画面(専用)です。

デジプレスを使ってる方なら見慣れた設定画面ですね。

WordPressの管理画面で

「Digipress」→「詳細設定」→「サイトヘッダー表示設定」

を選択します。

すると上の図のようなチェックポイントが出てきますので「各メニューの幅を自動調整(全体幅に合わせて均一化」へチェックを入れます。

これでWordPressのグローバルナビ部分のメニューリンクが全てキレイに同じ幅で表示されます。おまけでサブタイトル付きの2段メニューになってます。

スマホ同時対応

レスポンシブデザインのCSSが組まれているのでスマホで表示する際は折りたたまれたグロナビになってます。menuというアイコンをクリックすればここで設定したリンクが開いて展開される仕組みになっています。

この機能が有り難いのでやたらとデジプレスを使ってしまいます。

ホント有り難いデザインコントロール、細部まで気が利いてますね。

デジプレスの解説ページへ戻る方はこちら