BiNDの使い方

ラインチェイサーのカスタマイズ

BiND7の新機能であるモーションメニューのひとつ「ラインチェイサー」をカスタマイズします。上級者向けになってしまいますが、スキルアップしたい方にオススメ!

上級

この記事はBiND7の機能を元に作成した記事です。BiND8以降では正しく動作しない場合があります。

chaser
皆さんこんにちわ!オカベです!

さて今日のテーマはと言うと!BiNDモーションメニューのひとつ「ラインチェイサー」のカスタマイズ方法です!
カスタムCSSになりますので、ちょっと上級者向けになってしまいますが、気になる方は是非ご利用ください!





■ステップ1:メニューカラーの変更
設定>スクリプトと詳細設定 のスクリプト入力欄に下記コードを追記しましょう。
<style type="text/css">
.menu-motion li a { color: #00956E !important; }
</style>
↓マウスオーバーでメニューの動作を確認できます。


赤文字の箇所はお好きなカラーに。これであっという間にメニューカラーが変わります。




■ステップ2:ラインカラーの変更
次はメニューを触ったときに、メニューの上に出るラインのカラー変更です。
ステップ1と同じようにスクリプト入力欄より
<style type="text/css">
.menu-motion ul li.back { border-top-color: #f00080 !important; }
</style>


もちろん、ステップ1と合わせて別々に色を変えることもできます。
<style type="text/css">
.menu-motion li a { color: #00956E !important; }
.menu-motion ul li.back { border-top-color: #f00080 !important; }
</style>





■ステップ3:ラインをアレンジ
▼太さを変更
<style type="text/css">
.menu-motion ul li.back { border-top-color: #f00080 !important; }
.menu-motion ul li.back { border-width: 5px !important; }
</style>


▼形を変更
<style type="text/css">
.menu-motion ul li.back { border-top-color: #f00080 !important; }
.menu-motion ul li.back { border-width: 5px !important; }
.menu-motion ul li.back { border-style: dotted !important; }
.menu-motion ul li.back { border-right: none !important; }
.menu-motion ul li.back { border-left: none !important; }
</style>


一部効果が分かりにくいものもありますが、線の種類は9種類になります。
none none 線なし solid solid 実線 double double 二重線
groove groove 谷型の線 ridge ridge 山型の線 inset inset 凹型の線
outset outset 凸型の線 dotted dotted 点線 dashed dashed 破線
以上が基本のカスタマイズになります。




さらにこれだけでは物足りない方もいるかもしれませんので、応用編もご紹介します!
なんと、オリジナルの画像を使用したラインチェイサー!ラインの代わりに画像を使用します。

※ここでは、「_userdata」を使用します。ご使用方法は記事「_userdataの事」をご覧ください。
<style type="text/css">
.menu-motion li a { color: #ccc !important; }
.menu-motion ul li.back {
border-top: none !important;
background: url([BD:path_userdata]pointer.png) no-repeat center top;
}
</style>





以上です。サイトデザインに合わせて色々カスタマイズしてみてください!

コメントを開く

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

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

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

    オカベ様
    迅速なご回答誠にありがとうございました!早速実験してみます。

  • オカベ 2014/11/20[Thu]

    かみやま様 文字の上にというのは、文字と画像が重なる感じでしょうか?それでしたら、上述の画像を使用するCSS設定【background: url([BD:path_userdata]pointer.png) no-repeat center top;】の【top】を20px(お使いの画像によって調整が必要)など数値設定してください。

  • かみやま 2014/11/19[Wed]

    お世話になります。ラインチェイサーでラインの代わりに、画像を表示させる場合、文字の上に出る様にするにはどのようなコードが必要になりますでしょうか。
    お手数をお掛けしますがご教示よろしくお願い致します。

  • オカベ 2014/11/10[Mon]

    まめ様 新しく記事にまとめさせて頂きましたので、良ければご覧ください。http://blog.digitalstage.jp/tips/2596

  • まめ 2014/11/06[Thu]

    オカベ様  お返事ありがとうございます。再度確認してみます。

  • オカベ 2014/11/06[Thu]

    まめ様
    記述に誤りがあるとエラーが出る事もありますので、恐れ入りますが再度ご確認頂けますでしょうか。また、こちらの件、コメント欄ですと十分な説明が難しいため、近々別記事としてまとめさせて頂きます。その際改めてご覧になって頂ければと思います。宜しくお願い致します。

  • まめ 2014/11/05[Wed]

    オカベ様、早速のご回答ありがとうございます。
    やってみたのですが、うまくいきませんでした。下記の表示が出ました。
    「HTMLを正常に書き出すことができませんでした。」
    xmlException:
    line48
    node:

  • オカベ 2014/11/05[Wed]

    まめ様
    お返事が大変遅くなり申し訳ありません。ドロップバルーンの色変更になります。変更箇所が複数ありますので
    順を追って説明致します。まず【①リンクの色変更】.motion-f .menu-motion ul > li a:hover { color: #カラーコード; }、【②メニュー下▼の色変更】.skin-1 .motion-f .menu-motion ul > li > a + ul > li:first-child:after, .skin-1 .motion-f .menu-motion ul > li > .nolink + ul > li:first-child:after { border-top-color: #カラーコード; }、【③メニュー下▼の色変更:マウスオーバー】.motion-f .menu-motion ul > li:hover > a + ul >li:first-child:after, .motion-f .menu-motion ul > li:hover > .nolink + ul >li:first-child:after { border-top-color: #カラーコード; }、【④サブメニュー文字・背景色】.motion-f .menu-motion ul > li > ul > li a { color: #カラーコード; background-color: #カラーコード; }、【⑤サブメニュー文字・背景色:マウスオーバー】.motion-f .menu-motion ul > li > ul > li a:hover { color: #カラーコード; background-color: #カラーコード; }、【⑥サブメニュー上▲の色変更】.motion-f .menu-motion ul > li > ul li:first-child:before { border-bottom-color: #カラーコード; }、長くなってしまいましたがこちらで一通り変更出来るかと思います。

  • オカベ 2014/11/05[Wed]

    山下様
    1つめのご質問、.skin-1 .menu-motion li a { font-size: 10px !important; } で調整可能です。(!importantをつけてください)。2つめのご質問は、こちらのソースで大丈夫です。ただ、メニューの右側にそれぞれ70pxの余白が入っておりますので、より奇麗にセンター寄せしたい場合はメニュー最後の余白を0にした方が良いかと思います。その場合は、li.btm { margin-right: 0 !important }を追記してください。

  • まめ 2014/11/04[Tue]

    その後、みなさんがお伺いしている「ドロップダウンバルーンの背景色の変更」はいかがでしょうか?

  • 山下 2014/11/03[Mon]

    ラインチェイサーのメニューの文字を小さくするには下記でよいでしょうか?

    .skin-1 .menu-motion li a { font-size: 10px; }


    またメニューをセンターに配置するには下記の記述で大丈夫でしょうか?

    .menu-motion { text-align: center; } 
    .menu-motion ul { display: inline-block; margin: 0 auto; }

  • オカベ 2014/09/11[Thu]

    カンカン様 ご質問有り難うございます。こちらのコードで概ね余白はなくなるかと思います。.skin-1 .motion-j .menu-motion ul { padding: 0 15px !important }
    .menuh{ padding-bottom: 0; }
    .skin-1 .motion-j .menu-motion{ margin: 0; }
    余白調整の際は、3つ目のコードでmarginの上余白と下余白の数値を調整すると良いかと思います。

  • カンカン 2014/09/08[Mon]

    はじめまして。このコーナーすごく参考にしています!
    ラインチェイサーを設定するとブロックの余白設定をゼロにしてもブロック同士の間隔がゼロにできないのですが、コードで実現する方法はありますか?

  • オカベ 2014/07/14[Mon]

    オノ様 .menu-motion { text-align: center; } .menu-motion ul { display: inline-block; margin: 0 auto; }こちらのソースでセンター揃えになります。サイド・シズル、サイド・ボタンではデザインが崩れますので使用しないでください。それ以外でもご注意して仕様してください。

  • オカベ 2014/07/14[Mon]

    29様 返信が遅れてしまい申し訳ありません。「ドロップダウンバルーンの背景色の変更」ですが、ただ今調査中です。もうしばらくお待ちいただけますようお願いいたします。

  • オノ 2014/07/10[Thu]

    はじめまして。メニューをセンター揃えにすることはすることはできないでしょうか?よろしくお願いします。

  • 29 2014/07/04[Fri]

    はじめまして。
    前出の「ドロップダウンバルーンの背景色の変更」、情報展開よろしくお願いいたします。待ってます!

  • オカベ 2014/06/02[Mon]

    田邉様
    申し訳御座いません。こちらただ今調査中です。ご指摘有り難うございます。

  • オカベ 2014/06/02[Mon]

    ひとする様
    連絡が遅くなってしまい申し訳ありません。「ドロップダウンバルーン」のフォントサイズと背景色の変更ですが、フォントサイズは伊藤様にお伝えした、.menu-motion li a { font-size: 12px !important; }で変更可能です。背景色の方はただ今調査中です。

  • 田邉 2014/05/31[Sat]

    はじめまして、マウスオーバーの時だけラインチェイサーが表示されるようにできないでしょうか?

    実際のメニューと違うところにラインが残ったまま、マウスをオフにすると、今どこにいるのか、見る人が混乱してしまいますので、ぜひ解決策を教えて下さい。

  • ひとする 2014/05/24[Sat]

    はじめまして、いつも使用させていただいております。
    ぜひ「ドロップダウンバルーン」のフォントサイズの変更と背景色の変更も教えてほしいです!!

  • オカベ 2014/05/20[Tue]

    伊藤様
    こちらのコードを追記してください。.skin-1 .menu-motion li a { font-size: 12px; }ラインチェイサーの場合デフォルトのフォントサイズは12pxになっています。こちらもフォントサイズによってはデザインが崩れる恐れがありますのでご注意ください。

  • オカベ 2014/05/20[Tue]

    畠山様
    ご質問有り難うございます。[モーションメニュー]の色の変更についてですが、ただ今調査中です。わかり次第記事にしたいと思います。

  • 伊藤 2014/05/17[Sat]

    はじめまして。
    リンクメニューのフォントサイズの変更って可能でしょうか。

  • 畠山 2014/05/15[Thu]

    オカベ さま
    同じように[モーションメニュー]の色も変えることができますでしょうか?

  • オカベ 2014/05/13[Tue]

    まめ様
    返信が大変遅くなってしまい申し訳ありません。
    こちらのコードを追記して頂ければ調整可能です。
    .skin-1 .motion-j .menu-motion li { margin-right: 70px;!important }

    標準の幅設定は 70pxになっております。
    あまり幅を広げすぎますとデザインが崩れる恐れがありますので、ご注意ください。

  • まめ 2014/05/01[Thu]

    リンクメニューとメニューの幅間隔を調整する方法はありますか?今回のサンプルだと「製品紹介」と「素材サービス」の間。