ドキュメントAEM 6.4Forms ガイド

インターフェイスのフォントの変更 changing-the-font-on-the-interface

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • User
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

AEM Forms Workspace に表示されるフォントを変更できます。 ユーザーインターフェイスの特定のセクションで使用されるフォントは、スタイルシートの対応するセクションで定義されます。 ユーザーインターフェイス上のフォントを選択的に変更できます。

AEM Forms Workspace のカスタマイズの一般的な手順に従います。要件に応じて、CSS、HTML、またはその両方をカスタマイズするための手順に従います。

  1. 既存のスタイルのフォントファミリを変更または追加します。
  2. フォント要素のフォントファミリインラインを変更またはHTMLします。
  3. スタイルを追加し、それをHTML要素に使用します。

例えば、トップナビゲーションバーのアンカーテキストのフォントを「Courier New」に変更するには、次の手順に従います。

  1. https://[server]:[port]/lc/crx/de/index.jsp にアクセスして CRXDE Lite にログインします。

  2. 次のいずれかの操作を行います。

    1. 既存のスタイルのフォントファミリを変更するには、/apps/ws/css にある newStyle.css ファイルに以下を追加します。

      code language-css 
      #topnav a {
   font-family: "Courier New";
}

    2. フォントファミリインラインを HTML 要素に追加するには、/libs/ws/js/runtime/templates/appnavigation.html ファイルを /apps/ws/js/runtime/templates/appnavigation.html にコピーします。

      /apps/ws/js/runtime/templates/appnavigation.html ファイルを次のようにして更新します。

      code language-none 
      <li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
<li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.todo.name')%></a></li>
<li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
<li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.preferences.name')%></a></li>

      編集のため /apps/ws/js/registry.js ファイルを開き、text!/lc/libs/ws/js/runtime/templates/appnavigation.html を text!/lc/apps/ws/js/runtime/templates/appnavigation.html に置き換えます。

    3. フォントファミリを定義するスタイルを追加するには、 /apps/ws/css にある newStyle.css ファイルに以下を追加します。

      code language-css 
      .myNewFontStyle a {
   font-family: "Courier New";
}

      HTML要素に font-family インラインを追加するには、/apps/ws/js/runtime/templates にある appnavigation.html ファイルに以下を追加します。

      code language-css 
      <div id="topnav" class="myNewFontStyle">
    <ul>
        <li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
        <li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>"><%= $.t('index.header.topnav.todo.name')%></a></li>
        <li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
        <li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
    </ul>
</div>

  3. ワークスペースを再起動し、変更を表示するためにブラウザーのキャッシュをクリアします。

change_font_before
図： フォントをカスタマイズする前の上部ナビゲーションバー

change_font_after
図： 最初のタブのフォントをカスタマイズした後の上部ナビゲーションバー

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da