ブログ

ブログ

2018.12.20

テキストや画像へのリンクの設定方法

ホームページを作る場合、ページ内のテキストや画像にリンクを設定することが多々あります。
そんなリンク設定もRabbity-CMSを使用すれば、エディタの機能を利用することで簡単に設定できます。
本記事では、テキストや画像のリンク設定方法ついて詳しく解説していきます。

リンクの設定は「ダイレクト編集」または「フルエディタ編集」で

ページ内のテキストや画像にリンクを設定したい場合は、「ダイレクト編集」または「フルエディタ編集」で行います。
エディタ機能を使うことでリンクの設定・編集・解除などが簡単にできるので覚えておいて損はない機能です。

ダイレクト編集機能の開き方

「ダイレクト編集機能」は、編集したい箇所でマウスをダブルクリックすることで開くことができます。
マウスのカーソルを置いた時に青色の枠線が表示される箇所が機能が使える対象となります。
ただし、見出し文や画像へのリンク設定はダイレクト編集機能ではできません。
見出し文や画像へのリンク設定は「フルエディタ編集機能」を利用しましょう(フルエディタ編集機能の開き方へ)。

1.青色の枠線が表示される箇所でダブルクリックします。

青枠の箇所をダブルクリック

2.ダイレクト編集機能が開き、画面上部にエディタが表示されます。

ダイレクト編集機能

フルエディタ編集機能の開き方

「フルエディタ編集機能」は、編集したい箇所で右クリックすると表示されるショートカットメニューから開くことができます。
ショートカットメニューの「フリーページ」→「フルエディタ編集」を選択すると開きます。
フルエディタ編集機能は、テキストでも画像でも使用できますが、フリーページのみで使用できる機能になります。

1.編集したい箇所で右クリックし、ショートカットメニューの「フリーページ」→「フルエディタ編集」を選択します。

ショートカットメニューからフルエディタ編集機能へ

2.フリーページ内の内容が全て表示されたフルエディタ編集機能が開きます。

フルエディタ編集機能

リンクの設定方法

1.リンクを設定したい箇所で「ダイレクト編集機能」または「フルエディタ編集機能」を開きます。

本文に簡単に設定したい場合は「ダイレクト編集機能」が便利です。

ダイレクト編集機能

見出し文や画像の場合は「フルエディタ編集機能」を使用します(「フルエディタ編集機能」は、本文へのリンク設定でも使用できます)。

フルエディタ編集機能

2.リンクを設定したいテキストまたは画像を選択します(例ではフルエディタ編集機能を使用)。

リンクを設定したい箇所を選択

3.エディタのツールバーの[リンク挿入/編集]ボタン()をクリックします。

リンク挿入/編集ボタンをクリック

4.ハイパーリンクの設定画面が表示されるので、「ハイパーリンク情報」タブでリンクタイプを設定します。

ハイパーリンクの設定画面
リンクタイプ 説明
URL

任意のURLや、サーバーブラウザにアップロードしたファイルなどにリンクしたい場合に選択します。
URLの場合は、まず該当する「プロトコル」を選択し、「URL」に「プロトコル」以降のURLを入力します。
ファイルなどにリンクする場合は、下の[サーバーブラウザ]ボタンをクリックし、リンクしたいファイルを選択します。

サイト内リンク

同サイト内のページにリンクしたい場合に選択します。
「サイト内コンテンツを選択」欄から該当するページを選択します(下の[表示方法切替]ボタンを押すとタイトル表示からURL表示に切り替わります)。
[ページを探す]ボタンは、該当するページを直接表示させ、[OK]ボタンを押すことで自動で該当ページのURLを取得できるので、該当するページがわからない場合などに便利です。

このページのアンカー

