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