Cocoonタブブロックのgrayishスタイル見本

Cocoon ver2.7.3で追加されたタブブロックについて、grayishのスキン独自スタイルを追加しています。

投稿や固定ページの他に、フロントページでも効果的に使用できるようにバリエーションを考えてみました。

デフォルトスタイルの他のスタイルは、タブブロックの追加CSSクラスに該当するクラス名を入力していただくことで、使用可能です。

タブブロックの呼び出し方法

Cocoonブロックから呼び出したり、
段落ブロックで「ブロックを選択するには「/」を入力」と表示されたいる状態で「/tab」などと入力すると
簡単にタブブロックを呼び出せます。

横スクロールタイプ

Cocoonのタブブロックの仕様により、タブを増やしていった時、メインカラム幅を超える場合やモバイル時はタブのラベル下に横スクロールバーが出現します。

ブラウザや端末によってスクロールバーの形状、表示位置が少々異なります。

1．デフォルトスタイル

grayishでタブブロックを呼び出すと、デフォルトで以下の下線付きスタイルになります。

Cocoon ver2.7.3でのgrayish仕様変更のお知らせ記事と同様な内容ですが、以下に再掲します。

• タブのタイトル（タブ１，タブ２の欄に入力するテキスト）については、テーマカスタマイザーで設定した英字フォントが当たります。
  ※日本語はCocoon設定のサイトフォントになります。
  ※全スタイル共通仕様です。
• 選択中のタブの下線のカラーは、テーマカスタマイザーの「メインアクセント 一番明るい青色」で設定しているカラーになります。
• タブはどんどん増やせます。メインカラム幅を超える場合やモバイル時は、横スクロールタイプになります。
  ※Cocoonの仕様です。
  ※以下に紹介するスタイルでは、横スクロールしないタイプもあります。

デフォルトスタイルのサンプル

デフォルトスタイルのサンプル（※タブの数を多くしたサンプル）

2．上線スタイル

デフォルトスタイルの下線が、上につくタイプになります。

選択中のタブの上線のカラーは、テーマカスタマイザーの「メインアクセント 一番明るい青色」で設定しているカラーになります。

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-up

と入力します。

追加CSSクラスの入力方法
以降に続く他のスタイルも同様です

上線スタイルのサンプル

上線スタイルのサンプル（※タブの数を多くしたサンプル）

3．ラベルスタイル

選択中のタブのラベルと下線が色付きになるタイプになります。

ラベルと下線の色は、以下サンプルの色になります。（※色を変える場合は子テーマCSSでカスタマイズ）

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style

と入力します。

ラベルスタイルのサンプル

ラベルスタイルのサンプル（※タブの数を多くしたサンプル）

4．ラインスタイル

タブのラベルの間をグレーのラインで区切るタイプです。
また、タブのコンテンツの上下にも同じグレーのラインが付きます。

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-line

と入力します。

ラインスタイルのサンプル

ラインスタイルのサンプル（※タブの数を多くしたサンプル）

5．円スタイル

タブのラベルに円みをもたせたスタイルです。背景も色付きになります。
ラベルや背景の色は、スキン指定の色になります。（※色を変える場合は子テーマCSSでカスタマイズ）

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-cir

と入力します。

円スタイルのサンプル

円スタイルのサンプル（※タブの数を多くしたサンプル）

均等配置タイプ

横スクロールせずにラベルを均等に配置するタイプです。

タブの数が２，4個などの少なめの偶数の場合を想定しています。
※タブの数を３個にしたい場合は、以降で紹介している３の倍数タイプをおすすめします。

均等配置にするには、以下デフォルト〜円スタイルそれぞれについて、追加CSSクラスに

gray-tab-label-equal

を追加します。

1．デフォルトスタイル

デフォルトスタイルの場合は、追加CSSクラスに

gray-tab-label-equal

を入力します。

デフォルトスタイル＋均等配置のサンプル

デフォルトスタイル＋均等配置のサンプル（ラベル３つの例）
ラベルの数が３の場合、画面幅1023px以下の折り返し時に見た目が少々微妙になると思います。

デフォルトスタイル＋均等配置のサンプル（ラベル4つの例）
画面幅1023px以下の折り返し発生時にラベル２つずつ、折り返します。

2．上線スタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-up gray-tab-label-equal

と入力します。※クラス名の間は半角スペースを入力します。

上線スタイル＋均等配置のサンプル

3．ラベルスタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style gray-tab-label-equal

と入力します。※クラス名の間は半角スペースを入力します。

ラベルスタイル＋均等配置のサンプル

4．ラインスタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-line gray-tab-label-equal

