カスタム CSS と Javascript コードを使用して要素のスタイルをカスタマイズする

CSSとは？（CSSの意味）

CSS の略 カスケーディングスタイルシートこれは、Web ページの外観、レイアウト、デザインを制御するために使用されるスタイル言語です。
簡単に言えば、 CSSの意味 「物事の見た目」についてです。 フォント, 色, 間隔, ボーダー, ポジショニング ページ上の要素。

GemPagesは、ドラッグ＆ドロップエディタを通じて多くのビジュアル設定を自動的にサポートします。ただし、高度なデザインやユニークなデザインの場合は、 カスタムCSS の三脚と JavaScriptを 柔軟性と精度が向上します。

この機能は特に、 開発者, フリーランサー, 機関 完全にカスタマイズされたページ デザインとインタラクティブなエクスペリエンスを作成したい方。

GemPages でカスタム CSS、JavaScript、HTML を使用する理由は何ですか?

ステップ3： カスタム CSS、JavaScript、または HTML を挿入した後:

• 詳しくはこちら Save.
• プレビューモード GemPages で、デバイス間でデザインがどのように見えるかを確認します。

GemPages 要素のスタイル設定によく使われるカスタム CSS の例

以下は一般的な カスタムCSSの例 色、フォント サイズ、間隔、境界線などの GemPages 要素のスタイルをすばやく調整するために使用できます。

これらのスタイルを適用するには、要素を選択して右クリックし、 カスタムコードにCSSを貼り付けます CSSタブ.

CSSでテキストの色を変更する

デフォルトの色設定以外にテキストの色をカスタマイズする場合に使用します。

使用例:

• 見出しや重要なメッセージを強調する
• 16進コードを使用してブランドカラーを正確に一致させる

フォントサイズとフォントの太さを設定する

これにより、ページ全体のタイポグラフィの一貫性を制御できます。

これを使用して次のことができます。

• 見出しを目立たせる
• 長いテキストセクションの読みやすさを向上させる

背景色のカスタマイズ

組み込みの背景設定よりも詳細な制御が必要な場合:

これは次の場合に役立ちます:

• セクション間のコントラストの作成
• プロモーションや行動喚起エリアを強調する

パディングとマージンを調整する

要素の周囲の間隔を制御して、よりすっきりとしたレイアウトを実現します。

ヒント: 適切な間隔を設定すると、視覚的な階層とユーザー エクスペリエンスが向上します。

境界線と角丸を追加する

境界線を使用してコンテンツを視覚的に分離します。

一般的な使用例:

• カード
• 機能ブロック
• お客様の声

CSSでボタンのスタイルを変更する

ブランドに合わせてボタンのスタイルをオーバーライドできます。

ホバー効果の例

CSS ホバーを使用して微妙なインタラクション効果を追加します。

ホバー効果を使用すると、重い JavaScript を使用せずにエンゲージメントを向上させることができます。

GemPagesでカスタムコードを使用するためのベストプラクティス

• 入れておくか CSS の三脚と JavaScriptを 整理されていて読みやすい。
• レスポンシブなデザインを確実にするために、さまざまなデバイスでテストします。
  
• カスタムスクリプトを多用するとページの表示速度が低下する可能性があるため、使用は避けてください。拡張機能内のすべてのブロックのLiquidコードの合計サイズは、 100 KB.
• 常に 作業をバックアップする 重要なコード変更を行う前に。