a-blog cmsのデモサイトでは、サイトタイトルや説明、フッターのテキストはカスタムフィールド（自由に追加できるエントリー、カテゴリー、ブログ固有の入力フィールド）でできています。
ブログのカスタムフィールドはご利用のテーマに /admin/blog/field.html を置くことで読み込むことができます。
/themes/(ご利用のテーマ)/admin/blog/field.html
a-blog cmsをダウンロードしていただき、v2.0 以降に同梱されている「site2014」テーマのブログカスタムフィールドを参考にしてみてください。
/themes/site2014/admin/blog/field.html
Ver.2.12から追加される新テーマ「UTSUWA」のβ版を配布いたします。
「UTSUWA」は今までの公式テーマと異なり、デザインの品質を保ち、運用しやすい構造を提供するテーマです。
今までの公式テーマは a-blog cms を学習していただくことに比重を置いていましたが、実際のユーザーの方々にヒアリングし、すぐに実務で使えるテーマを開発しています。
テーマ「UTSUWA」配布用zipファイル
「リソースを割けないけど、デザインの品質は保証したい」そんな声から生まれたテーマがUTSUWAです。
UTSUWAが保証するデザインの品質はパーツ同士のビジュアル的な調和とコンテンツの拡張のしやすさにあります。テーマはWebサイトのコンテンツを入れていく「器」でしかないため、魅力的なサイトにするためにはサイトに合わせたコンテンツを拡張していくことが必要です。
Webサイト制作のビジュアル設計に関わるコストを抑え、豊富なユニットのスタイルでコンテンツをどんどん作成していくことが可能なスタートアップに最適なテーマです。
サイトの構造としては、採用情報をメインのコンバージョンとしたコーポレートサイトです。
求人に対して応募者が興味のある内容をデモデータにし、コンテンツに合わせてテンプレートを用意しています。
そのほか、グローバルナビゲーションや、フッター付近には採用情報へ誘導するためのボタンが設置されています。
全体的に1カラムレイアウトに合わせたフォントサイズを提供しており、ビジュアルを背景画像で大きく見せるカスタムフィールドやカスタムユニットを用意しています。
パワーアップを予想し、トップページの背景は灰色とプライマリーカラーとアニメーションの3種類を用意。背景色が白の場合は連続してもいいように見出しは2種類、そして罫線のスタイルを用意しました。
トップページ
運用者の方もどんどん更新してもらえるよう、企業情報と採用情報の一覧ページはエントリーを固定にし、ユニットで内容を編集できるようにしています。
UTSUWAでは、レイアウトがしやすい豊富な種類のユニットのスタイルを用意しています。
採用情報の一覧ページ
以下は本文と見出しの組み合わせです。
見出しがシンプルなものと下線のものと、装飾あり（h2のみ）の3種類用意しており、LiteEditorの設定では「単語区切り」と「ワンポイント」という設定を追加しています。
「単語区切り」を選ぶと、要素がdisplay:inline-blockになり、画面が可変した際に意図せぬ場所で改行してしまうのを防ぐことができます。
「ワンポイント」を選ぶと、たとえば見出しなどでは青文字の少しフォントサイズが小さめの表示になります。デフォルトでは青文字になりますが、CSSをカスタマイズすれば背景色などをつけて強調することができるかと思います。
リード分を灰色とプライマリーカラーの2種類と、注意文を灰色と赤色の2種類と、定義リストはシンプルなものとボックスタイプのものを用意しています。たとえば、ボックスタイプのものはよくある質問にお使いいただけます。
ページタイトルはシンプルなものと、背景画像付きのものを2種類用意しています。通常はシンプルなものが適用されますが、カテゴリーのカスタムフィールド で画像を指定するとお問い合わせページのような背景画像付きのページタイトルになります。
お問い合わせ前の文章と完了ページの文言はエントリーで作成しているので、ブラウザから変更可能です。
404ページによく検索されてるキーワードを設定できます。こちらはモジュールで管理されているのでブラウザから変更できます。ダッシュボードのショートカットに登録されています。
インストール方法は下記の手順になります。
※先日ブログのインポート機能に問題が見つかったため、利用の際はVer.2.11.27または12月24日以降に登録したablogcms.ioの環境でインポートをお願いいたします。
テーマ「UTSUWA」配布用zipファイル
もしご要望や、不具合を見つけた場合はダッシュボードにフィードバックのためのフォームを設置しておりますので、お気軽にご投稿いただけたら幸いです。
もっと詳しいことが知りたい場合は、 1月のzoom upにてお話しする予定ですので、ぜひご参加ください。
1月19日（火）15:00-16:30です（いつもと開催時刻が異なりますので、お気をつけください）。
それでは、UTSUWAテーマのご紹介は以上となります。 ご意見・ご感想をいただけると開発の励みとなりますので、ぜひフィードバックフォームやTwitterのハッシュタグ「#ablogcms」を使っていただけると幸いです。
この記事の最後に次のバージョンで提供する予定のBootstrapテーマを配布しています。実際にご利用する前にこのテーマがどういう構成なのかをご紹介します。
デフォルトのトップページ
BootstrapテーマではBootstrapのサイトで公開されているサンプルページをa-blog cmsとして使えるものを6つご用意いたしました。 サンプルページは6つありますが、そのうちの１つはログイン画面となっておりますので正確には5つの中からお選びいただき、自由にカスタマイズしてご利用いただけます。
実際にご利用いただくには、お好きなサンプルページのディレクトリを一つ上の階層に置いてください。
a-blog cmsでは /themes/テーマ/ が ドキュメントルート的な扱いになります。 しかし、このままではパスがおかしくなるので、書き換えを行っています。 この機能より静的なサイトをそのまま themes に入れても動くようになります。
View Transitions API を利用して、一覧で表示されているメイン画像（アイキャッチ画像）をクリックすると、その写真が拡大表示されるアニメーションと共にページが切り替わるような動きをつけることができます。
なお、すべてのブラウザが対応しているものではありません。 今回の実装は PC の Chrome と Edge で動き、他のブラウザでは普通に画面が遷移するという現在の状況になります。
この記事をご覧になっているタイミングでのブラウザのサポート状況は、書いている時とは違ってきていることも多いことが考えられますので、現在の状況は View Transition API" | Can I use... をご覧ください。
今回の実装については、以下の変数が追加になった Ver. 3.1.23 以降から可能になりました。
表示させるコンテンツの画像ごとに個別の Class 設定し、その記述を <head> 内に <style> を動的に用意します。
Entry_Summary モジュールを実行時に .unit-id-63 〜 .unit-id-65 を生成し、setRendered & GET_Rendered を利用して、<head> 内に移動させています。
<style>
@view-transition {
navigation: auto;
}
.unit-id-63 {
view-transition-name: transition-utid-63;
contain: paint;
}
.unit-id-64 {
view-transition-name: transition-utid-64;
contain: paint;
}
.unit-id-65 {
view-transition-name: transition-utid-65;
contain: paint;
}
</style>こちらの <head> 内の <style> を Entry_Body で生成しています。
<style>
@view-transition {
navigation: auto;
}
.unit-id-64 {
view-transition-name: transition-utid-64;
contain: paint;
}
</style>今回は、実装テストをした環境である beginner テーマをベースに解説します。
どのページでも共通で利用できるように以下のような記述を追加します。
<style>
@view-transition {
navigation: auto;
}
<!-- GET_Rendered id="transition-utid" -->
</style><!-- BEGIN unit:loop --> 〜 <!-- END unit:loop --> の外側に以下の記述を追加します。これで一覧ページで表示されているエントリー数分の設定が id="transition-utid" に作られます。
<!-- BEGIN_SetRendered id="transition-utid" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
.unit-id-{utid} {
view-transition-name: transition-utid-{utid};
contain: paint;
}
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_SetRendered -->画像の部分に Class を追加する必要があります。
<img src="%{ROOT_DIR}{path}[resizeImg(480,480)]" alt="" class="acms-img-responsive" />上記の Class に unit-id-{utid} を追加します。
<img src="%{ROOT_DIR}{path}[resizeImg(480,480)]" alt="" class="acms-img-responsive unit-id-{utid}" />こちらは <!-- END entry:loop --> の上に追記してください。 Entry_Body の mainImage ブロックの中にある {utid} という変数を利用するためです。
<!-- BEGIN_SetRendered id="transition-utid" -->
<!-- BEGIN mainImage -->
.unit-id-{utid} {
view-transition-name: transition-utid-{utid};
contain: paint;
}
<!-- END mainImage -->
<!-- END_SetRendered --><!-- BEGIN_SetRendered id="transition-utid" --> 〜 <!-- END_SetRendered --> で囲まれた情報は id="transition-utid" という場所に保存され、その場所からは消えます。 その後、<!-- GET_Rendered id="transition-utid" --> が記述されている場所で、その情報が編集されることで、モジュールの外側に必要な情報を移動させることができます。
クリックして、このコンテンツが表示されるということを明示的にアニメーションで閲覧者に伝えれらることになるので、サイトの閲覧体験の向上に繋がるのではないでしょうか。
この記事を書いたタイミングでは https://ablogcms.sakuraweb.com/ にデモ用のサイトを用意しています。まずは、こちらをご覧になってみてください。