テーマ

目次

公式テーマ一覧

a-blog cms をインストールすると themes フォルダに公式テーマが含まれています。公式テーマをベースにカスタマイズをすることで動作の安定した様々なサイトを少ない工数で制作することが可能です。また、初心者の方は公式テーマを使用することで a-blog cms の機能やテーマの構成を自然に学ぶことができます。

それでは早速、それぞれの公式テーマの特徴をご紹介します。

Beginner

その名の通り初心者向けでありながら、そのシンプルさ、カスタマイズの容易さから多くの上級者にも愛用されているテーマです。HTML、CSS を習得したばかりといった Web の初学者でもカスタマイズしやすくなっています。

  • トップページ、インデックス、エントリーともに2カラムをベースにしています。
  • お問い合わせフォームのテンプレートがあり、特別な準備なしにフォームを使用できます。
  • 物件情報カテゴリーのエントリーには多くのカスタムフィールドが使われています。カスタムフィールドのカスタマイズの参考としてご使用ください。
  • Webpack の開発環境は含まれていません。
  • テンプレートの継承機能を使っていないため、テンプレートファイルの構成が理解しやすくなっています。テンプレートの継承機能を使いたい場合には、子テーマの extend@beginner をご使用ください。

キャプチャ:Beginnerテーマ

左からトップページ、インデックスページ、エントリーページ

Beginner テーマを適用したサンプル

Site

といった a-blog cms の多彩な機能のほとんどを含んだテーマです。Siteテーマを理解することによって a-blog cms に習熟することができます。Siteテーマをベースにカスタマイズし、不要な機能やテンプレートを削除するといった使い方はもちろん、自作のテーマや他の公式テーマに Siteテーマから必要な機能を取り込んで使用することも可能です。

また、Siteテーマには子テーマとして sp@site、lp@site が用意されています。インストール時点にはルールとしてユーザーエージェントがスマートフォンの場合 sp@site が設定されており、「トピックパス」「続きを読む」「ページャー」に PC とは異なるテンプレートが適用されています。lp@site はランディングページを制作することに特化したテーマです。


キャプチャ:Siteテーマ

左からトップページ、エントリーページ、lp@siteトップページ

Site テーマを適用したサンプル lp@siteを適用したサンプル XDファイルのダウンロード テーマ解説(準備中)

UTSUWA

画像や動画を大きめにフィーチャーし、余白や文字サイズなどデザイン品質にこだわった現代的、実用的なテーマです。

  • 企業サイトとしてすぐに使えるカテゴリー構成を備えています。
  • 豊富なユニットで多彩なコンテンツを調和のとれたレイアウトで追加していくことが可能です。
  • お問い合わせ前の文章と完了ページの文言はエントリーで作成しているので、ブラウザから変更可能です。

キャプチャ:UTSUWAテーマ

左からトップページ、お知らせインデックス、採用情報エントリー

UTSUWA テーマを適用したサンプル β版配布時のブログ記事 XDファイルのダウンロード テーマ解説(準備中)

Blog

時系列順のエントリー表示を前提にしたブログやニュースサイト向きのシンプルで機能的なテーマです。

  • トップページ、インデックスページは2カラム、エントリーページは1カラムをベースにしています。
  • サブカラムにはさまざまなインデックスや検索フォームが用意され、各エントリーページへ遷移しやすくなっています。またプロフィールやバナーを簡単に登録できるモジュールも用意されています。
  • エントリーページではエントリー作成者のプロフィール、ハッシュタグからの関連エントリーが表示されます。
  • お問い合わせ機能はデフォルトでは用意されていません。

キャプチャ:Blogテーマ

左からトップページ、タグインデックス、エントリーページ

Blog テーマを適用したサンプルサイト

Develop

自作テーマのためのフロントエンドビルド環境と最小限の基本的なテンプレートファイルを含んだテーマです。メンテナンス性が高く、パフォーマンスに優れるサイトを制作するベースになります。Webpack の知識が必要になりますが、解説やハンズオンを参考にしながらサイトを制作することで Webpack を習得することも可能なテーマです。

テーマ解説 ハンズオン

公式テーマとデモデータについて