と入力します。

ラインスタイル＋均等配置のサンプル

5．円スタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-cir gray-tab-label-equal

と入力します。

円スタイルは画面幅が小さくなって、ラベルテキストの折り返しが発生するとラベルの高さが大きくなる為、均等配置にはあまり向かないタイプかな〜と思っています。
（横スクロールタイプの方が向いているかも・・・）

円スタイル＋均等配置のサンプル

円スタイル＋均等配置のサンプル
※画面幅1023px以下の表示をご確認ください

均等配置+PC時のみ中央寄りタイプ

均等配置のオプションです。

フロントページでタブブロックを使用する場合などを想定しています。

PC時のみ中央寄りタイプにするには、以下デフォルト〜円スタイルそれぞれについて、追加CSSクラスに

gray-tab-label-equal –pc-center

を追加します。※クラス名の間は半角スペースを入力します。

デモサイトの使用例

1．デフォルトスタイル

デフォルトスタイルの場合は、追加CSSクラスに

gray-tab-label-equal –pc-center

を入力します。

デフォルトスタイル＋均等配置+PC中央寄りのサンプル

2．上線スタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-up gray-tab-label-equal –pc-center

と入力します。※クラス名の間は半角スペースを入力します。

上線スタイル＋均等配置+PC中央寄りのサンプル

3．ラベルスタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style gray-tab-label-equal –pc-center

と入力します。※クラス名の間は半角スペースを入力します。

ラベルスタイル＋均等配置+PC中央寄りのサンプル

4．ラインスタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-line gray-tab-label-equal –pc-center

と入力します。

ラインスタイル＋均等配置+PC中央寄りのサンプル

5．円スタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-cir gray-tab-label-equal –pc-center

と入力します。

円スタイル＋均等配置+PC中央寄りのサンプル

均等配置+３の倍数タイプ

均等配置のオプションです。

タブの数3つ、という使用方法はフロントページでもよくあるかも？と思って用意しました。

６，９個のタブの、、という使い方はあまりないのかな、と思います。
タブの数が多い場合は横スクロールタイプの方が適しています。

３の倍数タイプにするには、以下デフォルト〜円スタイルそれぞれについて、追加CSSクラスに

gray-tab-label-equal –odd

を追加します。※クラス名の間は半角スペースを入力します。

1．デフォルトスタイル

デフォルトスタイルの場合は、追加CSSクラスに

gray-tab-label-equal –odd

を入力します。

デフォルトスタイル＋均等配置+3の倍数タイプのサンプル

デフォルトスタイル＋均等配置+3の倍数タイプのサンプル
※タブラベルの数6つの場合の例
画面幅1023px以下ではタブラベル3つ毎に折り返しします。

2．上線スタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-up gray-tab-label-equal –odd

と入力します。※クラス名の間は半角スペースを入力します。

上線スタイル＋均等配置+3の倍数のサンプル

上線スタイル＋均等配置+3の倍数タイプのサンプル
※タブラベルの数6つの場合の例

3．ラベルスタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style gray-tab-label-equal –odd

と入力します。※クラス名の間は半角スペースを入力します。

ラベルスタイル＋均等配置+3の倍数のサンプル

ラベルスタイル＋均等配置+3の倍数タイプのサンプル
※タブラベルの数6つの場合の例

4．ラインスタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-line gray-tab-label-equal –odd

と入力します。

ラインスタイル＋均等配置+3の倍数のサンプル

ラインスタイル＋均等配置+3の倍数タイプのサンプル
※タブラベルの数6つの場合の例

5．円スタイル

タブブロックを選択し、ブロックのサイドメニューの「高度な設定」＞「追加CSSクラス」に

gray-tab-style-cir gray-tab-label-equal –odd

と入力します。

円スタイル＋均等配置+3の倍数のサンプル

円スタイル＋均等配置+3の倍数タイプのサンプル
※タブラベルの数6つの場合の例

さいごに

タブブロックの追加スタイルについてご紹介しました。

タブのラベル数や、ラベルテキストの長さによって適しているタイプが異なってくると思いますので、お好みでご利用いただければと思います。

また、パターンで作成しておけば、ウィジェットに設置するなど色々な活用方法があると思います。

最後に一点、ご注意いただきたい点があります。

タブブロックの中に、さらにタブブロックを入れ子にして使用する方法は想定しておりません。

現時点では、入れ子にして使用するとブロックの動作がおかしくなることがあると思いますので、ご注意ください。
テーマ開発者様には、報告済みです。
今後のバージョンで対策をされるとのことでした。

この記事は以上です。