リンクパーツを使う

テキストの任意の場所に、サイト内にある別のページへのリンクや、外部のウェブサイトなどへのリンクを設定できます。

リンクパーツを設定する

書式設定エリアの〈リンク〉から〈リンクを作成〉をクリックします。

リンクパーツ設定が表示されます。

〈リンクの役割〉

「テキストリンク」「リンクの開始タグ」「リンクの終了タグ」より、リンクの種類を選びます。
開始タグ/終了タグを設定することで、その間のコンテンツ全てをリンクパーツとして設定することが可能です。

〈テキスト〉

リンクとして表示するテキストを入力します。Webブラウザではテキストリンクとして表示されます。

〈リンク先〉

サイト内のページ、または外部のWebサイトへのリンクを直接指定できます。ポップアップメニューから、サイト内の別のページをリンク先として簡単に選べます。外部のWebサイトへのリンクを設定する場合は、入力欄にサイトのURLを直接入力します。

▼メールリンク設定

クリックしすると、メールソフトが起動します。(指定したメールアドレスが既に宛先に設定された状態)
設定には、リンク先に以下の内容を入力してください。

 mailto:受信したいメールアドレス   例)mailto:info@xxxxxx.co.jp

▼電話発信リンク設定

スマートフォンでクリックすると、電話発信します。
設定には、リンク先に以下の内容を入力してください。

 tel:電話番号   例)tel:03********

※お使いのブラウザや閲覧環境により、すべての端末で動作可能ではありません。予めご了承ください。

リンクアイコン

リンクの前後にアイコンを設定できます。〈アイコン画像〉をクリックし、〈ファイルを選択〉か〈アイコンフォントを選択〉を選びます。

〈ファイルを選択〉を選ぶと「画像を選択してください。」ダイアログボックスが表示されます。ここからリンクアイコンを選びます。

実際にリンクを設定したところです。

〈アイコンフォントを選択〉を選ぶと「アイコンフォント」ダイアログボックスが表示されます。ここからアイコンフォントを選びます。

〈ページ遷移〉

リンクをクリックした際の動作を設定します。

〈リンクデザイン〉

リンクパーツの詳細のデザインが行えます。
※リンクの開始タグ/終了タグには、デザイン設定はできません。

〈カスタムデータ属性〉

「カスタムデータ属性名」と「date名」を設定する事で、HTMLのaタグにオリジナルの属性を設定する事ができます。

カスタムデータ属性はHTMLに関する知識が必要となります。
また、入力内容、設定後の動作についてはサポート対象外となります。

リンクのターゲットを設定する

リンク先のターゲット名が必要な場合などに、リンクパーツ設定のページ遷移からターゲットを設定します。〈ターゲット〉をクリックして、リンク先を開く際の設定も行えます。

〈ターゲット〉

特定のウィンドウやフレームで開きたい場合にターゲット名を指定します。〈_blank〉などの既定の名前はポップアップメニューから選択できます。

〈_blank〉

名前のないウィンドウで開きます。リンクをクリックするたびに新しいタブやウィンドウが開きます。

〈_self〉

このウィンドウ(またはフレーム、タブ)で開きます。何も設定しない場合と同じです。

〈_top〉

フレームが設定されている場合はそれを解除して開きます。

〈_parent〉

フレームが設定されている場合は親フレームで開きます。

リンクをポップアップで開く

リンク先を常にポップアップウィンドウで開きたい場合は、「リンクパーツ設定」の〈ポップアップ〉を選択します。〈設定〉をクリックして、ポップアップウィンドウのサイズなどを設定します。

【リンクテキストの色や文字の大きさの変更方法について】

リンクテキストのサイズは、選択したテンプレート(サイト)のブロックスキンやDress※によって自動設定されます。
※Dressは「レスポンシブ形式」のサイトのみの設定となり、「レガシー形式」のサイトにはありません。

*参考情報*
色やフォントサイズなどの詳細を指定したい場合は[CSS詳細設定]より設定を行ってください。
設定方法の概要は下記オンラインマニュアルをご参照ください。
CSSプロパティの種類と内容

リンクボタン編集を行う

〈デザイン〉をクリックすると、リンクボタンの編集画面が表示されます。

class名

リンクデザインのテンプレートを選択します。

デフォルト/重要/注意・・・リンクデザインを選択します。

別名で保存・・・設定したデザインを保存します。保存されたデザインは、【B】テンプレート内の「ユーザー設定」から選択できます。

削除・・・選択しているリンクデザインを削除します。


テンプレート

テンプレートデザインからリンクを選択します。class名を選択したうえでテンプレートデザインを選択できます。

SAMPLE

選択中のリンクデザインのサンプル画像が表示されます。

リンクのデザイン

背景色・文字色・ボーダーのカラーデザインを設定できます。

マウスオーバー時のデザイン

マウスオーバー時の背景色・文字色・ボーダーのカラーデザインを設定できます。

詳細編集モードにする

チェックを入れると、詳細編集モードに切り替わります。CSSのlessの記述が可能です。

詳細編集モードでの記述については、サポート外となります。
また、詳細編集モードに変更後、編集した配色によっては、簡易編集モードに戻しても、配色が戻りません。