どうも、生まれてから9691日目を生きているizumikunです。
今回は、web制作の実案件のなかで
スノモンの「タブ機能」って、めちゃくちゃ便利じゃん！
って思ったので、今回は簡単にシェアしてみようと思います！では、さっそく。
スノモンとは「Snow Monkey」というワードプレステーマのこと。「インブラウザデザイン」という方法でホームページ制作をするのに今注目のツール。
そんなスノモンの機能「タブブロック」について解説します。
タブブロックってこんな感じ。
まずはサンプルを触ってみてね。
サンプル
サンプルサンプルサンプル
これをつくっていきます。
タブブロックの作り方
「/タブ」と入力すると
と表示されるので「タブ」を選択。
出てくるのが、こちら。
- タブの「名前の変更」
- タブの「位置の入れ替え」
- タブの「追加」
- タブに「ブロックの追加」
これを組み合わせることで、タブブロックをつくることができます。
タブブロックでできること
タブブロックを使う１番の大きなメリットは、同じページの中で情報を整理することができる点です。
通常であれば「固定ページ」ごとに整理しなければいけない情報も「タブ」を使うことで、同じページ内で整理をして、ローディングの負担もなく表示させることができます。
例えば、
- 「カテゴリ別」や「投稿タイプ別」での、最新の投稿を表示させることができます。
- 日本語と英語の２パターン表示（izumikun.comではこの使い方をしています）
- あるいは、トップページ全体にタブを展開させてメニューのように扱うこともできます。
タブの設定
スタイル設定
３つのスタイルを設定できます。
- デフォルト
- シンプル
- ライン
サンプルはこちら。
これは「デフォルト」スタイル。
これは「シンプル」スタイル。
これは「ライン」スタイル
ブロック設定
タブの向き
２つの「タブの向き」を設定できます。
- 水平
- 垂直
サンプルはこちら。
タブの向き「水平」
タブの向き「垂直」
タブの配置
タブの向きが「水平」のときだけ、タブの配置を４タイプ選ぶことができます。
- 左
- 中央
- 右
- 均等
タブの配置「左」
タブの配置「中央」
タブの配置「右」
タブの配置「均等」
この中で「均等」は、トップページで使うことでメニューを拡張させるような使い方ができます。
おわりに
今回は、スノモンの「タブ機能」について解説しました。izumikunはこれから「英語学習」をしていこうと考えているので JP / EN でタブ切り替えをして表示させられるように「タブ機能」を活用していきます。
ぜひ、使ってみてくださいね！
EN もみてみてね。
それでは、また。