外部サービスの埋め込みにも便利。よく使うカスタムタグパーツ紹介

ノーコートでサイトが作れるCMS「BiNDup」で使用できるパーツの1つに、カスタムタグパーツがあります。このパーツには自由に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%」にすることで幅を可変にできる場合があります。
この方法だけでは解決しないケースもありますが、一つのやり方として覚えておくとよいでしょう。
widthの値を100%にする

カスタムタグを使ったGoogleマップ埋め込み

BiNDupにはGoogleマップ専用のパーツも用意されていますが、仕様上、APIキーを利用する必要があります。共有APIキーを利用する場合、Google側の仕様でアクセス数に制限がかかることがあります。
そこで、代わりにカスタムタグを利用してGoogleマップを埋め込むこともできます。

Googleマップの埋め込み

詳しい手順はマニュアルをご覧ください。
GoogleMapをカスタムタグで埋め込む

より高度な使い方

HTMLソースの形式でさえあれば、カスタムタグに記述することができるので、scriptを含めたり、SVG画像をコードで貼り付けたりして、BiNDupだけでは設定できないコンテンツを挿入することができます。

外部サービスの埋め込みにも便利。よく使うカスタムタグパーツ紹介

scriptを記述する際はscriptタグで囲んでください

自作コードやSVGの表示例

BiNDupの裏技をまとめた記事はこちら

BiNDupの苦手なデザインと解決法

カスタムタグパーツを使用する際の注意点

カスタムタグにご自身で用意したHTMLソースを記述する場合、サポート対象外となります。入力ミスがあると正しく表示されないため、W3Cに準拠した標準的なHTML構文であることを確認してください。

また、記述内容によってはサイトデータ破損の原因となる場合もあります。ご自身で作成したコードなどを使用する際は、事前にサイトのバックアップを取るようにしてください。

BiNDupのトップページ

無料でBiNDupを使ってみるBiNDの制作事例を見る

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • カスタムタグパーツには自由にHTMLソースを貼り付けることができる
  • パンくずリストやトップへ戻るボタンなど、プリセットも用意されている
  • 埋め込み用のコードを発行している各種サービスを貼り付けることができる

RECOMMEND ARTICLE