インストール時に公式テーマを選択した場合にはそのテーマにあったコンフィグ、モジュールID、エントリーなどのデモデータが予め設定されています。途中で適用する公式テーマを変更した場合には、下記の手順に沿ってこれらのデータをテーマにあったものに変更することができます。

  1. メンテナンスメニュー /setup_xxxxxx/index.php にアクセスする
  2. ブログ毎のインポート > 「インポート実行画面へ」 をクリックする
  3. インポート先、ブログデータ名、コンフィグ関連のインポート設定を選択して「インポートを実行する」をクリックする

3. の手順ですべてにチェックを入れるとすべてのデータが破棄されてインストール時のデモデータになるのでご注意ください。

テーマの基本

エントリーのデータを表示する元となるテンプレートのHTMLファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。



a-blog cmsのデータは、設定(コンフィグ>テーマ設定)で指定されたテーマファイルを通して表示されます。
a-blog cmsには標準のテーマとしてsite, blog など複数のテーマを同梱しています。これら同梱のテーマを使用してもよいですし、同梱のテーマを元にカスタマイズしたり、独自に制作することもできます。

テーマの設定

a-blog cms のデータを表示するテーマファイルは、管理ページから設定します。 カスタマイズ管理 > コンフィグ > ブログ > テーマ設定 にアクセスしてください。 この画面は、site2018テーマを使用しているブログのテーマ設定になります。


テーマ設定画面

テーマ設定画面


テーマディレクトリ名とテンプレート設定


テーマディレクトリ名には現在使用しているテーマ名が表示されており、a-blog cms 設置ディレクトリ/themes/ 以下にあるテーマディレクトリがプルダウンメニューで選択できます。 テーマディレクトリ内にtemplate.yaml がある場合、テンプレート設定のチェックをすることで、設定されたテンプレートを優先して読み込みます。

template.yaml ファイルは、テーマを使いまわす場合に毎回テンプレートファイルの設定をしなくて済むように、あらかじめテンプレートファイルの設定内容を記述しておくために設置します。 /themes/テーマディレクトリ/template.yaml にファイルを置くことで有効になります。


テンプレートファイル


テンプレートのコントロールについては、テンプレートの章で紹介します。トップページ・一覧ページ・詳細ページ・エラーページ・管理ページ・エントリー編集ページ・ユニット追加ページ・ログインページの8種類のテンプレートを指定します。 一般的には、詳細ページとエントリー編集ページ・ユニット追加ページのテンプレートは同じに設定しておくようにした方がいいでしょう。

テーマの継承

使用中のテーマに存在しないファイルは、system テーマ内のファイルを使用するようになっていますが、同様に子ブログ用のテーマを作る際に@による継承を利用したテーマディレクトリを作成する事で、system との関係のようにテーマを継承する事が可能です。
この継承の仕組みを利用することで、共通で使えるファイルは継承し、個別に必要なファイルのみを別テーマ内に用意することでカスタマイズ、メンテナンスが容易になります。

以下の例はテーマ「site」を元に子ブログ「blog」用のテーマを作る場合のものになります。

blog@site


例えば、blog@site/include に header.html が無い場合には、site/include/header.html を利用する事になります。また president@blog@site のように複数の @ を使ったテーマも作成できます。

複数のブログを1つのシステム内に設定してカスタマイズする、といったサイトの制作時には、このような方法でメンテナンス性の高いテーマを作成できます。

テーマとテンプレートの構成

テーマの構成と動作の仕組み



テーマディレクトリ(themes)には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここに全ての管理ページのテンプレートファイルが格納されています。ですから a-blog cms の管理ページをカスタマイズする際には、admin の中のファイルを修正すればいい事になります。

テーマ設定で設定されているテーマ(site)と、system のテーマは継承関係にあり、テーマ設定で設定されているテーマに呼び出すファイルが存在しない時には、system のファイルをチェックし、存在していればそのファイルを表示させる事になります。例えば、login.html や 404.html は site のテーマの中には存在していませんが、表示される様になっています。

また、テーマ作成の作法として、system のファイルを直接修正するのではなく、テーマ設定で設定されているテーマにコピーして修正するようにしてください。システムのアップデートの際に system ディレクトリはアップデートされる事になり、カスタマイズ部分が消えてしまう事になります。

「テーマ設定」以外で表示テンプレートファイルを指定するには?

