Web Tips：ナビゲーション
スマートフォンサイトにアコーディオンメニューを実装する
メニューが開閉するアコーディオンメニューはスマートフォンサイトでよく見かけます。プラグインもたくさんありますが、それらを使わないでもシンプルなコードで実装できますので、基本的な作成方法を解説します。
スマホページにタブ切り替えをプラグインを使わず実装する
表示内容を瞬時に切り替えるタブメニューは、限られた画面サイズの中に多くの情報を持たせることができ、ページ切り替え時のHTTPリクエストによるオーバーヘッドも削減できるため、スマホページには有効な手段となります。
スライドメニューのプラグインを使わない実装方法
メニューボタンをタップすると横からメニューが出てくるスライドメニューは、画面サイズの小さいスマートフォンに適したメニューです。スライドメニューをプラグインを使わないで実装する方法を解説します。
フレキシブルボックス(Flexbox)を使い柔軟なレイアウトを組む
CSS3の仕様であるフレキシブルボックスを使えば、柔軟なボックスレイアウトを組むことができます。親要素の横幅一杯に伸縮しながら複数の項目が均等配置するようにできますので、スマートフォンサイトやレスポンシブWebデザインの実装に便利な機能です。
display: table を使って要素を表組みのように均等配置する
CSSのプロパティ「display: table」を指定すると、テーブル構造で要素が配置されます。floatプロパティのようなpaddingやboderの計算に気を使う必要もなく、すべてのカラムは高さが揃えられてカラム落ちしないレイアウトを実現できます。
display: inline-block を使って要素を横並びにする
CSSのプロパティ「display: inline-block」は要素を横並びにできる上、幅や高さを指定できる非常に便利な設定です。floatを使わなくても項目を横並びにできるため、メニューやナビゲーションで利用すると効果的です。
階層構造を持つドロップダウンメニューの作成方法
Webサイトのグローバルナビゲーションでは、メニュー項目にマウスオーバーすると、サブメニューが下に展開するドロップダウン式階層メニューとなっていることがあります。
メニューをリストタグで記述しCSS設定で実装する方法を解説します。
プラグインWP Page Numbersでページナビゲーションを設置する
WordPressでページ送りをするプラグイン「WP Page Numbers」の使い方を解説します。
ページナビゲーションのプラグインとしては、WP-PageNaviが有名ですが、WP Page Numbersも簡単な設定でページネーション機能を実現できます。
jQuery UIを使ってタブメニューを実装する
タブメニューを実装するには、jQuery UIのコンポーネントWidgets Tabsを使うと簡単にできます。ただし、WordPressで実装するには少し注意が必要です。WordPressにはjQuery本体とjQuery UIもパッケージングされていますが、独自仕様のjQueryになっています。
WP SiteManagerを使ってパンくずナビを表示する
WordPressサイトでパンくずナビを出力するには、プラグインを利用するのが最も簡単です。
パンくずナビ出力機能を持ったプラグインはたくさんありますが、ここではこのサイトでも利用している「WP SiteManager」を使う方法を解説します。
WordPressでカスタムメニューを利用する
WordPressのカスタムメニュー機能を利用すると、メニュー項目を管理画面から登録・編集できて大変便利です。登録できる項目は、固定ページ、カテゴリー、カスタム分類、タグ、投稿などWordPressで作成したページだけでなく、任意のURLを指定したリンクも登録できます。
