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を指定したリンクも登録できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