部品のコピー

メニューを開く

コンテンツの編集　～部品のコピー～

ページの部品をコピーしたい場合、ソースのコピーで行います。その時、タグ上で正確な範囲をコピーすることが肝要です。

ここではトップページの［お知らせ］の項目を追加します。

➊部品が含まれるページを開いておいて、［ページ／ソース］タブをクリックし、画面下半分に HTML ソースを表示しておきます。

➋画面上半分で、コピーする部品のいずれかをクリックしてカーソルを置きます。

ここでは、［お知らせ］の項目の一つをクリックします。
- ➊部品が含まれるページを開いておいて、［ページ／ソース］タブをクリックし、画面下半分に HTML ソースを表示しておく。➋画面上半分で、コピーする部品のいずれかをクリックしてカーソルを置きます。クリックした要素、ここでは <h4> ~ </h4> が黄色く反転する。

上書き保存の勧め
ソースのコピー＆ペーストを誤るとＨＴＭＬ構文エラーとなるので、ページを上書きしてから操作しましょう。操作の結果、構文エラーなどが出た場合は、［F5］キーを押せば、直前に保存した状態に戻すことができます。

➌コピーするソースの範囲をドラッグして選択したら、右クリック →［コピー］を選択します。

一つの部品セットを選択してコピーします。
- ➌ここでは、選択した <h4> ～ </h4> タグを含むレイアウトコンテナごとと、その直後にひかれている <hr> を一つの部品セットとしてコピーする。

コピー可能なレイアウトコンテナ
コピーができるレイアウトコンテナは、クラスセレクタが関連付けられているものだけです。IDセレクタはコピーできません。が、クラスセレクタに変えることでコピーが可能となります。

❹選択範囲の直前をクリックしてカーソルを置いたら、右クリック →［貼り付け］を選択して、ソースを貼り付けます。

コピーしたソースのセットの直前にカーソルを置いて、ソースを貼り付けます。
- 選択範囲の先頭となる<div>タグの直前をクリックしてカーソルを置いて、右クリック→［貼り付け］を選択してソースを貼り付ける。

❺ソース上で右クリック →［ソースの整形］を選択すると、ソースがきれいに整形されます。

❻［ページ編集］タブをクリックすると、部品の貼り付けが確認できます。

［ページ編集］で、コピーされた部品を確認する。ここでは、［お知らせ］の項目が追加された。
- ここでは、同じ部品が貼り付けられたので、画像が同じものである。同じであっても問題が無いが、別の画像に差し替えて仕上げることもある。

❼追加された部品を更新します。

次は、部品のコピー２に進みます。