BiNDの使い方

タブのスライド形式の事

情報を横軸でも表現出来る私イチオシ機能の設定方法をご説明致します。

初級

img_0
ご無沙汰していまい大変申し訳御座いません。
花粉飛散ピーク時季に因り絶賛パフォーマンス低下中のコウです。
BiND7リリース準備に忙殺されておりましたが、漸く一段落付きましたのでブログを再開したいと思います。

BiND7はお手元に届いておりますでしょうか。
開発やプロモーションの裏話など考えていたのですが、いち早く便利機能をお伝えするのが先決かと思いまして、今回はFacebookページでも予告した通り『タブのスライド形式』について紹介したいと思います。
順次デザインチームのメンバーからもBiND7新機能の紹介記事が更新されるかと思いますので是非チェックしてくださいね。

『タブのスライド形式』は、オカベ調理・撮影、フクオカデザインによるサンプルサイト『Okaキッチン』で既に何度かお披露目されております。

この機能を用いたきっかけは、LiVE for WebLiFE*の製品サイトでした。
元々LiVEは多くの情報を扱うのは得意ではないのですが、どうしても1スライドにまとめなければいけない要件があり、jQueryソースを組込んで実装しました。
その時は結構大変な思いをしたのですが、実際BiNDでも簡単に組込めたら便利かと思い、その後開発リーダーのシガさんにお願いし続け漸く搭載された構想1年半越しの(私の)待望の機能です。
開発者サイドでは”コウタブ”と呼ばれ、その名残からCSS内に”cohtab”と云うスタイル名が施されております。

img_3
さて、先ずは基本的な使い方から。
『段落のスタイル』の”タイトル”を充てた部分がボタンになります。”タイトル”以外は全て内包される要素になります。

img_1

要素を構成したら『ブロックエディタ』⇒『設定』のブロックレイアウトの中から『タブ』を選択。オプションの中から『スライド形式(ロールオーバー)』を選択すれば設定完了です。

img_2
BiNDの機能を使って好きに構成出来ますので、例えば画像はもちろん、ムービーをスライドさせたり、表組や少々複雑なレイアウトを作る事も可能です。
SHiFTのスライドだと画像や簡単なキャプションに限定されてしまいますが、『タブのスライド形式』ならもっと多くの要素で構築する事が出来ます。



通常上の様な情報量をタブを使わずに縦に積むと、単純に5倍の高さを取ってしまいます。
『タブのスライド形式』によって、縦と横の概念で情報を設計する事が可能になります。

アイディア次第で様々な応用が利く、非常に使い勝手の良い機能ですので、是非お使い下さい。

コメントを開く

※BiNDの操作に関するお問い合わせは、サポートセンターで受け付けております。

●すでに製品をお持ちの方のテクニカルサポート:https://mypage.digitalstage.jp/
●ご購入前のお客様:contact@digitalstage.jp

ブログの投稿に関係のないご質問や、公序良俗に反する内容、誹謗中傷、広告行為、著作権侵害等のメッセージは掲示いたしかねますのでご了承ください。
  • コウ 2014/07/07[Mon]

    choa 様 一応CSSを <style type="text/css">.active{background:none !important;}</style> の様に書けば消える事は確認したのですが、他に影響が無いかまで確認出来ておりませんので、お気をつけ下さい。ちなみに上記ソースをコピーして貼付けた際にダブルコーテーション「"」が全角化されてしまいエラーが起こるケースがあります。お手数ですが、貼付けた後に打ち直してご確認ください。backgroundに対して背景色を指定すれば任意の色にする事も可能かと思います。

  • choa 2014/07/03[Thu]

    こんにちは。
    便利な機能ができてるんですね!

    このマウスオンした時に出てくる、灰色の枠をCSS設定で消せる方法はあるのでしょうか〜。(もしくは、色を変える方法など…)
    あれば、教えていただきたいです!

  • コウ 2014/04/04[Fri]

    ojisan 様 タブ関連の機能はまだまだポテンシャルを秘めていると思いますので、改良次第でもっと使い勝手が向上しそうですね。
    確かにロールオーバー時の設定が出来るともっと便利になりそうです。CSSを調整すればロールオーバー背景を消す事は出来ますが、BiND側で簡単に設定出来ると良いですよね。

  • ojisan 2014/04/03[Thu]

    すごく使える機能だと思います。
    以前はLIVEを使って同じ物作っていましたが、
    こちらは編集の幅があるので使い勝手良しですね。
    タブをマウスオンした時のロールオーバー(?)は
    設定で簡単に消せるようにしていただけると
    さらに大助かりです。