テーマ設定では、テンプレートファイルの項目でブログのトップページや一覧、詳細ページなどいくつかの条件で使用するテンプレートを指定できました。しかし、このままではブログごとにテーマを設定しないとコンテンツごとにデザインや表示内容が変えられません。
そこで、テーマ内のテンプレート構成をカスタマイズして、コンテンツごとに使用するテンプレートを分ける必要があります。

カテゴリーごとや、特定のエントリーに対してテンプレートを指定する

a-blog cmsでは、カテゴリー毎や特定のエントリーに対してテンプレートを設定できます。
カテゴリー毎に設定する場合は、テーマディレクトリ内にカテゴリーコードと同じ名前のフォルダと、その中に必要なテンプレートファイルを用意します。
特定のエントリーに設定する場合は、エントリーコードのファイル名を用意することで特定のエントリー専用のテンプレートが設定できます。

例:site2018テーマを使用したブログで、news カテゴリーにテンプレートファイルを指定する場合

ここではsite2018テーマを元にカテゴリーごとに表示テンプレートを変える方法について説明します。


/themes/ の構成

/themes/ の構成


news というカテゴリーには、site2018/news/index.html(一覧)site2018/news/entry.html(詳細)のテンプレートが用意されています。この場合であれば、news のカテゴリーを表示する際には、これらのテンプレートファイルが使用されます。


もし、詳細ページのテンプレートを他のページと共用の設定にするのであれば、site2018/news/entry.html(詳細)のファイルを削除します。すると、テーマディレクトリの直下にあるファイルを参照するようになり site2018/entry.html(詳細)を利用するようになります。

表示テンプレートの確認

デバッグモード(config.server.php の DEBUG_MODE)が 1 の時のみ、下図のように現在表示しているテンプレートがどのファイルなのかを管理ボタン群部分に表示します。この機能で現在使用しているテンプレートファイルが確認できます。
この例では、 /themes/site2018/top.html が使われていることがわかります。


スクリーンショット:管理ボックス内に使用しているテンプレートが表示されている

また、デバッグモードには他にも、開発者ツールやソースコードを表示すると、より詳しいパーツごとのインクルード先がHTMLコメントにとして表示され、使用しているテンプレートがわかります。


テーマディレクトリ外のディレクトリのパスでファイルを表示する

テーマディレクトリ外のディレクトリのパスで静的なファイルを表示する方法

a-blog cms設置してあるサイトでは、表示するテーマ内のディレクトリは通常カテゴリーとして扱われます。テーマ内にカテゴリーと同名のディレクトリを設置することで、カテゴリー固有のテンプレートで表示ができます。
しかし、a-blog cms を介さず、テーマディレクトリ外の静的なファイルを表示したいケースもあります。ここではこのような場合の対応方法について解説します。

a-blog cms のテンプレート設定と基本的な動き

テーマの設定で各ページで使用するファイルの設定とファイル構成がこのような内容であった場合


ページで使用するファイルの設定例

ページで使用するファイルの設定例


前提として、special というカテゴリー、子ブログは無いものとします。
このような状態で
http://www.example.com/special/ を表示しようとした場合、a-blog cms はindex.html を表示せず、special というカテゴリーまたは子ブログを探して、Not Found を表示してしまいます。

config.system.yaml に設定を追加して対応

http://www.example.com/special/ というURLで /special/index.html を表示するために、config.system.yaml というファイルに設定を追加します。config.system.yaml はa-blog cms設置ディレクトリ内の /private/config.system.yaml にあります。

directory_index   : []

config.system.yaml 内の上記の部分を以下のように変更します。

directory_index   : [index.html]

こうすることで、テーマディレクトリ外のディレクトリを直接指定した場合に、index.html を表示する、という設定になります。

設定の応用

今回の例では index.html を追加しましたが、以下のようにカンマ区切りで複数記述することで、優先順位をつけて設定することができます。以下の例では、index.html が無かった場合index.htm を表示するものとなります。

directory_index   : [index.html,index.htm]

フロントエンドのビルド環境がそろった developテーマについて

Ver. 2.11.0よりsiteテーマ、simpleテーマ、blogテーマ、bootstrapテーマに加えて新たにdevelopテーマを用意しました。developテーマではa-blog cms を開発する際によく使うテンプレートをシンプルにしたものが同梱されており、フロントエンドに関する開発環境も整えられています。

機能



