Webサイトの作成で便利な機能「スタイルのコピー/貼り付け」では、1か所で完成させた見出しやボタンのスタイルを他のパーツへ一発で反映させることで、手作業による設定ミスを防ぎ、サイト全体の統一感を手軽に演出できます。本記事では、短時間で設定を終わらせるコツから「コピーされる項目・されない項目」のチェックリストまで、ポイントをピックアップして解説します。
🔰 スタイルとは？
Webサイトを作るとき、「さっき作った見出しのデザインを、別の場所の見出しにもそのまま使いたい」という場合があります。
この機能を使うと、色やフォント、枠線などの見た目のデザイン＝スタイルだけを簡単にコピーして、別の場所に一瞬で上書きすることができます。
💡 コピーできるもの・できないもの
コピーできるもの：
色、フォントの種類、文字の大きさ、枠線、背景の色などの「デザイン（見た目）」
コピーできないもの：
書いてある「文字の内容」、ボタンの「リンク先（どこに飛ぶか）」、写真や動画の「素材そのもの」
※ 必ずコピー元と「同じ種類のもの同士」を選んでください
⌨️ 便利なショートカットキー
🔻スタイルのコピーと貼り付けは、ショートカットキーで操作することが可能です。
一度覚えて使い慣れてしまえば作業が何倍も早くなるので、初心者の方も是非使ってみてください。
スタイルをコピーする
🔻AIエディターの「こだわり」モードに変更し、「真似したいデザインが設定されているパーツ」をマウスでクリックしてコピーしたい要素を選びます。
🔻キーボードのショートカットキーを押してスタイルをコピーします。
画面に「スタイルをコピーしました。」というメッセージが出たらコピー成功です。
スタイルを貼り付ける
🔻新しくデザインを適用したい（変えたい）パーツをマウスでクリックして選びます。
※必ずコピー元と「同じ種類のもの同士」を選んでください（例：見出しのデザインは、別の見出しにしか貼り付けられません）。
🔻キーボードのショートカットキーを押してスタイルを貼り付けます。
画面に「スタイルを更新しました。」と表示され、一瞬でデザインが切り替わります。
✍しまった！と思ったときは元に戻せる
「デザインを貼り付けてみたけれど、前のほうが良かったな」というときは、焦らず画面の左上にある「元に戻す」ボタンを押してください。直前の操作を取り消すことができます。
注意
形や役割がまったく違うもの同士には、スタイルを貼り付けることができません。
例えば、「見出しのスタイル」を「ボタン」に貼り付けようとするとエラーになります。
基本的に、「同じ種類の部品同士（見出しと見出し、ボタンとボタンなど）」でしかスタイルの共有はできません。
マウスを合わせたときに色がふわっと変わるような「動き」＝アニメーションがついている要素は、その動きのデザインもセットで一緒にコピーされます。
🔧コピーしたあとに「個別で設定し直す」必要があるもの
デザインの見た目は一発でコピーされますが、以下の項目はコピーされません。
貼り付けたあとに、それぞれの場所で確認・設定をしてください。
- ボタンなどの「リンク先（飛び先URL）」
- 写真やイラスト、動画などの「素材そのもの」
- 動画やスライドの「再生設定」
- テキストに直接埋め込まれた細かい特殊コード
✍活用のコツ
・サイト全体のデザインを統一する
たくさんあるページの見出しやボタンのデザインを一つずつ手作業で変えるのは大変です。「1か所で完璧にデザインを整えてから、他の同じパーツにコピーしていく」という順番で作業すると、手戻りがなくなり作業スピードがぐっと上がります。
・最後に必ずスマホ表示もチェックする
パソコン画面できれいにデザインが貼り付けられたら、最後に画面を切り替えてスマートフォン画面（モバイル表示）でも崩れていないか必ず確認してから仕上げましょう。