テンプレート処理中にエラーが発生しました。 
Java method "com.liferay.portal.json.JSONFactoryImpl.createJSONObject(String)" threw an exception when invoked on com.liferay.portal.json.JSONFactoryImpl object "com.liferay.portal.json.JSONFactoryImpl@51577ebb"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: navigationJSONObject = jsonFactoryUti...  [in template "17855804202317#32484267#LEARN-ARTICLE-NAV" at line 4, column 9]
----
1<#assign 
2	groupFriendlyURL = themeDisplay.getScopeGroup().getFriendlyURL() 
3	groupPathFriendlyURLPublic = themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL 
4	navigationJSONObject = jsonFactoryUtil.createJSONObject(navigation.getData()) 
5	navigationMenuItems = 
6		{ 
7			"Analytics Cloud": { 
8				"image": "/documents/d${groupFriendlyURL}/analytics_c-svg", 
9				"title": "Analytics Cloud", 
10				"url": "analytics-cloud" 
11			}, 
12			"Commerce": { 
13				"image": "/documents/d${groupFriendlyURL}/commerce_product-svg", 
14				"title": "Commerce", 
15				"url": "commerce" 
16			}, 
17			"DXP": { 
18				"image": "/documents/d${groupFriendlyURL}/dxp_p-svg", 
19				"title": "DXP / Portal", 
20				"url": "dxp" 
21			}, 
22			"Liferay Cloud": { 
23				"image": "/documents/d${groupFriendlyURL}/dxp_c-svg", 
24				"title": "Liferay Cloud", 
25				"url": "liferay-cloud" 
26			}, 
27			"Reference": { 
28				"image": "/documents/d${groupFriendlyURL}/reference-svg", 
29				"title": "Reference", 
30				"url": "reference" 
31			} 
32		} 
33 
34	breadcrumbJSONArray = navigationJSONObject.getJSONArray("breadcrumb") 
35	childrenJSONArray = navigationJSONObject.getJSONArray("children") 
36	parentJSONObject = navigationJSONObject.getJSONObject("parent") 
37	productJSONObject = breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self") 
38	siblingsJSONArray = navigationJSONObject.getJSONArray("siblings") 
39/> 
40 
41<div class="learn-article-nav"> 
42	<#if productJSONObject?has_content && productJSONObject.getString("title")?has_content && navigationMenuItems[productJSONObject.getString("title")]?has_content && navigationMenuItems[productJSONObject.getString("title")].title?has_content> 
43		<div 
44			class="dropdown learn-article-nav-root learn-dropdown" 
45		> 
46			<div class="learn-article-nav-item"> 
47				<div class="d-flex"> 
48					<div class="learn-article-nav-image"> 
49						<img 
50							class="lexicon-icon lexicon-icon-caret-bottom product-icon" 
51							role="presentation" 
52							src='${navigationMenuItems[productJSONObject.getString("title")].image}' 
53							viewBox="0 0 512 512" 
54						/> 
55					</div> 
56 
57					<span class="learn-article-nav-text">${navigationMenuItems[productJSONObject.getString("title")].title}</span> 
58				</div> 
59 
60				<div id="dropdown-icon"> 
61					<svg 
62						class="lexicon-icon lexicon-icon-caret-bottom" 
63						role="presentation" 
64						viewBox="0 0 512 512" 
65					> 
66						<use xlink:href="/o/admin-theme/images/clay/icons.svg#caret-bottom"></use> 
67					</svg> 
68				</div> 
69			</div> 
70 
71			<ul class="dropdown-menu learn-dropdown-menu"> 
72				<#list navigationMenuItems as key, value> 
73					<li> 
74						<a 
75							class="dropdown-item learn-article-nav-item" 
76							href="/w/${navigationMenuItems[key].url}/index" 
77							tabindex="4" 
78						> 
79							<span class="d-flex"> 
80								<span class="learn-article-nav-image"> 
81									<img 
82										class="lexicon-icon lexicon-icon-caret-bottom product-icon mt-0 mr-2" 
83										role="presentation" 
84										src="${value.image}"height: 25px; margin-left: 5px; max-width: none; width: 25px; 
85										viewBox="0 0 512 512" 
86									/> 
87								</span> 
88								<span class="learn-article-nav-text">${value.title}</span> 
89							</span> 
90 
91							<#if navigationMenuItems[productJSONObject.getString("title")].url == value.url> 
92								<span> 
93									<@clay["icon"] symbol="check" /> 
94								</span> 
95							</#if> 
96						</a> 
97					</li> 
98				</#list> 
99			</ul> 
100		</div> 
101	</#if> 
102 
103	<div class="learn-article-nav-content"> 
104		<#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content> 
105			<div class="learn-article-nav-item learn-article-nav-parent liferay-nav-item p-2"> 
106				<div class="mr-2"> 
107					<a 
108						href='${parentJSONObject.getString("url")}' 
109					> 
110						<svg 
111							class="lexicon-icon lexicon-icon-angle-left" 
112							role="presentation" 
113							viewBox="0 0 512 512" 
114						> 
115							<use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use> 
116						</svg> 
117					</a> 
118				</div> 
119 
120				<span>${parentJSONObject.getString("title")}</span> 
121			</div> 
122		</#if> 
123 
124		<#if childrenJSONArray.length() gt 0> 
125			<ul class="m-0 p-2"> 
126				<#list 0..childrenJSONArray.length()-1 as i> 
127					<li class="learn-article-nav-item"> 
128						<a 
129							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}' 
130							href="${childrenJSONArray.getJSONObject(i).url}" 
131						> 
132							<span>${childrenJSONArray.getJSONObject(i).getString("title")}</span> 
133						</a> 
134					</li> 
135				</#list> 
136			</ul> 
137		<#elseif siblingsJSONArray.length() gt 0> 
138			<ul class="m-0 p-2"> 
139				<#list 0..siblingsJSONArray.length()-1 as i> 
140					<li class="learn-article-nav-item"> 
141						<a 
142							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}' 
143							href="${siblingsJSONArray.getJSONObject(i).url}" 
144						> 
145							<span>${siblingsJSONArray.getJSONObject(i).getString("title")}</span> 
146						</a> 
147					</li> 
148				</#list> 
149			</ul> 
150		</#if> 
151	</div> 
152</div> 
フィードバックを送信

