既存のブログ記事から安全に切り替える
ここでは、現在のブログをすぐに変更せず、複製したテーマで表示を確認してからSmart Agent Blogへ切り替えます。
この操作で変更するのは、ブログ記事テンプレートの表示方法です。テーマにセクションを追加しただけでは、既存記事のタイトル、本文、画像、URL、タグ、公開状態は削除・書き換えされません。
同じテンプレートを使うすべての記事に変更が反映されます。記事データが残っていても、文字、余白、画像、コメント、独自CSSなどの見た目が今までと同じになるとは限りません。必ず複製テーマで確認してください。
最初に知っておきたいこと
| 項目 | 切り替え後の扱い |
|---|---|
| 記事のタイトル、本文、画像、URL、タグ、公開状態 | テーマの切り替えだけでは変更されません |
| 元テーマのセクション設定 | セクションを削除せず非表示にすれば残せます |
| 文字、余白、見出し、画像幅 | Smart Agent Blogの表示に変わる可能性があります |
| 著者、関連記事、シェアボタン | Smart Agent Blogセクションの設定で表示が変わります |
| 公開日 | Smart Agent Blogの記事表示に含まれます |
| コメント | Shopifyのブログでコメントを許可している場合に表示されます |
| 独自CSS、独自Liquid、広告、構造化データ、外部アプリの表示 | 自動では引き継がれない場合があります |
複製テーマは、ストアの表示を戻すための控えです。記事本文そのもののバックアップではありません。検証中は、既存記事をSmart Agent Blogで開いて保存しないでください。
1. 現在の状態を控える
作業前に、次の内容をメモまたは画面画像で残します。
- 現在公開中のテーマ名
- ブログ記事テンプレートの名前
- 記事ページにあるセクションと、その表示順
- 著者、日付、コメント、関連記事などの表示設定
- 独自CSSやテーマコードの編集、外部アプリによる表示の有無
制作会社や開発担当者がテーマを管理している場合は、作業前に「ブログ記事テンプレートへアプリセクションを追加する」と伝えてください。管理中のテーマ変更で上書きされることがあります。
2. 確認に使う記事を選ぶ
すべての記事を開かなくても、表示の異なる記事を3〜5本選ぶと問題を見つけやすくなります。
- 文字と画像だけの通常の記事
- 長い記事、または見出しが多い記事
- 表、動画、埋め込み、商品紹介がある記事
- コメントや独自HTMLを使っている記事
- 別のブログ記事テンプレートを使っている記事
独自HTML、iframe、script、外部アプリ専用の要素を使っている記事は、本文HTMLも別の場所へ控えてから編集してください。
3. 公開テーマを複製する
- Shopify管理画面で「オンラインストア」→「テーマ」を開きます。
- 公開中のテーマの「…」を押します。
- 「複製」を押します。
- 複製されたテーマに、作業日がわかる名前を付けます。
例：Smart Agent Blog確認用 8月1日
ここから先は、複製した未公開テーマの「カスタマイズ」を開いて作業します。公開中のテーマでは作業しません。
4. 複製テーマにSmart Agent Blogを追加する
- 複製テーマの「カスタマイズ」を押します。
- 画面上部のページ選択から「ブログ記事」を開きます。
- 「セクションを追加」→「アプリ」を開きます。
- Smart Agent Blogの記事セクションを選びます。表示環境により「Smart Agent Blog」「Smart Agent Blog - Article」「Smart Blog - Article」のいずれかで表示されます。
- 追加したセクションを表示したまま、元の記事本文セクションを目のアイコンで非表示にします。
- 「保存」を押します。
「アプリ」またはSmart Agent Blogの記事セクションが表示されない場合は、そこで作業を止めてください。古いテーマや独自テーマでは、アプリセクションに対応していないことがあります。自分でテーマコードを編集せず、テーマの制作担当者またはサポートへ相談してください。
最初は「削除」ではなく「非表示」にします。問題があった場合、Smart Agent Blogを非表示にして元のセクションを再表示できます。
本文が二重に見えるときは、Smart Agent Blogと元の記事本文セクションが同時に表示されています。どちらか一方だけを表示してください。
5. 代表記事を確認する
複製テーマのプレビューで、先ほど選んだ記事を1本ずつ開きます。パソコン表示とスマートフォン表示の両方で確認してください。
- タイトル、本文、画像が欠けていない
- 本文が二重に表示されていない
- 見出し、リンク、表、動画、商品紹介を操作できる
- 著者、日付、タグが意図した位置にある
- コメント、関連記事、シェアボタンが必要に応じて表示される
- 文字や画像が画面の外へはみ出していない
- 独自CSS、独自Liquid、外部アプリの表示に問題がない
- 広告、追加バナー、構造化データなど、元のセクション独自の機能を確認した
- ヘッダー、フッター、パンくず、サイドバーに問題がない
ブログ記事テンプレートが複数ある場合は、テンプレートごとに同じ確認を行います。1つのテンプレートを変更しても、別のテンプレートには反映されません。
6. 問題があるとき
公開せず、複製テーマのまま修正します。
- 著者が出ない：記事の著者と、Smart Agent Blogセクションの著者設定を確認する
- 本文が二重になる：元の記事本文セクションを非表示にする
- 独自の部品が消える：元テーマのセクション、Liquid、外部アプリの役割を確認する
- レイアウトが崩れる：独自CSSとSmart Agent BlogのCSSが競合していないか確認する
独自Liquid、テーマコード、外部アプリを使っていて原因がわからない場合は、公開前にテーマの制作担当者またはサポートへ相談してください。
7. 確認できたテーマを公開する
- アクセスの少ない時間帯を選びます。
- 複製テーマの操作メニューから「公開」を押します。
- 公開後、確認に使った記事を実際のストアで開きます。
- パソコンとスマートフォンで、もう一度表示を確認します。
- 可能であれば、ログイン状態の影響を受けないシークレットウィンドウでも確認します。
元の表示に戻す方法
問題が見つかった場合は、Shopify管理画面の「オンラインストア」→「テーマ」で、切り替え前のテーマをもう一度公開します。
テーマを公開し直すとストアの表示は戻せますが、Smart Agent Blogで記事本文を編集して保存した内容までは戻りません。切り替えが安定するまで、元のテーマを削除しないでください。
Smart Agent Blogを無効化またはアンインストールする場合は、その前に元の記事本文セクションを再表示するか、元のテーマへ戻してください。元のセクションが非表示のままだと、記事本文が表示されなくなることがあります。
既存記事をSmart Agent Blogで編集するとき
テーマの切り替えと、記事の編集は別の操作です。既存記事をSmart Agent Blogで保存すると、本文だけでなく、画面で変更したタイトル、投稿先ブログ、タグ、公開状態、著者、テーマテンプレート、URLの末尾、画像なども更新されます。独自HTMLは保存時に形が変わる場合があります。
最初は独自HTMLや外部アプリの要素がない記事を1本だけ選びます。保存前に本文と各設定を控え、プレビューと保存後の表示・設定を比較してください。確認が終わるまで、複数の記事を一度に保存しないことをおすすめします。
よくある心配
既存ブログのデザインは壊れませんか？
記事データはテーマの切り替えだけでは消えません。ただし表示方法は変わるため、複製テーマでの確認が必要です。元テーマを残しておけば、再公開して表示を戻せます。
独自カスタマイズは残りますか？
元テーマの中には残りますが、Smart Agent Blogへ自動で移るとは限りません。特に独自Liquid、CSS、外部アプリの表示は個別に確認してください。
初期設定が正しいか、どう判断しますか？
代表記事で本文が一度だけ表示され、上の確認項目をパソコンとスマートフォンで満たせば、基本的な表示設定は完了です。
次は、はじめての記事を作るへ進みます。操作だけを見直したい場合は、ストアに記事を表示するをご覧ください。テーマの複製方法は、Shopifyヘルプセンターでも確認できます。