インターフェイスのフォントの変更 changing-the-font-on-the-interface
AEM Forms Workspace に表示されるフォントを変更できます。 ユーザーインターフェイスの特定のセクションで使用されるフォントは、スタイルシートの対応するセクションで定義されます。 ユーザーインターフェイス上のフォントを選択的に変更できます。
AEM Forms Workspace のカスタマイズの一般的な手順に従います。要件に応じて、CSS、HTML、またはその両方をカスタマイズするための手順に従います。
- 既存のスタイルのフォントファミリを変更または追加します。
- フォント要素のフォントファミリインラインを変更またはHTMLします。
- スタイルを追加し、それをHTML要素に使用します。
例えば、トップナビゲーションバーのアンカーテキストのフォントを「Courier New」に変更するには、次の手順に従います。
-
https://[server]:[port]/lc/crx/de/index.jsp
にアクセスして CRXDE Lite にログインします。 -
次のいずれかの操作を行います。
-
既存のスタイルのフォントファミリを変更するには、/apps/ws/css にある newStyle.css ファイルに以下を追加します。
code language-css #topnav a { font-family: "Courier New"; }
-
フォントファミリインラインを 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
に置き換えます。 -
フォントファミリを定義するスタイルを追加するには、 /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>
-
-
ワークスペースを再起動し、変更を表示するためにブラウザーのキャッシュをクリアします。
図: フォントをカスタマイズする前の上部ナビゲーションバー
図: 最初のタブのフォントをカスタマイズした後の上部ナビゲーションバー