スタイルリファレンス

コレクション表示フラグメントを除くすべてのフラグメントには、スタイル設定セクションがあります。 スタイル設定を使って、フラグメントのルックアンドフィールを設定します。 これらのオプションの多くはCSSクラスに対応しており、スタイルブックでサポートされるトークンが定義されています。 その他のフラグメント設定オプションについては、 一般設定リファレンス および フラグメントサブ要素リファレンス を参照してください。

note

デフォルトでは、スタイル設定はフラグメント全体に適用されるため、フラグメント内のすべての要素は、そのCSSが許す限り、これらの変更を継承します。それ以外の場合、内部要素は無視されます。 カスタムフラグメントを設定することで、一部の内部要素にのみスタイル変更を適用することができます。 詳しくは、 フラグメントにスタイルを適用する を参照してください。

フラグメントのスタイルメニューにアクセスするには、

  1. フラグメントをサポートするページまたはテンプレートの編集を開始します。

  2. サイドバーメニューの ブラウザー パネル(Browser) を開き、目的のフラグメントを選択する。

    または、ページやテンプレート内の目的のフラグメントをクリックします。

  3. ページ要素サイドメニューの スタイル タブをクリックします。

Access a fragment's Styles settings in the Browser panel of the editing sidebar menu.

多くのスタイルには、スタイルブックでサポートされるトークンが定義されています。 トークンの値はスタイルブックから継承することができ、その場合は表示される値の横に青い点または value from stylebook アイコン（！ スタイルブックからの値 ）が表示されます。 詳細については、 Creating a Style Book および スタイルブックトークンの定義 を参照してください。

Visual representation of inherited token values with blue dots

note

Liferay 7.4 U31+/GA31+ では、画面上部のデバイスボタンをクリックするか、背景画像に adaptive media を設定することで、個々のビューポートにフラグメントスタイルを設定できます。 それ以前のバージョンでは、さまざまなデバイスに対してテキストと間隔のスタイルのみを設定できます。

間隔

liferay 7.4 U47+/GA47+用。

設定する間隔寸法のボタンをクリックします。 内側のボタンはフラグメントのパッディングを決定し、外側のボタンはマージンを決定します。 この文脈では、 padding はフラグメントのフレームとそのコンテンツの間のスペースを指し、 margin はフラグメントのフレームとその周囲のコンテキストの終わりの間のスペースを指す。

When you click any of the regions, choose the desired spacing from the list of sizes shown.

