【ペライチ】外部サイトへのリンクを設定する方法

アイキャッチ画像 Web制作

ペライチで作成したページに、他のサイト(外部サイト)へ遷移させるためのリンク設定を行うことがあります。

しかし、ペライチでの作業に慣れていないと、「リンクの貼り方が分からない!」と迷子になってしまうも…。

「詳細はこちら」「〇〇へ申し込む」といった文言のリンクボタン以外にも、ペライチではさまざまな方法で外部サイト(またはコンテンツ)へのリンク設定を行うことができます。

今回の記事では、ペライチで外部サイトへのリンクの貼り方について紹介します。

ペライチでリンク設定できるもの

Photo by Christin Hume on Unsplash

ペライチで外部サイトへリンク設定できるパーツは以下の通りです▼

【外部サイトへリンク設定できるもの】

・ボタン
・テキスト(文字)
・画像
・動画
・メニュー

ちなみに、ペライチに限らずホームページなどで設定できるページ・コンテンツの種類を大まかに述べると以下の通りです▼

✔️リンク設定できる遷移先の種類

・ページ内のコンテンツ(リンクを設定を行うページと同じページの別の箇所)
・外部サイト(リンクを設定を行うページとは別のサイト)
・外部プラットフォーム(YouTubeやその他SNSといったプラットフォームのコンテンツ)

今回の記事で紹介するのは、外部サイト・外部プラットフォームへのリンク設定です。

それでは、次の章より実際にリンクを設定する方法を紹介します。

リンク設定の方法

タイトル用画像
Photo by Cleo Vermij on Unsplash

ボタン

リンクを設定するものとして、リンクボタンはよく使用されているブロックの一つです。
ペライチでもボタンを含むブロックは、種類が豊富で購入ボタンお問い合わせボタンなどによく使用されます。

キャプチャ画像

ペライチ編集画面でリンクを設定したいボタンの「編集」をクリックし、「テキスト設定」の画面を開きます。

キャプチャ画像
画像引用:ペライチ

リンク先の設定」の「リンク先」で設定したいリンクのURLを入力します。
ボタンをクリックした際に、別窓で開く設定にしたい場合は「新しいタブで開く」にチェックを入れます。

ここまで設定できたら「保存」をクリックします。

✔️ 別窓設定について

リンクをクリックした際に、別窓で開く設定にするか否かは、はっきりとしたルールが存在するわけではありません。
ただ、外部サイトへ遷移するリンクであれば、別窓(新しいタブで開く)表示の設定を行った方が、自分のページへ戻ってきてもらいやすいというメリットがあります。

テキスト(文字)

テキストにリンクを設定する「ハイパーリンク」と呼ばれるものです。
ペライチの場合、テキストにリンク設定を行うと、以下キャプチャのように文字が青色になります。

リンク設定を行った青色のテキストをクリックすると、リンク先へ遷移することができます。

キャプチャ画像

ペライチ編集画面でハイパーリンクを設定したいブロックの「編集」をクリックし、ブロックの編集画面を開きます

キャプチャ画像
画像引用:ペライチ

文章中のリンク設定を行いたいテキストを選択します。
テキストを選択した状態で上の段にあるチェーンのようなマークを選択します。

キャプチャ画像
画像引用:ペライチ

上記のようなリンクの設定画面が表示されるので「リンク先URL」に設定したいリンクを入力

リンクをクリックした際に、別窓で開く設定にしたい場合は「ターゲット属性」の「新規ウィンドウ」を選択します。

ここまで設定ができたら「OK」をクリックします。

キャプチャ画像
画像引用:ペライチ

するとワードやエクセルのように、リンク設定されたテキストが青色・下線表示になります。

あとは「保存」をクリックするだけです。
これで文章中にハイパーリンクの設置ができました。

画像

実は画像にもリンクを設定することができます。

キャプチャ画像

写真画像にリンク設定を行う機会はあまりないかもしれません。

「画像にリンクを設定できる」という機能を活かし、自作のバナー画像やボタンにリンクを設定することで、BASEといった外部の商品販売ページ等の告知が可能です。

キャプチャ画像

リンクを設定したいバナーやボタンの画像をペライチに設置したら、ブロックの「編集」をクリックし、画像の設定を開きます。

キャプチャ画像
画像引用:ペライチ

画像の設定」では以下の手順でリンクを設定します。

①「リンク設定・拡大表示」を選択する
②「リンク追加」にチェックを入れる
③「直接URLを入力」を選択する
④設定したいURLを入力する
⑤任意で「別ウィンドウでリンクを開く」にチェックを入れる

設定が完了したら「保存」をクリックします。

これで自作のバナーやボタンといった画像にもリンクを設定することができます。

アイコン

「画像にリンクを設定できる」という機能を応用し、SNSなどのアイコン画像にリンクを設定することもできます。

ペライチで作った自分のページからSNSへのリンクを、より視覚的にアピールすることができます。

キャプチャ画像

SNSのアイコン画像をページに設置するときは、画像設定ができるブロックをレイアウトに合わせて選択します。

キャプチャ画像
画像引用:ペライチ

画像の設定」からペライチで用意されたアイコン画像を選択することもできます。
必要なものを選び、ページに設置します。

キャプチャ画像
画像引用:ペライチ

設置したアイコン画像の「編集」をクリックし、「画像の設定」を再度開きます。

キャプチャ画像
画像引用:ペライチ

アイコンにSNSのリンク設定を行う場合は、画像の時同様、以下の手順で設定します。

①「リンク設定・拡大表示」を選択する
②「リンク追加」にチェックを入れる
③「直接URLを入力」を選択する
④自分のSNSアカウントのURLを入力する
(大体の場合、自分のSNSアカウントのトップページのURL)
⑤「別ウィンドウでリンクを開く」にチェックを入れる

設定が完了したら「保存」をクリックします。

これで、SNSへのリンクを設定することができました。

ちなみに、ペライチの有料プランを契約するとSNSのタイムラインなどをページに埋め込むこともできます。

今回の記事では、割愛しますが、ペライチの公式ページで紹介されているので、興味がある方は参考にしてみてください▼

ペライチヘルプ:SNSプラグイン連携機能の概要

動画

YouTubeの埋め込み用ブロックにYouTube動画のリンクを設定することもできます。

こちらは外部サイトへ遷移させるというよりは、ページに動画を表示させる方法になります。
便利な機能なので、外部サービスでプロモーション用の動画を作った際にはぜひ活用してみましょう。

ブロックの追加」から「画像/動画」を選択し、レイアウトに合わせて動画を埋め込むためのブロックをページに設置します。

キャプチャ画像
画像引用:ペライチ

設置した動画ブロックの「編集」をクリックし、「動画の埋め込み」の設定画面を開きます。

キャプチャ画像
画像引用:ペライチ

設定画面を開いたら、以下の手順で埋め込みたい動画を設定します。

①埋め込みたい動画のURLを入力
②「動画を更新する」をクリック

ちなみにYouTube動画のURLは、動画下の「共有」をクリックして取得します▼

キャプチャ画像
画像引用:ペライチ

共有」をクリックすると以下のようなウィンドウが表示されるので、「コピー」をクリックします。

キャプチャ画像
画像引用:ペライチ

コピーしたURLを動画の埋め込み」の設定画面にてペーストして動画を埋め込むことができます。

メニュー

メニューは主にページ内のコンテンツへ移動するために使用されますが、外部サイトへもリンクを設定することができます。

例えば、ペライチ以外のサービスで運用しているブログやWebページへ遷移させたい場合や、お問い合わせフォームをGoogleフォームなど別のプラットフォームを利用している場合などです。

キャプチャ画像

設置したメニューブロックの「編集」をクリックし、「ナビゲーションの設定」から設定を行います。

キャプチャ画像
画像引用:ペライチ

外部サイトのURLを設定する手順は以下の通りです。

①「直接URLを入力」を選択する
②設定したいURLを入力する
③別窓表示にする場合は「別ウィンドウ」にチェックを入れる

設定が完了したら「保存」をクリックします。

これでメニューに外部サイトへのリンクを設定することができました。

参考コンテンツ

以下は、参考にした動画や記事です。
今回の記事では紹介しきれなかった情報も掲載されています。

ペライチヘルプ:リンク先を別のタブ(ウインドウ)で開くように設定する

ペライチヘルプ:メールアドレスや電話番号にリンクを設定する

ペライチヘルプ:SNSプラグイン連携機能の概要

以下の動画は、とても分かりやすくリンクの設定方法を紹介しているのでおすすめです▼

出典:驚くほど簡単!HP作成・動画編集 ・Kindle出版

また、Udemyのペライチの使い方講座もおすすめです。

キャプチャ画像
画像引用:Udemy

たまにセールで一つの講座が2,000円くらいになっていることもあります。
Udemyの講座だとペライチでページを作るときのコツや、商品を売るための文章の書き方なども詳しく教えてくれるので、とても勉強になるのでおすすめです。

興味がある方は、以下のリンクからチェックしてみてください▼

タイトルとURLをコピーしました