現在表示中:

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

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

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

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

  1. http://[サーバー]:[ポート]/lc/crx/de/index.jsp にアクセスして CRXDE Lite にログインします。

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

    1. 既存のスタイルでフォントファミリーを変更するには、/apps/ws/css にある newStyle.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 ファイルを次のようにして更新します。

      <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.htmltext!/lc/apps/ws/js/runtime/templates/appnavigation.html に置き換えます。

    3. フォントファミリを定義するスタイルを追加するには、/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>
  3. Workspace を再起動して変更が表示されるようにブラウザのキャッシュをクリアします。

change_font_before
フォントをカスタマイズする前のトップナビゲーションバー

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー