カスタムコードを使用してボタン要素のアイコンサイズを変更する方法

レイアウトによっては、ボタンのテキストや全体のデザインに合わせてアイコンのサイズを調整したい場合があります。現在、ボタン要素内のアイコンサイズは、組み込みのスタイル設定オプションから直接調整することはできません。アイコンサイズをカスタマイズするには、要素設定内に短いCSSコードを追加してください。

このガイドでは、変更を正しく適用するための各手順を順を追って説明します。

アイコン付きボタンレイアウトについて

その ボタン要素 GemPagesでは、設定方法に応じてさまざまなレイアウトがサポートされます。

ボタンのレイアウトには、大きく分けて2種類あります。

• アイコンなしボタン：このレイアウトにはテキストのみが含まれており、アイコンは含まれていません。
• アイコン付きボタン: このレイアウトにはアイコンが含まれています ボタンテキストの前にアイコンを使うことで、ボタンの視覚的な魅力が増し、認識しやすくなります。

カスタムコードを使用してボタン要素のアイコンサイズを変更する方法

ボタン要素内のアイコンサイズを調整するには、以下の手順に従ってください。

ステップ1：アイコンを含むボタン要素を選択します

GemPages編集者より：

• ボタン要素が配置されているページまたはテンプレートを開きます。
• 直接クリックして ボタン要素 アイコンが含まれているもの。
• 選択したボタンのテキストの前にアイコンが配置されていることを確認してください。

選択すると、要素設定パネルがエディターの左側に表示されます。

続行する前に、正しいボタンを編集していることを確認してください。

ステップ2：カスタムコードエディタを開く

ボタン要素を見つけた後：

• 右クリックする アイコンを含むボタン要素上。
• ドロップダウンメニューから、 カスタムコード.

この操作を行うと、カスタムコードエディタが開きます。そこで、この特定の要素にのみ適用されるCSSを追加できます。

このセクションでは、選択した要素に追加のスタイルを適用できます。

ステップ3：アイコンサイズを変更するCSSコードを追加する

内部 カスタムCSS フィールドに、以下のコードを貼り付けてください。

このコードは、選択されたボタン内のアイコンのサイズを制御します。

置換：

• .ElementClass 上部に表示されているクラスを使用します。
• 50px ご希望のサイズで。

コードを入力したら、クリックしてください 保存します。

アイコンのサイズは、入力した値に基づいて更新されます。

ステップ4: 結果をプレビューする

公開後：

• ページをプレビューします。
• アイコンのサイズがボタンのテキストとバランスよく見えるか確認してください。
• デスクトップ版とモバイル版の両方でレイアウトをテストしてください。

必要に応じて、エディターに戻り、サイズ値を再度調整してください。

アイコンのサイズがデザインに合うまで、この手順を繰り返してください。

適切なアイコンサイズの選び方

適切なアイコンサイズは、ボタンのサイズとテキストスタイルによって異なります。

以下は、一般的に使用されるサイズ範囲です。

これらの範囲を出発点として、レイアウトに合わせて調整してください。