機能 概要
SCSSのコンパイル SCSSをCSSにコンパイルします。
JSファイルの結合 複数のJSファイルを1つのファイルに結合します。
コードのLintチェック ESLintやstylelintを使用して、JSやSCSSおよびCSSのコードをチェックします。
Live Reload ファイルの変更があった場合に、ブラウザを自動的にリロードします。
ソースコードの整形 EditorConfigを使い、ソースコードを整形します。
SVGアイコンの使用 Font Awesome 5 のSVG with JavaScriptを利用して、SVGアイコンを表示します。

使い方

ローカル環境に Ver.2.11以上のa-blog cms をインストールしてください。Ver.2.11以上ではthemesディレクトリーにdevelopテーマが設置されているのでターミナルで、developテーマを設置しているディレクトリまで移動します。

$ cd  /themes/develop/

移動できたら、依存ファイルを以下のようにインストールします。

$ npm install

npmコマンド自体が存在しない場合、Node.jsをインストールすることでnpmコマンドが有効になります。Node.jsはこちらのサイトからインストールできます。

テーマ名(デフォルト: develop)を変更した場合は、package.json の config.theme を変更してください。もし、LiveReload を使用する場合は、実行しているローカル環境のアドレスに合わせて config.local を変更してください。

"config": {
  "local": "localhost",
  "theme": "テーマ名"
},

用意しているビルドコマンドについて

コマンドは、npm run ** になります。**の部分に下記のコマンドが入ります。



コマンド 概要
start CSSとJSファイルの変更を監視してビルドを行う。LiveReloadあり。
dev CSSとJSファイルの変更を監視してビルドを行う。
build CSSとJSファイルのビルドを行う。納品時には使用する。

npm run startnpm run dev では、JavaScriptに余分なコードやデバッグのためのコードが入るため、最適化されません。納品時には必ず npm run build を行なってください。 一度、npm run startと実行すると、以下のページが立ち上がるのを確認してみてください。


デフォルトではlocalhost:3000 でページが立ち上がります


その他できること

  • ファーストビューに含まれるCSSをインライン化する
  • Font Awesome 5 のSVG with JavaScriptを利用する

ファーストビューに含まれるCSSをインライン化する

スタイルの読み込みについて

カスタムスタイルは、include/head/preload.html で読んでいます。 以下記述のように preload 属性を使って読み込むようにしており、非同期でスタイルを読み込んでいます。

<link rel="preload" href="/dest/bundle.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/dest/bundle.css"></noscript>

Above the fold(ファーストビュー)に含まれる CSS のインライン化

preload属性を使って、非同期にスタイルを読むようにしたことで、スタイル読み込みでブロックされずレンダリングが速くなります。 ただその影響で、スタイルが当たっていないHTMLが一瞬表示される可能性があります。これを解決するために、Above the fold(ファーストビュー)のCSSをインライン化して読み込みます。

ファーストビューのスタイルが完成したら、themes/develop/src/index.html に 現在のソース貼り付けます。(ブラウザで表示したときのソースを貼り付ける) その後、npm run build コマンドを実行します。 ビルドコマンドを実行すると、themes/develop/dest/index.html にファイルができます。 dest/index.html にインラインCSSが書き出されている(17行目あたり)ので、このCSSを、include/head/preload.html に設置します。

<style>
<!-- ファーストビュー(above the fold )のインラインCSS を挿入。インラインCSSは webpackでbuildすると、dest/index.html に生成される。 -->
</style>

Font Awesome 5 のSVG with JavaScriptを使用する

アイコンの利用を考え、developテーマでは、Font Awesome 5 の SVG with JavaScript が利用できるようになっています。JavaScriptで必要なフォントのみを読み込むことでスピードを向上させることができます。

アイコンのインポート

SVG with JavaScript では必要なアイコンのみインポートして利用します。 アイコンの種類により、インポートするパッケージが違うので気をつけてください。例えばブランドアイコン系は、@fortawesome/free-brands-svg-icons から読み込みます。

