AMS使い方マニュアル

簡単ホームページ作成ツール「AMS」のマニュアルサイト

ホーム ≫ 記事をデザインごとコピーする ≫

[ケーススタディ]
既存の記事をデザインごとコピーする

ケーススタディ 既存の記事をデザインごとコピーする

カフェのドリンクのメニューに新しく「自家製レモネード」を追加するので、 商品紹介のデザイン形式をコピーして作りたい。

既存の記事の装飾や表の形式をそのまま使用し、新規記事を作成する場合、文章をそのままコピーすると、設定している装飾の情報がコピーされず、崩れたデザインになってしまうことがあります。

装飾や表形式をそのままコピーしたい場合は、「ソース」と呼ばれる構成情報を流用すると確実です。

ソースの内部情報は難しく見えますが、作業自体は難しいことではないので下記マニュアルをご参考にぜひ挑戦してみてください。

記載されているソースコードを誤って消してしまうと、表示が崩れてしまうことがあります。
AMSカスタマーセンターでは、ソースコードを誤って変更してしまった場合の復元作業は行っておりませんので、 ソースコードの編集作業前に、必ずバックアップを行ってください。

事前準備

このケーススタディをお試しいただくには、コピー元に指定されている記事の画像と同じサイズで画像ファイルを準備しておく必要があります。

また、画像サイズは「ファイル管理」のファイル一覧からご確認いただけます。

*はじめに

*はじめにページ移動
左上部の「ページ管理」から、コピーしたい記事があるページに移動しておきます。

1.コピー元記事の「記事を編集」の画面を開く

1.記事編集をクリック

AMSにログインし、ページの編集画面に移動します。
コピー元となる記事にカーソルを合わせると記事がピンク色に変わり、「記事を編集」と表示されますので、記事をクリックします。

AMSへのログイン方法はこちら

2.ソースを開く

2.ソースをクリック

記事を登録の画面が開けましたら、「本文」にある「ソース」のボタンをクリックします。
マニュアルの後半で画像の配置を設定するのでこの際に元記事の画像配置のタイプを確認しておきましょう。

2.2これがソースです

クリックするとこのような文字の羅列が表示されているかと思います。
この文字の羅列が「ソース」になります。

3.ソースをコピーする

2.3テキストエリアを選択

テキストエリア内をクリックし、テキストエリアを選択します。

テキストエリア内に点滅する縦棒「|」が出ている状態で
Windowsであればctrl+a(ctrlキーを押しながらa)
Macであればcommand+a(commandキーを押しながらa)
を押して全選択状態にします。

3.テキストエリアを全選択

画像のようになれば成功です。

4.ソースをコピー

そのまま青く選択された部分で右クリック→コピー
もしくはWindowsであればctrl+c(ctrlキーを押しながらc)
Macであればcommand+c(commandキーを押しながらc)
で選択した部分をコピーします。

コピーしたら右上の「閉じる」で画面を閉じます。

4.バックアップの作成

5.コピーしてメモ帳貼り付け

ここで念のためバックアップをとりましょう。
画像のようにPC上のメモ帳を起動し、メモ帳にコピーしたソースを貼り付けてください。
こちらは、バックアップは間違えてソースを崩してしまった時の保険です。
デザインを崩してしまった時には、崩れたデザインの記事でソースモードに切り替え、ソースを全て消し、改めてバックアップしたソースコードを貼り付ければ状態を元に戻すことができます。

ケーススタディ 記事にclassの設定がある場合はコピーする

ソースモードで記事を作成してもclassの記載を忘れると装飾は反映されません。テキストと同様にバックアップを取りましょう。

my-class

5.記事一覧を開く

6.記事一覧を編集

緑の点線内部にカーソルを合わせると記事全体が緑色に色が変わり、黒い吹き出しで「記事一覧を編集」と表示されますので、その状態でクリックします。

6.記事を追加する

7.記事追加をクリック

記事を追加する」をクリックします。

7.新規記事にソースを貼り付ける

8.ソースをクリック

記事を編集」の画面が開きますので「本文」にある「ソース」のボタンをクリックします

9.ソースを貼り付け

先ほどコピーしたソースを貼り付けます。
Windowsであればctrl+v(ctrlキーを押しながらv)
Macであればcommand+v(comandキーを押しながらv)
で選択した部分を貼り付けます。

8.情報を変更する

10.情報変更

見出しと事前に準備していただいた画像を入れ(2)で確認した画像配置で設定しましょう。

10.1情報変更

コード自体は崩さないようにテキストを変更しましょう。

9.編集内容を登録する

11.登録をクリック

左下の「登録」をクリックします。
記事一覧を編集」の画面が表示されるので、もう一度左下の「登録」をクリックします。

ケーススタディ コピー元の記事のclassを貼り付ける。

元の記事からclassをバックアップした場合は忘れずに貼り付けてください。
classの記載がない場合は装飾が反映されません
my-class2

11.プレビューで確認する

プレビューをクリックガイド有-2.p

右上の「プレビュー」をクリックし、仕上がりを確認します。

12.プレビューで確認

デザインの形式をそのまま引き継いで新たな商品紹介を作成できました。

12.編集内容を公開する

5.公開するガイド有り

最後に右上の公開ボタンで編集内容を公開します。
この工程をしないと結果が公開されているホームページ上に反映されませんのでお気を付けください。

公開ボタン押しましょう
otukaresamadesita