今回作るのは「支援サポーター募集」です。

支援物資・支援金のサポートとボランティアの2つの情報を掲載します。

目次

1. 「ページ内リンクボタン」とは？
2. CanvaでWEBページの構成を考える
3. ページ内リンクボタンを準備する
4. テンプレートの「レイアウト」を使ってみる
5. ページ内リンクボタンにリンクを設定する
6. ページを複製する
7. プレビューで一瞬別の画像が表示される原因
8. テンプレートだからって安心できない理由

　

　

SAKUWEB さくうぇぶ

　

「ページ内リンクボタン」とは？

ページ内の特定の場所に飛ばすボタンのことです。

今回「支援サポーター」と「ボランティア」の2つの情報を掲載します。

そして、それぞれの説明文や、たとえば支援物資の送り先、ボタンディア応募用電話番号などを掲載するとなると、情報量が多くなりますね。

　

　

なので、「支援サポーター」と「ボランティア」のボタンを配置して、クリックしたらページ内の該当の場所に飛ぶようにすれば、ユーザーも使いやすくなりますね。

これがページ内リンクボタンです。

　

CanvaでWEBページの構成を考える

ページ内リンクボタンを利用する場合は、「リンク先ごとに1ページ」という構成にしなければなりません。

そのため、今回も前回同様以下のように複数ページを作成します。

　

　

　

1ページ目に「支援サポーター」「ボランティア」のボタンを配置します。

「支援サポーター」ボタンをクリックすると、2ページ目「支援サポーター」のページに移動するようにします。

これが「ページ内リンク」です。

2・3ページ目に詳細情報を記載します。

　

　

ページ内リンクボタンを準備する

まずは1ページ目の「タイトル」+「ページ内リンクボタン」を作っていきます。

新規ページを追加してタイトルを作っておきます。

　

　

これでボタンは完了です。

リンク先の、2・3ページ目を作っていないので作っていきます。

新規ページを追加しておきましょう。

　

テンプレートの「レイアウト」を使ってみる

2ページ目の「支援サポーター」を作っていきます。

今回、Canvaで用意されているレイアウトテンプレートを使ってみたいと思います。

　

　

たくさんのレイアウトテンプレートが用意されています。

スマホ表示を確認しましたがちゃんと対応してそうなので、どんなレイアウトにするか迷ったときに便利ですね。

写真とテキストを追加しておきます。

　

ページ内リンクボタンにリンクを設定する

1ページ目の「支援サポーター」ボタンにリンクを設定していきます。

以前、「Map」ボタンで外部アドレスを設定しましたが、今回はページ内のリンクを設定します。

　

　

すると、直下に「最近の検索」と「この文書のページ」ボックスが表示されます。

　

　

　

　

リンクを設定すると、ページ上部に「リンクを追加しました」メッセージが表示されます。

また、テキストに下線が付与されます。

削除したい場合は、上メニューの「下線」アイコンをクリックすると解除されます。

ボタンをクリックすれば、「支援サポーター」のページ移動します。

これで、ページ内リンクボタンの設置が完了しました。

　

ページを複製する

次に3ページ目の「ボランティア」を作ります。

このページは2ページ目「支援サポーター」と同じレイアウトなので、ページを複製して写真・テキストを変更していきます。

　

　

すると直下に複製ページが挿入されました。

写真やテキストなどを差し替えて完成です。

また1ページ目に戻って「ボランティア」ボタンにリンクを付けます。

　

　

プレビューで一瞬別の画像が表示される原因

作ったページをプレビューで確認してみます。

すると、レイアウトテンプレートを使った写真の部分に、一瞬違う写真が表示されました。

　

　

これは気持ち悪いですね。

原因は、テンプレートです。確認してみましょう。

　

　

画像がフレームから切り離されました。

　

　

すると、どうでしょう。

さっきの一瞬表示された画像が出てきました。これが原因です。

この画像を削除して、フレームと写真を元に戻します。

これでこのページが完成しました。

　

テンプレートだからって安心できない理由

Canvaのテンプレートを利用してみると、こんなトラップが意外とありました・・・・。

本当に何のためのトラップなのか、考えても考えても全く理解できませんでした。

　

ただのミスだったとしても、Canva側で確認などはしていないことは分かりましたね。

どんなトラップがあるのかわからないので、テンプレート利用の際は注意しましょう。