その他

ホームページビルダー
共通部分の 同期を使用する 設定方法

共通部分の同期 メニュー

共通部分の同期・管理という便利な機能がホームページビルダーにあることを知らずにいましたが、使ってみると非常に便利でしたので、使用方法をここにまとめました。
(古いバージョンの場合は確認してみてください)

  1. 共通部分の 同期とは
  2. これを使うメリットは(私はメニューの一覧に使用しています)
  3. 標準モードで 共通部分の同期 を 使用する方法(だます方法)
  4. 共通部分の同期 設定 と 使用する手順

共通部分の 同期とは

この機能は、フルCSSテンプレートを利用して複数のページを作成すると、各ページの同じ場所に、同じ内容で共通して配置されている部分(ヘッダー・フッター・ナビメニューなど)が存在します。

あるページでこの共通部分を編集したあと、共通部分の同期の操作をすると、ほかのページにも編集内容をまとめて反映して、同じ内容にすることができます。
しかもジャンプ設定があるとフォルダの深さで相対指定が変わりますが、全て自動的に変更してくれます。


ホームページビルダーをだますと、フルCSSテンプレートを使っていない標準モードでもこの機能を使用することが出来ます。

「標準モード」でこの機能を使う時は、「ページ編集」画面で確認しながら。「HTMLソース」画面で編集します。

リンク設定で思い通りにジャンプできるかの確認は「プレビュー」画面で行います。


これを使うメリットは
(私はメニューの一覧に使用しています)


標準モードで 共通部分の同期 を使用する方法(だます方法)

  1. 同期させたい全てのページの <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テンプレートを使用しているようにだますことができます。
  2. ページ内の変更を同期させたい箇所を<div id="....">でくくります。
     id="...." は、わかりやすく区別できる名前を付けます。
      注意・・・id属性のみで、class属性等は同期できません。
      理由・・・id属性は1ページに1回しか使えないため重複しない。
  3. 使用例・・・釣りのページ用メニュー
    複数のページの同期させたい場所全てに下記1行を書き込みます。
    <div id="turi-menu"></div>
  4. 同期させたい複数のページの中で、どれか1つのページのみ、同期させる内容を完成させます。リンクやジャンプの設定も行い動作確認しておきます。

    <div id="turi-menu">
       趣味の釣り
         :
       自宅栽培の果樹
    </div>
  5. 同期させると、上記の<div id="turi-menu">・・・・・</div>の部分を各ページ同じ内容にすることが出来ます 。
  6. <div id="...">を変更すると、数種類のグループを作ることが出来、グループごとに同期させることが出来ます。
    例えば、<div id="drone-menu">としてドローン用メニューを作成。
    この場合、各ページの先頭の<body id="hpb-template-01-24-01">は同じものを使用してもOKです。

共通部分の同期 設定 と 使用する手順

  1. 事前に同期させたい複数のページに<div id=・・・を書き込んでおきます。
  2. 最初のみ共通部分の「登録」が必要なので、同期させる内容を完成させたページの「HTMLソース」を表示させます 。
  3. 画面右に「タグ一覧ビュー」を表示させます。
    画面右に「タグ一覧ビュー」が無い時は、画面上部メニューの「表示」>「タグ一覧ビュー」をクリックして画面右に「タグ一覧」を表示させます 。
  4. 使用例の場合、「HTMLソース」の<div id="turi-menu"> の上をクリックする 。
  5. タグ一覧ビューのその箇所が選択されます。
  6. 初めて同期させる時のみ、「タグ一覧ビュー」のその箇所を右クリックすると「共通部分として登録」が表示されるのでこれをクリックし設定を進めます。
  7. 次回からは、「HTMLソース」の<div id="turi-menu"> の上をクリックし、「タグ一覧ビュー」のその箇所を右クリックすると「共通部分の同期」が表示されるので、これをクリックします。
  8. 共通部分を含むページが検索され、同期設定した一覧表が表示されます。
    今回の例では<div id="turi-menu">を設定したファイルの一覧となります。
  9. 検索が終わると「完了」が表示されます。
    同期させたくないページは先頭のチェックを外すと同期されません。
  10. 「完了」をクリックすると、確認画面が出て「OK」で同期を開始します。
  11. 同期されたページを開いて確認すると同期させる部分は全て同じ内容になっています。
    当然リンクやジャンプも各ページに合わせ自動調整されています。
  12. 以後、共通部分の一部編集を行った場合は、編集したページで「共通部分の同期」を実行すれば、対象ページ全てに反映されます