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

外部連携の後処理で任意のエラーメッセージを表示する

このCookbookでは、外部連携の後処理で任意のエラーメッセージを表示する方法を紹介します。 この方法を活用することにより、外部連携の後処理ででエラーが発生した場合、利用者に内容を通知することができ …

no image

IM-BloomMaker Modifier の使い方

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。 modifier は、同じく 2020 Summer …

no image

IM-BIS アクション設定の「条件」の書き方

このCookbookでは、アクション設定の条件式の書き方を説明します。 この方法により入力値に応じてアクション設定の外部連携や入力モード変換などのイベントの実行をコントロールすることができます。 完成 …

IM-LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法

このCookBookでは、LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法について紹介しています。 承認ノードの到達処理で、申請者を参照者として登録し …

BloomMakerでワークフロー処理モーダルを利用してWorkflowコンテンツを作成する

このCookBookでは、2020 Spring(8.0.25)でリリースした下記の機能を利用して、Workflowのコンテンツを作成する方法を紹介します。 IM-BloomMakerのアクションに、 …