テーマ

目次

テーマの基本

エントリーのデータを表示する元となるテンプレートの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');
});