IM-BloomMaker アイコンのハイパーリンクを作成する方法

このCookBookでは、アイコンのハイパーリンクを作成する方法を紹介します。

完成イメージ

「ハイパーリンク」エレメントを使用して、文字だけではなくアイコンを組み込んだリンクを作成することができます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

このサンプルは、2020 Summer 版以降でインポートできます。

IM-BloomMaker のインポート画面からインポートしてください。

レシピ

1. 「ハイパーリンク」エレメントを配置する
2. 「アイコン」エレメントを配置する

1. 「ハイパーリンク」エレメントを配置する

コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。

「汎用」カテゴリにある「ハイパーリンク」を配置してください。

「href」プロパティで遷移したいリンク先を指定してください。また、「target」プロパティで「_blank」を指定するとリンク先を別タブで表示できます。

「ハイパーリンク」の中にある「ラベル」を選択し、「textContent」プロパティで文字を変更します。ここでは「home」としています。

ここまでの設定で、文字のみのハイパーリンクを作成することができました。次はアイコンを組み込んでいきます。

2. 「アイコン」エレメントを配置する

「パーツ（Bulma）」カテゴリにある「アイコン」を、「ハイパーリンク」の中に配置してください。

「iconClass」プロパティでアイコンのクラスを指定します。こちらを参考に好きなアイコンを指定してください。ここでは「fas fa-home」としています。

このように、「ハイパーリンク」の中に「アイコン」など他のエレメントを配置することができます。

また、「ハイパーリンク」の中にある「ラベル」を削除することで、アイコンのみのハイパーリンクを作成することもできます。

最後に

アイコンのハイパーリンクを作成する方法をご紹介いたしました。

アイコン以外にも「画像埋め込み」を使用して画像のハイパーリンクなども作成することもできますので、是非お試しください。

なお、本記事の内容をベースに、以下の開発動画を公開しています。
記事と合わせてご確認ください。

【intra-mart】アイコンのハイパーリンクを作成する【ローコード開発】