LP作成ソフトほか|LPKIT for WordPress

WordPressでLP(ランディングページ)作成できる便利なテンプレートやホームページ作成ソフトなど


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というアイコンをクリックすればここで設定したリンクが開いて展開される仕組みになっています。

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

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

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

LP作りやすいテーマ3選

WordPressテーマをインストールするだけで、1カラムのLPが作りやすい人気のテーマ一覧です。こちらの3つが特に使いやすいです。

カラフルColourfulの煽り機能で顧客へ売り込む

LP作成専用として使うならこれ。カウントダウンタイマーや目立ちすぎるほどの見出しデザインなどが予め用意されており、初心者でも威力のあるLPを作りやすいロングセラーの人気テーマ。

ペラプレートProでシンプルLPを量産する

シンプルな操作性と低価格が魅力のLP専用WordPressテーマ。こちらもロングセラー人気テーマです。よく使うボタンや目立つ見出しなどあらかじめインストールされたショートコードの使い勝手は随一。とても便利なテーマです。

WING(AFFINGER5)でブログもLPも同時運営

既存のWordPressサイトの好きなページを1カラムにしたりヘッダーのないLPにしたり、そのままSEOに有効な記事ページにしたりと自由自在のテーマ。個別の投稿ページも固定ページもどのページもLPにできて同時に他のページでブログも運営できる「非常に優れたWordPressテーマ」です。

-Tips, WordPress, レスポンシブデザイン
-, , , , ,

Copyright© LP作成ソフトほか|LPKIT for WordPress , 2018 All Rights Reserved.