ノーコートでサイトが作れるCMS「BiNDup」で使用できるパーツの１つに、カスタムタグパーツがあります。このパーツには自由にHTMLソースを貼り付けることができるため、さまざまなコンテンツを表示するのに役立ちます。
今回はカスタムタグの活用法を紹介します。
カスタムタグの基本的な使い方は以下のマニュアルを参照してください。
カスタムタグパーツを使う
プリセットを利用する
カスタムタグにはプリセットも用意されています。「セット」メニューから、外部サービスを貼り付ける時のサンプルや、ナビゲーションのパーツなどを直接挿入できます。
パンくずリスト
中でもよく使うのはナビゲーションの「パンくずリスト」です。
現在閲覧しているページが、サイト内のどの階層にあるかを示すために用いるリンクで、これを使えば自動的にトップページから現在のページまでのリンクを表示できます。
パンくずリストの裏ワザ
パンくずリストを設定したカスタムタグを開くと以下のような記述がされています。
<div class="c-breadcrumb">[BD:bread_crumb:HOME]</div>この[BD:○○○○○○]の部分は、BDタグと呼ばれるBiNDup独自のタグです。
上記の場合、[BD:bread_crumb]がパンくずリストを表示するためのBDタグで、このBDタグは少しだけカスタマイズすることができます。
[BD:bread_crumb]で表示するパンくずリストはリンクが「|」で区切られていますが、[BD:bread_crumb2]にすると「>」で区切られたリストに変更できます。
また、コロン「:」で区切ったあとに入れたテキストが、パンくずリスト内に表示するトップページの名称になります。デフォルトではHOMEになっている部分を変更してみてください。
<div class="c-breadcrumb">[BD:bread_crumb2:トップ]</div>
BDタグについては以下のマニュアルをご覧ください
BiNDの独自タグ（BDタグ）を使用する
トップへ戻るボタン
セットの中から「ページトップへ」を追加すると、ページトップへ戻るボタンを作成できます。現在のページの一番上に移動するリンクです。
カスタムタグで設置したパンくずリストやトップへ戻るボタンは、Dressでデザインをカスタマイズすることもできます。
更新日などを表示
他にも番号ナビゲーション、サイトの作成日や更新日の表示、背景動画専用のサウンドボタンなど、ちょっと役立つパーツがプリセットとして用意されています。
番号ナビゲーション…現在の階層にあるページへのリンクを番号で表示
サウンドボタン…ページに背景動画を設定している場合、サウンドのオン・オフをコントロールするボタン
外部サービスを埋め込む
カスタムタグにはコードをそのまま入力できるので、GoogleマップやYouTubeのような、埋め込み用のコードを発行しているサービスを貼り付けることができます。
埋め込みコード貼り付け
埋め込みコードをHTML形式で発行しているサービスであれば、カスタムタグに貼り付けることができます。各サービスが発行しているコードをそのまま貼り付けてください。
下記のように、埋め込まれたコンテンツがサイト内に表示されます。
Instagram、Twitter、Googleフォームの埋め込み例
注意点として、各種サービスが発行する埋め込み用のコードは、表示幅が固定になっていることがあります。その場合、widthの値を「100%」にすることで幅を可変にできる場合があります。
この方法だけでは解決しないケースもありますが、一つのやり方として覚えておくとよいでしょう。
カスタムタグを使ったGoogleマップ埋め込み
BiNDupにはGoogleマップ専用のパーツも用意されていますが、仕様上、APIキーを利用する必要があります。共有APIキーを利用する場合、Google側の仕様でアクセス数に制限がかかることがあります。
そこで、代わりにカスタムタグを利用してGoogleマップを埋め込むこともできます。
詳しい手順はマニュアルをご覧ください。
GoogleMapをカスタムタグで埋め込む
より高度な使い方
HTMLソースの形式でさえあれば、カスタムタグに記述することができるので、scriptを含めたり、SVG画像をコードで貼り付けたりして、BiNDupだけでは設定できないコンテンツを挿入することができます。
scriptを記述する際はscriptタグで囲んでください
BiNDupの裏技をまとめた記事はこちら
カスタムタグパーツを使用する際の注意点
カスタムタグにご自身で用意したHTMLソースを記述する場合、サポート対象外となります。入力ミスがあると正しく表示されないため、W3Cに準拠した標準的なHTML構文であることを確認してください。
また、記述内容によってはサイトデータ破損の原因となる場合もあります。ご自身で作成したコードなどを使用する際は、事前にサイトのバックアップを取るようにしてください。
POINT
- カスタムタグパーツには自由にHTMLソースを貼り付けることができる
- パンくずリストやトップへ戻るボタンなど、プリセットも用意されている
- 埋め込み用のコードを発行している各種サービスを貼り付けることができる