themes/develop/src/fonts.js
import { faUser, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';

命名規則はクラス名(ケバブケース)をキャメルケースにしたものになります。

.fa-sign-out-alt のアイコンを使いたい場合は、 faSignOutAlt を読み込みます。

themes/develop/src/fonts.js
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';

アイコンの登録

インポートしたアイコンを以下のように使用できるように登録します。使用するアイコン全てを指定します。

themes/develop/src/fonts.js
library.add(faUser, faSignOutAlt, faFacebook, faTwitter, faInstagram);

アイコンの表示

あとは、以下のようにアイコンを表示させることができます。

<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fas fa-sign-out-alt"></i>

CSSのクラス名はFont Awsome の公式サイトから調べることができます。

developテーマで開発するTips

パフォーマンス向上のために、include/head/js.html で読み込んでいる組み込み JSをTouch_SessionWithContribution を使って、投稿者以上の場合だけ読み込む方法もあります。以下は組み込みJSを使わずに自力でサイトをカスタマイズするための方法です。

/include/head/js.html

developテーマの/include/head/js.htmlには以下のように記述されています。タッチモジュールの冒頭に「!(エクスクラメーション)」が記述されているので、今回は削除してください。

<!-- 組み込みJSを使わない場合、エクスクラメーションを外して、投稿者以上の場合だけ読み込むようにする -->
<!-- !BEGIN_MODULE Touch_SessionWithContribution -->
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<!-- !END_MODULE Touch_SessionWithContribution -->

以下のように修正します

<!-- 組み込みJSを使わない場合、エクスクラメーションを外して、投稿者以上の場合だけ読み込むようにする -->
<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<!-- END_MODULE Touch_SessionWithContribution -->

ただし、組み込みJSを使わないことになるので、組み込みJSに標準で搭載されているスライダーや画像ビューワーなどのすべての組み込みJSが動作しなくなるためご注意ください。

必要な機能やライブラリは、自分でインストール、実装する必要があります。

バンドル環境が整っていますので、 npm経由でライブラリをインストールし、 importする方式をお勧めします。以下 Lazy Load を実装する例になります。

$ npm i vanilla-lazyload

index.js 6行目

import LazyLoad from 'vanilla-lazyload';

index.js 34行目 domContentLoadedイベント内に追記

domContentLoaded(() => {
  new LazyLoad({elements_selector: '.js-lazy-load'});
});

HTMLに以下のソースコードを記述して、表示します。 成功した場合、一瞬プレースホルダー画像が現れた後、すぐに猫の写真が表示されます。

<img data-src="http://placekitten.com/400/300" src="/images/placeholder/image.svg" width="400" class="js-lazy-load">

そのほかにもSmartPhotoScrollHintなど、a-blog cmsの組み込みJSに標準で実装されている機能の一部はnpm経由でインストールできるようになっています。

$ npm i smartphoto
import SmartPhoto from 'smartphoto';

domContentLoaded(() => {
  new SmartPhoto('js-smartphoto');
});
$ npm i scroll-hint
import ScrollHint from 'scroll-hint';

domContentLoaded(() => {
  new ScrollHint('js-scroll-hint');
});

UTSUWAテーマの使い方

UTSUWA は写真やコンテンツを入力すればそのまま企業サイトとして成り立つ構成を備えた、実用的でモダンなテーマです。また、CSS変数でカラーを変更するだけで手軽にサイト全体の雰囲気を変えることができます。こうした特長から、Web の初学者の方、a-blog cms の初心者の方にとっても即戦力となるテーマなので、ぜひ広く使っていただきたいと考えています。このエントリーでは、そういった初学者、初級者の方を対象としながら、中級者、上級者の方にもご紹介したい UTSUWA テーマの豊富なユニット類についても解説していきます。

UTSUWAテーマサンプル を確認しながら読み進めてください。

CSS 変数で色を変更する

/include/head/css-variables.css で CSS 変数を変更することによって簡単にサイト全体のカラーリングを変更することができます。

主な変数

変数名初期状態で使用されている箇所
--color-primaryトップページ見出し、ボタン背景、見出し下のボーダー、ワンポイント、テキストユニット「強調」文字色など
--color-secondary「詳しく知る」やシリアルナビゲーションのリンクアイコン背景色、目次やリスト系ユニットの数字やビュレット
--color-tertiaryテキストユニット「強調」下線ドット
--color-tertiary-lightテキストユニット「重要」下線
--color-linkテキストリンク色
--color-requiredフォームの「必須」ラベル背景色
--color-errorフォームのエラーメッセージ文字色、テキストユニット「本文(注意文)」文字色
  • 同じ色を使いたい場合 CSS ファイル内では var(--color-primary)のように指定できます。
  • Sass では、/src/scss/global/_variables.scss で CSS 変数をいったん Sass の変数に渡しています。

カラー変更のコツ

  • 初期設定の色と明度があまり変わらない色を指定するとコントラストを維持できます。
  • --color-white、--color-black、--color-grayxx といった無彩色の指定をニュアンスを持った色に変更するのもお勧めです。

テンプレートが分かりやすく、コンテンツの編集も簡単

UTSUWA は全体的にワンカラムのレイアウトで、すべて /_layouts/base.html を ベースにしているのでテンプレートもシンプルで分かりやすくなっています。

たとえば /_top.html でも、パーツ毎に @include 文とコメントがあるので、不要なパーツをコメントアウトしたり、順番を入れ替えたりするのも簡単です。トップページのそれぞれのパーツのコンテンツは表示画面側からも編集、設定しやすくなっています。

エントリーコードが空のエントリーではエントリータイトルが表示されない

デモデータの企業情報、お問い合わせ、採用情報カテゴリーのようにエントリーコード(ファイル名)が空のエントリーではエントリータイトルが表示されなくなっています。カテゴリートップをエントリー扱いにする場合にはカテゴリー名とエントリータイトルを揃えておくと管理画面においても分かりやすくなります。

エントリーサマリーのスタイルの種類

UTSUWAではエントリーサマリーにさまざまなスタイルがあります。すべてのエントリーサマリーでhover時にサムネイルが拡大されます。

事業紹介(/include/module/template/Entry_Summary/thumbnail.html


事業紹介(service)カテゴリーインデックスのエントリーサマリーはサムネイルを大きくとったスタイルです。このスタイルはモジュールユニットにおいても thumbnail.html を選択すればそのまま使用できます。

お知らせ(/include/entry/summary.html)


画像がないエントリーも多いことが想定されるお知らせ(news)カテゴリーのインデックスでは、サムネイルがあってもなくても美しくレイアウトされるように工夫されています。CSS Grid が使用されています。

スタッフブログ(/include/entry/summary-blog.html)


スタッフブログ(blog)カテゴリーのインデックスはオーソドックスなカードスタイルでPC時4カラムです。

お問い合わせ


お問い合わせ(contact)カテゴリーには「お問い合わせ」「お問い合わせ完了ページ」の2件のエントリーがあり、それぞれ赤枠で囲った箇所がエントリーのユニットとして編集可能です。

グローバルナビゲーションの内容を変更する

UTSUWAではスマートフォン用とPC用は別のナビゲーションモジュールになっています。公式テーマでは唯一、スマートフォンでの階層ナビゲーションの開閉に対応しており、特にスマートフォンでの操作性に優れています。

また、テンプレートファイル( /include/global/header.html/include/global/sp-header-nav.html)で確認できるとおり、属性と子要素属性({attr})はそれぞれclass属性の中に入っているので、モジュールIDの表示設定画面では値だけを書く点が Siteテーマ、Beginnerテーマとは異なっています。

nav_global_sp(スマホ用:グローバルナビゲーション)

スマートフォンのグローバルナビゲーション用のモジュールIDの「詳細設定を全て開く」をクリックして、設定を確認してみましょう。「企業情報」のようにサブメニューを持つ第1階層のアイテムは、URLに半角スラッシュ 、属性に is-expand、子要素属性に js-viewing-indelible が設定されていることが分かります。一方、「事業紹介」のようにサブメニューを持たない第1階層のアイテムは、URLに直接遷移先を設定してあるだけです。


nav_global_sp は PC 用の nav_global とは異なり、表示画面側からのリンクはないので
管理画面のモジュールIDから絞り込んでアクセスしてください。

フッター上CTAについて

CTA 関連のエリアが、どのように表示されているかを見ていきます。

グローバルな フッター上 CTA

/_layouts/base.html からインクルードされているグローバルな CTA のモジュールIDは MF_cta_visual_global(主要なCTA) です。サイト内のほとんどのエントリーテンプレート、インデックステンプレートでは footer-cta セクションを上書きしていないのでこの CTA がフッター上に表示されています。


トップページの CTA

トップページでは footer-cta セクションは上書きされ、テンプレートはグローバルなものと同じですがモジュールIDは MF_cta_visual_top で設定されています。グローバルな CTA より余白のサイズがゆったりめにとられ、吹き出しがない代わりにリード文や概要文、ボタンの文言がより詳細になっています。確認してみてください。

お問い合わせ、採用情報、事業紹介エントリーの CTA

お問い合わせ(contact)カテゴリーのエントリーテンプレートでは、footer-cta セクションは上書きによって空になっています。お問い合わせフォームでは実際の案件でもこのようにユーザーが入力に集中できるようになっていることが多いでしょう。

採用情報事業紹介エントリーの CTA は上書きされて、グローバルな CTA ではなく、 /include/parts/cta.html をインクルードしてエントリーフィールドやカテゴリーフィールドを表示しています。

独自に書き換えられているテキストユニットについて

UTSUWA テーマでは、ユニットの表示側のテンプレートが /include/unit.html で独自に書き換えられています。ここでは特に使用頻度が高く、影響が大きいテキストユニットの書き換えについて解説します。

テキストユニットは全て

 <div class="entry-text-unit is-xx"></div>

で囲われます。

  • div で囲うことによって不要な回り込みを防いでいます。
  • .entry-text-unit クラス内の要素にスタイルを適用することによって、エントリー内のテキストユニット以外のカスタムユニットなどの要素にスタイルがあたってしまうことを防いでいます。
  • .is-xx の部分には .is-p などテキストタグセレクトの内容が入り、 /src/scss/_entry.scss においてスタイルの調整に使用されています。

また、見出しのテキストユニットには、アンカーリンクをしたときに上部に適切な余白をつけるため、border-top を transparent で大きくとり、margin-top をネガティブにして調整してあります。

カスタムユニットの種類について

UTSUWA に用意されているカスタムユニットは次の 5種類です。

メッセージ

デモデータでの使用箇所は 採用情報トップ です。


余白

デモデータではユニットによる要素の掲載例の画像間に使われています。


罫線

デモデータではユニットによる要素の掲載例のリストの間に使われています。


価格表

デモデータではユニットによる要素の掲載例のエントリー末尾近くに使われています。


目次

デモデータではユニットによる要素の掲載例の冒頭に使われています。 目次ユニットは a-blog cms の組み込みJSのひとつで、エントリー内の見出し要素に自動でアンカーリンクを生成、表示します。


ユニットグループの種類

ユニットグループも豊富に用意されています。デモデータではたとえばユニットによる要素の掲載例の価格表には「背景色:グレイ(全幅)」が使われています。


まとめ

UTSUWA はそのままで企業サイトとして使える工夫が随所にあり、その分初心者にとっても使いやすく、中級者、上級者にとってはカスタマイズのベースとしたり、他のテーマを使うときにもカスタマイズのヒントが得たりすることができるテーマです。ぜひご活用ください。

公式テーマの webpack ビルド環境の使い方

Beginnerテーマ以外の公式テーマには、 webpack のビルド環境が用意されています。このエントリーでは、webpack に馴染みがない方を対象に、導入の手順を解説します。

導入する前にはとっつきにくい印象のある webpack ですが、いったん慣れてしまうと意外に簡単でとても便利です。特に a-blog cms の公式テーマに同梱されているビルド環境はすべて設定済みであとは「使うだけ」なので最初の一歩として最適です。

(このエントリーの末尾で webpack を使用しない場合の注意点 についても触れています。)

webpack 導入のメリット

  • 文法チェックやプロパティ順の整理を自動でやってくれるのでコードが読みやすく、メンテナンスしやすくなる
  • スタイルや機能のモジュール化をしやすいので他案件への転用が簡単になる
  • 使用しているエディタやツールに依存しないのでチームでの開発環境を揃えることができる
  • LiveReload ( npm run start )を使うとファイルを保存すればブラウザが自動でリロードされるので開発効率が上がる
  • CSSは /dest/bundle.min.css、JavaScript は /dest/bundle.js にまとめられ、パフォーマンスが向上する
  • 慣れてくると外部のライブラリを読み込んで利用することも簡単にできるようになる

webpack 導入の手順

node.js をまだインストールしていない場合は .node-version でバージョンを確認し、node.js をインストールする

2022年8月現在、UTSUWA同梱のビルド環境の .node-version ファイルを開くと v14.16.0 になっています。

公式サイトのインストーラを使ってインストールする場合は、バージョン一覧から該当のバージョンを選んでください。コマンドでの操作に慣れている場合は、nodenv (Mac)、fnm (Windows) などの node バージョン管理ツールを使用するのがお勧めです。

インストールした後、ターミナルやコマンドプロンプトで

$ node -v ( または node --version )

と打って該当のバージョン番号が表示されればオーケーです。

package.json でローカル環境のアドレスとテーマ名を設定する

LiveReload ( npm run start ) を使う場合に基準となる設定です。LiveReload を使わない場合はこの手順は飛ばしてかまいません。

"config": {
  "local": "acms.lab", ( http:// や https:// は不要です )
  "theme": "テーマ名" ( テーマ名を utsuwa 以外にする場合は変更します )
},

cd コマンドで themes/テーマ名 に移動して npm を使ってパッケージをインストールする

cd は change directory の略です。今いる場所が分からない場合は pwd ( present working directory ) コマンドで確認できます。

$ cd www/themes/テーマ名 ( パスはローカル環境のフォルダ構成や現在地によって異なります )
$ npm i( または npm install )

必要なパッケージがインストールされると themes/テーマ名/node_modules というフォルダができて中にたくさんのファイルがダウンロードされます。ダウンロードが終わったらメッセージを見て、必要そうであれば

$ npm audit fix

しておきましょう。

※ 子テーマを使用する場合でも、ビルド環境は親テーマだけでまとめておきましょう。

ファイルを watch してコンパイルする

 $ npm run dev

あるいは

 $ npm run start

で src フォルダ内のファイルを watch して dest フォルダにコンパイルし始めます。npm run start は LiveReload の機能を含んでいるので、src フォルダ内のファイルを変更して保存するたびに自動的にブラウザがリロードされます。LiveReload 使用時にはブラウザのURL欄には「localhost::3000」が表示されます。これらのコマンドを止めるには「Ctrl + C」を押します。

ファイルを build する

納品時やリモートへの反映時などには

 $ npm run build

でファイルを build することによって、最適化されたコンパイルになります。このコマンドは実行に少しだけ時間がかかり、終わったら自動的に止まります。

JavaScript について

/src/js/index.js からさまざまなファイルを読み込んで /dest/bundle.js にコンパイルされています。その内容については各テーマフォルダに同梱されている README.md をご確認ください。

エラーが出たら

コマンドが問題なく実行されているときにはターミナルの画面に実行結果がスラスラと表示され続けていますが、赤字でエラーが表示された場合は、エラーメッセージを読んで対処しましょう。

Sass のルールは .stylelintrc、 JavaScript のルールは .eslintrcrules のブロックに追記することでそれぞれ個別にオンオフすることができます。.stylelintrc では true / null で、.eslintrc では 0 / 1(警告を出す) / 2(エラーを出す)という値で設定します。たとえば、.stylelintrc の rules ブロックに

 "block-no-empty": null,

と追記すると、Sass ファイルに空のブロックがあってもエラーがでなくなります。

より高度な内容について

これだけで一通りのビルドはできますが、全CSSのインライン化や組み込みJSの整理、各ファイルの役割など、より高度な内容についてはこちらもご確認ください。

webpack を使用しない場合の注意点

補足として、webpack を使用しない場合に抑えておいたほうが良い点について説明します。

独自カスタマイズ用の CSS と JavaScript

/include/head/link.html において

<link rel="stylesheet" href="/dest/bundle.min.css">
<link rel="stylesheet" href="/css/style.css">

/include/head/js.html において

<script src="/dest/bundle.js" defer></script>
<script src="/js/script.js" defer></script>

のように独自カスタマイズ用の CSS ファイル、JS ファイルへのパスを追記して、追加した CSS ファイルでスタイルを上書き、追加していきます。script タグでは JSファイルの実行順を担保するため、async属性ではなく、defer属性を使います。

不要なファイルを削除する

不要なファイルはそのままにしておいても問題はありませんが、削除するとファイル構成が分かりやすくなります。コンパイルによる予期せぬ先祖がえりを防ぐためにも削除しておくことをお勧めします。

utsuwa/ 直下の不要なファイル

  • .eslintrc
  • .node-version
  • .stylelintrc
  • babel.config.js
  • package-lock.json
  • package.json
  • webpack.analyze.js
  • webpack.common.js
  • webpack.dev.js
  • webpack.prod.js
  • webpack.uncompress.js

/src/ フォルダ

Sassを使用しない場合はフォルダごと削除してください。Sassを使用する場合は /src/scss を残して、お使いのコンパイルツールにあった設定にしてください。