Joomla!, Microsoft Word, etc.

Joomla!

Page Break PluginでSlider(Accordion)表示

Detail
Written by: fuku-chang
Category: Joomla!
Page Break PluginでSlider(Accordion)表示

Joomla! CoreのPage Break Pluginを使用して、Sliderを使用したページを構成します。

概要

  • Joomla! CoreのPage Break PluginはArticleにTOC(Table of Contents / 目次)やTab(タブ）、そしてSlider(スライダー)の3種のUIを施します
  • Webデザインにおいて、一般的にSliderといえばCarousel(カルーセル)を指すようです
    • Carouselとは多くのサイトでページトップに配置される、目を引く大きな画像が自動的に又はユーザーによる操作で右から左へスライドするコンテンツです
    • ところで、わたくしの年代ではカルーセルと言えばカルーセル麻紀さんですが、Wikipediaによれば、デビュー当時に勤めていたゲイバーの店名「カルーゼル」が由来だそうです
      • ゲイバーで回転木馬とはなんとも洒落た店名です
  • これに対し、Joomla! CoreのPage Break PluginにおけるSliderは、テキストをクリックすることで隠れているコンテンツを表示したり、再び非表示にしたりするUIを指します
  • 最近のWebデザインのトレンドはモバイルファーストのレスポンシブデザインです
  • Mobile表示でも見やすい、Sliderを当サイトのAboutページに使用してみました

参照

設定

  • ArticleにSlider(Accordion)を設定する手順は次のとおりです

Page Break Pluginの設定

  1. System > Manage > Pluginsをクリックします
  2. Search BoxにPage Breakと入力して検索ボタンをクリックします
    Search BoxにPage Breakと入力して検索ボタンをクリック
  3. Content - Page Breakをクリックします
    Content - Page Breakをクリック
  4. Plugins: Content - Page Break >  Plugin tabが表示されます
    Plugins: Content - Page Break >  Plugin tabが表示
  5. Presentation Style: Slidersに変更します
    Presentation Style: Slidersに変更
  6. Save ＆ Closeをクリックします
    Save ＆ Closeをクリック
  • Presentation Style以外のオプションはPresentation Style: Pagesの際、すなわち目次を表示する際に有効となるオプションです

ArticleにPage Breakを挿入

  1. Page Breakを挿入するArticleを開きます(本稿では、Aboutページの「f-labs.jpについて」)
    Page Breakを挿入するArticleを開く
  2. Page Breakを挿入したい箇所(区切りたい箇所)の前の要素(下図ではh3要素の前のhr要素(Rad more)の末尾にカーソルを移動し、Insert Page Breakボタンをクリックします
    Page Breakを挿入したい箇所の前の要素の末尾にカーソルを移動し、Insert Page Breakボタンをクリック
  3. Insert Page Break > Table of Contents AliasにSliderの見出しとなるテキストを入力します
    Insert Page Break > Table of Contents AliasにSliderの見出しとなるテキストを入力
    • Sliderの場合、Page Titleは不要です
  4. Insertをクリックします
  5. Page Breakを挿入したい箇所に上記手順を繰り返します

Slider表示結果

  • Slider表示結果を確認します

参考

Pages (目次)

  • Presentation Style: Pagesの場合、目次をページ上部に表示します
    目次表示
  • 表示デバイスがMobileの場合も同様の表示のため、使い勝手はよくありません
  • 各オプションの動作は次のとおりです
    Page Break Plugin Option
  1. Plugins: Content - Page Break >  Plugin tab > Site Title: Show
    • Article Titleの後ろにハイフンに続いてInsert Page Break > Page Titleで入力したテキストを追加します
  2. Plugins: Content - Page Break >  Plugin tab > Article Index Heading: Show
    • 目次テーブルの上部に見出しを表示します
    • Custom Article Index Headingが空欄の場合は、デフォルトでArticle Index (en-GB) / 記事インデックス (ja-JP)と表示されます
    • Custom Article Index Headingにテキストを指定した場合、そのテキストが表示されます
  3. Plugins: Content - Page Break >  Plugin tab > Table of Contents: Show
    • 目次を表示します
    • Table of Contents: Noの場合、下部にページ移動のナビゲーションが表示されます
  4. Plugins: Content - Page Break >  Plugin tab > Show All: Show
    • 最後の見出しにAll Pages (en-GB) / 全ページ (ja-JP)のリンクを追加します
    • リンクをクリックするとページ全体が表示されます

Tabs (タブ)

  • Presentation Style: Tabsの場合、タブ表示となります
    タブ表示
  • 表示デバイスがMobileの場合、Sliderに近い表示となります

注意点

  • 上記のとおり、Presentation StyleをPluginのオプションとして指定する仕様のため、Pages, Sliders, Tabsの設定がサイトのすべてのArticleに反映され、Article毎に指定することができません