ホームページビルダー
共通部分の 同期を使用する 設定方法
共通部分の同期 メニュー
共通部分の同期・管理という便利な機能がホームページビルダーにあることを知らずにいましたが、使ってみると非常に便利でしたので、使用方法をここにまとめました。
（古いバージョンの場合は確認してみてください）
- 共通部分の 同期とは
- これを使うメリットは（私はメニューの一覧に使用しています）
- 標準モードで 共通部分の同期 を 使用する方法（だます方法）
- 共通部分の同期 設定 と 使用する手順
共通部分の 同期とは
この機能は、フルCSSテンプレートを利用して複数のページを作成すると、各ページの同じ場所に、同じ内容で共通して配置されている部分（ヘッダー・フッター・ナビメニューなど）が存在します。
あるページでこの共通部分を編集したあと、共通部分の同期の操作をすると、ほかのページにも編集内容をまとめて反映して、同じ内容にすることができます。
しかもジャンプ設定があるとフォルダの深さで相対指定が変わりますが、全て自動的に変更してくれます。
ホームページビルダーをだますと、フルCSSテンプレートを使っていない標準モードでもこの機能を使用することが出来ます。
「標準モード」でこの機能を使う時は、「ページ編集」画面で確認しながら。「HTMLソース」画面で編集します。
リンク設定で思い通りにジャンプできるかの確認は「プレビュー」画面で行います。
これを使うメリットは
（私はメニューの一覧に使用しています）
- 各ページに同じ内容のタイトルやメニューの一覧を配置した時、メニューの一部を変更するとこのメニューを配置している全ページに対しても同じように変更を加える必要があります。
さらにフォルダの階層に合わせジャンプ設定も変更する必要があります。
以前は、このわずらわしさを避けるためフレーム機能を使用して左側に常にメニューを表示するようにしていました。
最近は、フレームを使用しないようにしたため、各ページに同じ内容のメニューを付けてやる必要が出てきました。
この共通部分の同期を使用すると、この問題が一気に解決します。 - 例えば
<div id="menu">
<p>メニューの一覧</p>
<p>趣味の釣り</p>
<p>自宅栽培の果樹</p>
：
</div>
のように<div>でくくって同期設定をしておけば、簡単に全てのページを同じ内容に変更できます。 - メニューを加えたり、削除したり、タイトル名を変更したり、ジャンプ先を変更した時等、共通部分の同期を実行すると対象になるすべてのページの内容を変更してくれます。
- メニューのジャンプ先は、フォルダの深さで相対指定が変わりますが、全て自動的に変更してくれます。
標準モードで 共通部分の同期 を使用する方法（だます方法）
- 同期させたい全てのページの <body> に下記のように決められた同じ id名をつける必要があります。
<body id="hpb-template-01-24-01">
全ページの<body>を<body id="hpb-template-01-24-01">に変更する時
アプリ「Devas」を使うと数秒で400ページの変更が出来ました。
template の番号01-24-01は実在するものを使用します。
実在する番号の確認は、「ファイル」の「フルCSSテンプレートから新規作成」を実行し、いずれかのテンプレートを選んで実行すると、<body にセットされています。この番号をメモしておいて使えば確実です。
これでフルCSSテンプレートを使用しているようにだますことができます。
- ページ内の変更を同期させたい箇所を<div id="....">でくくります。
id="...." は、わかりやすく区別できる名前を付けます。
注意・・・id属性のみで、class属性等は同期できません。
理由・・・id属性は1ページに1回しか使えないため重複しない。 - 使用例・・・釣りのページ用メニュー
複数のページの同期させたい場所全てに下記１行を書き込みます。
<div id="turi-menu"></div> - 同期させたい複数のページの中で、どれか１つのページのみ、同期させる内容を完成させます。リンクやジャンプの設定も行い動作確認しておきます。
<div id="turi-menu">
趣味の釣り
：
自宅栽培の果樹
</div> - 同期させると、上記の<div id="turi-menu">・・・・・</div>の部分を各ページ同じ内容にすることが出来ます 。
- <div id="...">を変更すると、数種類のグループを作ることが出来、グループごとに同期させることが出来ます。
例えば、<div id="drone-menu">としてドローン用メニューを作成。
この場合、各ページの先頭の<body id="hpb-template-01-24-01">は同じものを使用してもＯＫです。
共通部分の同期 設定 と 使用する手順
- 事前に同期させたい複数のページに<div id=・・・を書き込んでおきます。
- 最初のみ共通部分の「登録」が必要なので、同期させる内容を完成させたページの「HTMLソース」を表示させます 。
- 画面右に「タグ一覧ビュー」を表示させます。
画面右に「タグ一覧ビュー」が無い時は、画面上部メニューの「表示」＞「タグ一覧ビュー」をクリックして画面右に「タグ一覧」を表示させます 。 - 使用例の場合、「HTMLソース」の<div id="turi-menu"> の上をクリックする 。
- タグ一覧ビューのその箇所が選択されます。
- 初めて同期させる時のみ、「タグ一覧ビュー」のその箇所を右クリックすると「共通部分として登録」が表示されるのでこれをクリックし設定を進めます。
- 次回からは、「HTMLソース」の<div id="turi-menu"> の上をクリックし、「タグ一覧ビュー」のその箇所を右クリックすると「共通部分の同期」が表示されるので、これをクリックします。
- 共通部分を含むページが検索され、同期設定した一覧表が表示されます。
今回の例では<div id="turi-menu">を設定したファイルの一覧となります。 - 検索が終わると「完了」が表示されます。
同期させたくないページは先頭のチェックを外すと同期されません。 - 「完了」をクリックすると、確認画面が出て「ＯＫ」で同期を開始します。
- 同期されたページを開いて確認すると同期させる部分は全て同じ内容になっています。
当然リンクやジャンプも各ページに合わせ自動調整されています。 - 以後、共通部分の一部編集を行った場合は、編集したページで「共通部分の同期」を実行すれば、対象ページ全てに反映されます
