izumikun.com

Still Alive. Be Happy.


スノモンのタブ機能を使って、英語版のブログも書くことにした。

どうも、生まれてから9691日目を生きているizumikunです。

今回は、web制作の実案件のなかで

izumikun

スノモンの「タブ機能」って、めちゃくちゃ便利じゃん!

って思ったので、今回は簡単にシェアしてみようと思います!では、さっそく。

スノモンとは「Snow Monkey」というワードプレステーマのこと。「インブラウザデザイン」という方法でホームページ制作をするのに今注目のツール。

そんなスノモンの機能「タブブロック」について解説します。

タブブロックってこんな感じ。

まずはサンプルを触ってみてね。

サンプル

サンプルサンプルサンプル

これをつくっていきます。

タブブロックの作り方

「/タブ」と入力すると

と表示されるので「タブ」を選択。
出てくるのが、こちら。

  • タブの「名前の変更」
  • タブの「位置の入れ替え」
  • タブの「追加」
  • タブに「ブロックの追加」

これを組み合わせることで、タブブロックをつくることができます。

タブブロックでできること

タブブロックを使う1番の大きなメリットは、同じページの中で情報を整理することができる点です。

通常であれば「固定ページ」ごとに整理しなければいけない情報も「タブ」を使うことで、同じページ内で整理をして、ローディングの負担もなく表示させることができます。

例えば、

  • 「カテゴリ別」や「投稿タイプ別」での、最新の投稿を表示させることができます。
  • 日本語と英語の2パターン表示(izumikun.comではこの使い方をしています)
  • あるいは、トップページ全体にタブを展開させてメニューのように扱うこともできます。

タブの設定

スタイル設定

3つのスタイルを設定できます。

  • デフォルト
  • シンプル
  • ライン

サンプルはこちら。

これは「デフォルト」スタイル。

これは「シンプル」スタイル。

これは「ライン」スタイル

ブロック設定

タブの向き

2つの「タブの向き」を設定できます。

  • 水平
  • 垂直

サンプルはこちら。

タブの向き「水平」

タブの向き「垂直」

タブの配置

タブの向きが「水平」のときだけ、タブの配置を4タイプ選ぶことができます。

  • 中央
  • 均等

タブの配置「左」

タブの配置「中央」

タブの配置「右」

タブの配置「均等」

この中で「均等」は、トップページで使うことでメニューを拡張させるような使い方ができます。

おわりに

今回は、スノモンの「タブ機能」について解説しました。izumikunはこれから「英語学習」をしていこうと考えているので JP / EN でタブ切り替えをして表示させられるように「タブ機能」を活用していきます。

ぜひ、使ってみてくださいね!
EN もみてみてね。

それでは、また。