パッディングやマージンのボタンをクリックすると、既存のトークンから選択するか、変更値を入力することができます。 定義済みのトークンは、スタイルブックの ［Spacing］ カテゴリにある番号付きの［Spacer］フィールドに由来します。 カスタム値を入力する場合は、その単位を選択します（例：px、rem）。 フィールドを初期値に戻すには、 リセット ボタン ( Reset ) をクリックします。

note

7.4 U46/GA46以前のバージョンでは、スタイルブックがスペーシング値の定義にピクセル以外の単位を使用している場合（例えばrem）、フラグメントの設定時にピクセルに変換されます。

テキストボックス

フラグメントのテキストをフォーマットします。

項目説明
フォントファミリー (フォントファミリー )要素のフォントを指定します。
フォントウェイト ( フォントウェイト )テキスト内の太字または細字の表示方法を設定します。
フォントサイズ ( フォントサイズ )フォントのサイズを設定します。
文字色 ( 文字色 )テキストの色を選択します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳しくは、 フラグメント設定タイプのリファレンス を参照してください。
文字揃え ( 左揃え 中央揃え 右揃え Justify )。要素内のテキストの水平方向の配置を指定します。 左 、 中央 、 右 、または ジャスティファイ から選択します。

Format the fragment's text.

背景

フラグメントの背景を構成します。

項目説明
背景色 ( 背景色 )パレットから背景色を選択します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳しくは、 フラグメント設定タイプのリファレンス を参照してください。
画像ソースDirect に設定すると、ユーザーは背景画像をアップロードできます。 マッピング に設定すると、ユーザーはドキュメントとメディア、ウェブコンテンツ、ブログ、カテゴリーから選択できる。
背景画像 (直接)ライブラリから画像を選択するか、画像URLを入力します。
アイテム (マッピング)ドキュメントとメディア、Webコンテンツ、ブログ、またはカテゴリから特定の項目に背景をマップします。 選択したら、 Actions ボタン(Actions button) をクリックし、アイテムやその権限を編集したり、使用状況を確認したりします。
フィールド (マッピング)項目のどのフィールドを背景画像に使用するかを決定します。

Configure the fragment's background.

note

背景を項目のフィールドにマッピングする場合、そのストラクチャー内のフィールドからのみ選択できます。 たとえば、Webコンテンツ項目を選択した場合、そのストラクチャー内の画像フィールドからのみ選択でき、コンテンツ項目内の画像からは選択できません。

枠線

フラグメントの枠線の幅、半径、および色を決定します。

項目説明
ボーダー幅 ( ボーダー幅 )要素の4つの枠線の幅を設定します。 単位 ボタン ( Units ) をクリックして、ボーダーの幅の単位 (例: px, rem) を選択します。 リセット** ボタン ( Reset ) をクリックして、フィールドを初期値に戻します。
ボーダー半径 ( ボーダー半径 )要素の角の半径を定義し、丸みを帯びた角を追加できます。
ボーダーカラー ( ボーダーカラー )要素の4つの枠線の色を設定します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳しくは、 フラグメント設定タイプのリファレンス を参照してください。

Determine the width, radius, and color of the fragment's border.

効果

フラグメントの不透明度を設定し、影を持たせるかどうかを決定します。

項目説明
不透明度透明度レベルを設定します。 100がデフォルトで、0は透明です。
影 ( Shadow )ボックスの周囲に影を追加します。 小、中、大の影から選択します。

Set the fragment's opacity and determine whether it has a shadow.

Liferay 7.4 U20以前

7.4 U20/GA20以前のバージョンでは、間隔の構成はマージンとパディングのセクションに分かれています。

マージン

フラグメントのフレームとその周囲のコンテキストの終わりの間のスペースを構成します（たとえば、フレームとページの端の間、またはフレームとそのコンテナまたはグリッドの端の間）。

項目説明
上マージン要素の上マージンを設定します。
下マージン要素の下マージンを設定します。
左マージン要素の左マージンを設定します。
右マージン要素の右マージンを設定します。

パッディング

フラグメントのフレームとそのコンテンツの間のスペースを構成します。

項目説明
上パディング要素の上パッディング（間隔）を設定します。
下パディング要素の下パッディングを設定します。
左パディング要素の左パッディングを設定します。
右パディング要素の右パッディングを設定します。

関連トピック

Capability:
Sites
Resource Type:
Official Documentation
Feature:
Fragments
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted