CookBook

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

投稿日:

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

完成イメージ

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

完成サンプル

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

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

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

レシピ

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

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

No.1 メールに添付されているExcelファイル読み込み → ワークフロー申請

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、メールサーバと連携し、メールの添付ファイルの内容から自動的にワークフローを申請できます。 …

複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル …

no image

BloomMaker 独自の入力チェックでエラーとなった時に入力部品にエラーのハイライトを表示する方法

このCookBookでは、Accel Platform 2021 Springから利用可能になったプロパティ「入力規則エラーハイライト」について紹介しています。 「入力規則エラーハイライト」は、入力さ …

no image

eBuilderの起動時処理のパフォーマンス改善

このCookBookでは、ローカル環境でe Builderの起動を速くするための設定を行います。 そのために、特定の機能を外して速く起動させる設定の方法について説明します。 ただし本設定を行うことによ …

IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する方法について紹介しています。 完了案件でも、確認対象者が確認することはできます …