このエントリーを含むはてなブックマークはてなブックマーク - Panelsをタブですっきり表示(Panels Tabsモジュール) この記事をクリップ!Livedoorクリップ - Panelsをタブですっきり表示(Panels Tabsモジュール) Yahoo!ブックマークに登録 @niftyクリップに追加 FC2ブックマークへ追加 このエントリをつぶやくこのWebページのtweets Googleブックマークに追加 Bookmark this on Delicious Digg This BuzzurlにブックマークBuzzurlにブックマーク Share on Tumblr newsing it! この記事をChoix! FriendFeedで共有

フロントページやデータ量の多いページは、やたらと長いWebページになりがちです。

タブで表示するデータを区分けして表示すれば、すごくすっきりして、サイト訪問者にも見やすくなります。

以前説明した「CCK Fieldgroup Tabs」は、ノードコンテンツで利用する場合でしたが、今回は、PanelsのページをタブですっきりさせてくれるPanels Tabsモジュールです。

Panels Tabsは、パネルのページ、ノード、ミニパネルのいずれでも利用可能です。

モジュールのダウンロードは、Panels Tabsから

なお、Tabsモジュールが有効になっていることが前提です。

Panels Tabsの設定・利用手順

Panels Tabsモジュールをダウンロードしたら、いつものように管理画面のモジュールで有効化します。

パネルを作成します。ページでもノードでも構いません。

パネルコンテンツで、コンテンツを複数追加します。

追加するコンテンツは、VIEWS、ミニパネル、カスタムコンテンツなどなんでもOKです。
コンテンツの追加時に、タイトルを設定します。このタイトルがタブ名として表示されます。追加するコンテンツのタイトルでタブ表示させたい場合は、パネル上でタイトルを設定しなくて良いです。

コンテンツを追加したら、パネルのスタイルを設定します。
パネル内の左上にある、をクリックし、「スタイル」の「チェンジ」を選択(下図)。

スタイルの一覧から「Tabs」を選択します(下図)。

後は、パネルの保存をするだけです。

PS.うまくタブが表示されない場合、jQuery UIモジュール、jQuery UIライブラリーが正しくインストールできていないかもしれません。
正しくインストールできているか確認してみましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トラックバックURL

最新の記事一覧

  • サイト内検索

ページ上部に