null Liferay 7.3のスタイルブック機能の紹介

こんにちは。おおたにです。

 

今回はLiferay 7.3の新機能であるスタイルブック機能について紹介したいと思います。

以前はWebページの色やフォントサイズ、間隔等のスタイルを変更するためにテーマを作成する、もしくはページ毎にcssを直接指定する必要がありました。7.3ではそのスタイルをスタイルブックという形で事前定義しておき、ページ毎に適用できるようになりました。

例えば、ベースのデザインはテーマとして作成しつつ一部のページだけ少しスタイルを変更したいというような要件があった場合に、スタイルブックを使うことで、Webページ作成者がcssを直接書くことや開発者がテーマを追加開発することなく、スタイル変更をページに適用することができます。また、事前定義したスタイルブックを再利用できるため、複数のページに変更を適用する際にデザイン変更の統一感を担保することが可能になります。Webページ作成者はこれまでよりも簡便にデザイン変更を行うことができるようになります。

では、具体的な機能について見ていきましょう。

 

スタイルブックを作成する

まずはスタイルブックを作成します。スタイルブックはサイト単位で作成します。目的のサイトに移動し、画面左上の「メニュー」アイコン->デザイン->スタイルブックをクリックします。

画面右上の「追加」アイコンをクリックし、スタイルブックの名前を入力して「保存」をクリックします。

これでスタイルブックの定義が作成されました。デフォルトではクラシックテーマに沿ったスタイルが設定されているので、適宜スタイルを変更していきます。以下の内容を設定することができます。

  • 色体系(Color System) : ページ上の各種要素の色の設定
  • 間隔(Spacing) : ページ上の要素間のスペースの設定
  • 共通(General) : HTMLボディやバックグラウンド色、枠線や影のスタイル等、全てのページに現れる要素の設定
  • レイアウト(Layout) : ページ上に配置するコンテナ要素の幅の設定
  • 文字体裁(Typography) : フォントやフォントサイズの設定
  • ボタン(Buttons) : ボタンのルック&フィール

画面左上のページプレビューからプレビューするページを選択することができるので、実際の見栄えを確認しながらスタイルブックを設定することができます。また、サンプルカテゴリにある「クラシックテーマのスタイルガイドサンプル(Classic Theme Style Guide Sample)」ウィジェットを配置しておくと、プレビュー時に各要素がどのように表示されるのかの確認に役立ちます。以下の例では本文の背景色を変更しています。

設定が終わったら「公開」ボタンをクリックして公開します。なお、この時点ではスタイルブックはどのページにも適用されません。

 

スタイルブックを適用する

続いて、作成したスタイルブックをページに適用します。適用したいページの「編集」アイコン  をクリックし、画面右の「ページデザインオプション」をクリックします。「スタイルブック」タブに移動すると利用可能なスタイルブックが表示されるので、適用したいスタイルブックを選択します。元に戻す場合は「マスターから継承」を選択します。

最後に「公開」をクリックして設定変更を保存します。これでページにスタイルブックが適用されました。

なお、サイト内のページに一括でスタイルブックを適用したい場合は、「メニュー」アイコン->デザイン->スタイルブックで、一括適用したいスタイルブックのアクションメニューの「デフォルトにする」をクリックします。そのスタイルブックにデフォルトマークが付き、全てのページにスタイルブックが適用されるようになります。この場合、ページ毎のスタイルブック設定の「マスターから継承」はテーマからの継承ではなくデフォルトスタイルブックからの継承となります。

適用したら、実際にWebページにアクセスしてみましょう。スタイルブックが適用され、スタイルブックに設定した変更内容が反映されていることが確認できます。

 

今回の紹介は以上です。サイト管理者レベルでWebページのデザインを簡単に変更できることがお分かりいただけたかと思います。Liferay 7.3以降でないと使えない機能ですが、是非お試しいただければと思います。

RANKING
2021.1.08
2020.12.28
2020.12.01
2020.10.30
2020.12.18