同一ページ内のアンカーにリンクしたい場合に選択します。
「アンカー名」から該当するアンカーを選択します。
ページ内にアンカーが設定されていない場合はドロップダウンリストが表示されませんので、アンカーは事前に設定しておきましょう。
アンカーの設定方法については「アンカーの設定方法」をご覧ください。
※ダイレクト編集機能でアンカーへのリンクを選択した場合、同ページではなく同コンテンツパーツ内のアンカーしか表示されません。フルエディタ編集機能であれば同ページ内のアンカーが全てリストに表示されますのでアンカーへのリンクの設定はフルエディタ編集機能をご利用ください。

E-Mail

メールアドレスへリンクを設定したい場合に選択します。
このE-Mailを設定しているリンク元をクリックすると、ユーザーの使用しているメーラーの新規作成画面が起動します。

5.リンクタイプを「URL」または「サイト内リンク」にした場合は、「ターゲット」タブの設定も可能です。

ターゲットの設定
ターゲット 説明
<なし> 現在表示中の同ウィンドウでリンク先のページを表示します。
<ポップアップウィンドウ> 現在表示中のウィンドウとは別に、新しいウィンドウをポップアップで立ち上げてリンク先のページを表示します。
詳しい設定方法は下記の「ポップアップウィンドウの設定」を参照してください。
「新しいウィンドウ(_blank)」 リンク元のウィンドウとは別に、新しいウィンドウやタブにリンク先のページが表示されます。
「同じウィンドウ(_self)」 <なし>と同じ設定になります。

※一般的に使用される設定のみの解説となります。

6.設定が完了後、[OK]ボタンを押し、保存するとリンクが設定されます。

リンクが設定される

ポップアップウィンドウの設定

ハイパーリンクの設定で<ポップアップウィンドウ>を選択した場合、ポップアップウィンドウの細かい設定が可能です。

ポップアップウィンドウの設定画面
項目名 説明
ポップアップウィンドウ名 立ち上げるポップアップ画面ごとに名前をつけて操作することができます。
複数のリンク先のポップアップウィンドウ名に同じ名前を設定すると、その同じ名前のポップアップウィンドウ内に次々と該当のリンク先ページが表示されます。
リサイズ可能 ユーザーがウィンドウのサイズを自由に変更できるようにするかどうかを設定します。
  • ロケーションバー
  • メニューバー
  • スクロールバー
  • ステータスバー
  • ツールバー
ポップアップされるウィンドウに各バーを表示するかしないかを設定します。チェックを入れると表示、チェックを外すと非表示になります。
全画面モード
(IE)
チェックを入れると、ユーザーがインターネットエクスプローラー(IE)を使用してウェブサイトを見ている場合、ポップアップウィンドウを全画面で表示します。
開いたウィンドウに連動して閉じる
(Netscape)
チェックを入れると、ユーザーがネットスケープ(Netscape)を使用してウェブサイトを見ている場合、リンク元のウィンドウを閉じた際に、リンク先のポップアップウィンドウも閉じるように設定します(Netscape4 以降のみ対応)。
幅・高さ ポップアップウィンドウの縦幅と横幅を指定することができます。任意の数値を入力してください(単位:ピクセル)。
左端からの座標で指定・
上端からの座標で指定
モニターの左上角を基点とし、設定した位置にポップアップウィンドウを表示することができます(単位:ピクセル)。

リンクの編集・削除

リンクの編集

リンクを編集したい場合は、編集機能を開き、リンクが設定されたテキストを選択した状態で、ツールバーの[リンク挿入/編集]ボタン()をクリックします。

ツールバーからのリンクの編集

また、リンクが設定された箇所でショートカットメニューから「リンク編集」を選択することでも可能です。

ショートカットメニューからのリンクの編集

リンクの削除

リンクを削除したい場合は、編集機能を開き、リンクが設定されたテキストを選択した状態で、ツールバーの[リンク削除]ボタン()をクリックします。

ツールバーからのリンクの削除

また、リンクが設定された箇所でショートカットメニューから「リンク削除」を選択することでも可能です。

ショートカットメニューからのリンクの削除

Rabbity-CMSに
関するお問い合わせ

TEL:048-421-8571
営業時間 9:00-17:00(土日祝除く)

お問い合わせフォーム