WordPressテーマ「ストークSE」ご購入はこちら

タブブロックの使い方(ver.1.16より追加)

タブブロックの使い方

STORK SEのカスタムブロック(STORK BLOCKS)「タブ」は、複数のコンテンツをタブ形式で切り替え表示できるブロックです。

タブ項目内には画像や文章、投稿リストなどのブロックを設置でき、コンテンツの分類表示や比較などに活用できます。

このブロックはver.1.16で追加されました。

タブブロックの表示例

▼デザイン:シンプル

これはタブ1のコンテンツです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

これはタブ2のコンテンツです。

これはタブ3のコンテンツです。 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

▼デザイン:ボックス

これはタブ1のコンテンツです。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

これはタブ2のコンテンツです。

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

これはタブ3のコンテンツです。

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

▼デザイン:下線

これは最初のタブのコンテンツです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

これは2番目のタブのコンテンツです。

ページ読み込み時に表示させるタブ項目を設定できます。

これは最後のタブのコンテンツです。 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

▼デザイン:プレーン

これは最初のタブのコンテンツです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ページ読み込み時に表示させるタブ項目を設定できます。

これは3番目のタブのコンテンツです。

これは最後のタブのコンテンツです。 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

タブブロックの使い方

タブブロックの使い方について説明します。使い方のイメージとして、下記の動画もご覧ください。

このブロックを追加する方法

このブロックをコンテンツに追加するには、以下の2通りの方法があります。

  1. ブロック挿入ツールで「タブ」を検索して追加
  2. エディタ(ビジュアル編集)に/tabを入力して追加

タブラベル名を変更する

タブ項目の「タブラベル:」欄に入力したテキストがタブラベルに反映されます。

タブ項目の追加と並び順の変更

タブブロックを選択した状態で「+タブを追加」ボタンでタブ項目(子ブロック)を追加できます。

また、タブ項目(子ブロック)を選択した状態で「上(下)に移動」でタブの並び順を入れ替えることができます。

リストビューでタブ項目(子ブロック)をドラッグアンドドロップで並び順を入れ替えることもできます。

タブ設定

デザインタブの表示タイプを選択できます。
シンプル / ボックス / 下線 / プレーン
初期表示タブページ読み込み時に表示しておくタブ項目を選択できます。
タブの配置(PC / スマホ)タブラベルの配置スタイルを選択できます。
テキストに合わせる / 均等分 / 半等分(固定幅50%) / 四等分(固定幅25%)

色の設定

タブラベルの背景色と文字色は、カラーピッカーで自由に変更できます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

▼投稿下部のウィジェットエリア

▼投稿下部のウィジェットエリア

さらに洗練された
究極のモバイルファーストテーマ

WordPressテーマSTORK SEストークSE

これまでに5万回以上ダウンロードされたWPテーマのシリーズ最新版「STORK SE」です。さらに洗練されたデザイと機能で「誰が使っても美しいデザイン」のサイトを作成できます。