デモサイトのようにタイトルや説明を変更したい

フォーラムURL : http://forum.a-blogcms.jp/viewtopic.php?f=12&t=2514


a-blog cmsサンプルサイトをチェックしていたところ、
ブログ設定→ブログ詳細の項目に、会社情報やサイト設定情報が登録してあることに気づきました。

私がサンプルで設置しているablog cmsのブログ詳細項目では、IDからインデキシングまでの設定しか記述することができません。

これらの項目はカスタムフィールドを用いて設定しているのでしょうか。
それとも、なんらかの操作を行うことで追加できる項目なのでしょうか。

何卒宜しくお願い致します。


カスタムフィールドによる情報の書き換え

a-blog cmsのデモサイトでは、サイトタイトルや説明、フッターのテキストはカスタムフィールド(自由に追加できるエントリー、カテゴリー、ブログ固有の入力フィールド)でできています。

ブログのカスタムフィールドはご利用のテーマに /admin/blog/field.html を置くことで読み込むことができます。

ブログカスタムフィールドの記述に関するファイル

/themes/(ご利用のテーマ)/admin/blog/field.html

a-blog cmsをダウンロードしていただき、v2.0 以降に同梱されている「site2014」テーマのブログカスタムフィールドを参考にしてみてください。

site2014のブログカスタムフィールドの記述に関するファイル

/themes/site2014/admin/blog/field.html

Ver.2.12から追加される新テーマ「UTSUWA」のβ版を配布します!


Ver.2.12から追加される新テーマ「UTSUWA」のβ版を配布いたします。

「UTSUWA」は今までの公式テーマと異なり、デザインの品質を保ち、運用しやすい構造を提供するテーマです。

今までの公式テーマは a-blog cms を学習していただくことに比重を置いていましたが、実際のユーザーの方々にヒアリングし、すぐに実務で使えるテーマを開発しています。


ファイルを開く

テーマ「UTSUWA」配布用zipファイル

コンセプト

「リソースを割けないけど、デザインの品質は保証したい」そんな声から生まれたテーマがUTSUWAです。

UTSUWAが保証するデザインの品質はパーツ同士のビジュアル的な調和とコンテンツの拡張のしやすさにあります。テーマはWebサイトのコンテンツを入れていく「器」でしかないため、魅力的なサイトにするためにはサイトに合わせたコンテンツを拡張していくことが必要です。

Webサイト制作のビジュアル設計に関わるコストを抑え、豊富なユニットのスタイルでコンテンツをどんどん作成していくことが可能なスタートアップに最適なテーマです。

採用をコンバージョンにしたコーポレートサイトテーマ



サイトの構造としては、採用情報をメインのコンバージョンとしたコーポレートサイトです。

カテゴリー構造

求人に対して応募者が興味のある内容をデモデータにし、コンテンツに合わせてテンプレートを用意しています。

  • 採用情報
  • 企業情報
  • 事業紹介
  • お知らせ
  • スタッフブログ

そのほか、グローバルナビゲーションや、フッター付近には採用情報へ誘導するためのボタンが設置されています。

UTSUWAの特徴

全体的に1カラムレイアウトに合わせたフォントサイズを提供しており、ビジュアルを背景画像で大きく見せるカスタムフィールドやカスタムユニットを用意しています。

トップページ

パワーアップを予想し、トップページの背景は灰色とプライマリーカラーとアニメーションの3種類を用意。背景色が白の場合は連続してもいいように見出しは2種類、そして罫線のスタイルを用意しました。


トップページ


豊富なユニットの種類

運用者の方もどんどん更新してもらえるよう、企業情報と採用情報の一覧ページはエントリーを固定にし、ユニットで内容を編集できるようにしています。

UTSUWAでは、レイアウトがしやすい豊富な種類のユニットのスタイルを用意しています。


採用情報の一覧ページ


以下は本文と見出しの組み合わせです。



見出しがシンプルなものと下線のものと、装飾あり(h2のみ)の3種類用意しており、LiteEditorの設定では「単語区切り」と「ワンポイント」という設定を追加しています。

「単語区切り」を選ぶと、要素がdisplay:inline-blockになり、画面が可変した際に意図せぬ場所で改行してしまうのを防ぐことができます。

「ワンポイント」を選ぶと、たとえば見出しなどでは青文字の少しフォントサイズが小さめの表示になります。デフォルトでは青文字になりますが、CSSをカスタマイズすれば背景色などをつけて強調することができるかと思います。



リード分を灰色とプライマリーカラーの2種類と、注意文を灰色と赤色の2種類と、定義リストはシンプルなものとボックスタイプのものを用意しています。たとえば、ボックスタイプのものはよくある質問にお使いいただけます。

用意しているユニットグループ

  • 1カラム
  • 2カラム
  • 3カラム
  • 1カラム:狭(中央寄せ)
  • 背景色:グレイ
  • 背景色:グレイ(2カラム)
  • 背景色:グレイ(全幅)
  • 背景色:プライマリー
  • 背景色:プライマリー(2カラム)
  • 背景色:プライマリー(全幅)
  • 枠付き
  • 枠付き(2カラム)
  • テキストの中央寄せ用

用意しているカスタムユニット

  • 罫線ユニット
  • 余白ユニット
  • メッセージユニット
  • 価格表

そのほかのカスタマイズ

ページタイトルが2種類



ページタイトルはシンプルなものと、背景画像付きのものを2種類用意しています。通常はシンプルなものが適用されますが、カテゴリーのカスタムフィールド で画像を指定するとお問い合わせページのような背景画像付きのページタイトルになります。

お問い合わせ前の文章と完了ページの文言はブラウザから変更できる

お問い合わせ前の文章と完了ページの文言はエントリーで作成しているので、ブラウザから変更可能です。



404ページによく検索されてるキーワードを設定できる

404ページによく検索されてるキーワードを設定できます。こちらはモジュールで管理されているのでブラウザから変更できます。ダッシュボードのショートカットに登録されています。



インストールする方法

インストール方法は下記の手順になります。

  1. zip ファイルを解凍する
  2. utsuwa_blog_export.zipを/storage/backup_blog/ディレクトリに設置する(backup_blogディレクトリがない場合は新しくフォルダを作成する)
  3. themesディレクトリに入っている「utsuwa」フォルダを設置先のthemesディレクトリに設置する
  4. インストールしたいブログの「ブログ管理」のページに移動し、「エクスポート・インポート」タブをクリックし、 「ブログのインポート」の項目で「utsuwa_blog_export.zip」を選択してインポートボタンをクリックします

※先日ブログのインポート機能に問題が見つかったため、利用の際は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テーマではBootstrapのサイトで公開されているサンプルページをa-blog cmsとして使えるものを6つご用意いたしました。 サンプルページは6つありますが、そのうちの1つはログイン画面となっておりますので正確には5つの中からお選びいただき、自由にカスタマイズしてご利用いただけます。

実際にご利用いただくには、お好きなサンプルページのディレクトリを一つ上の階層に置いてください。

a-blog cmsインストール時の初期状態について

目次

  1. ようこそa-blog cmsへ
  2. ログインするには
  3. インストール時のサイトマップについて
  4. テーマについて
  5. ディレクトリー構造について

ようこそa-blog cmsへ


数あるCMSの中からa-blog cmsをインストールしていただきありがとうございます。「インストールしたはいいけど何から始めたらいいかわからない」「短期間でもちゃんと理解できるか不安」そのような方に向けて、ここではインストール直後のa-blog cmsの仕様についてご紹介します。


ログインするには


まずはサブカラム右下にある [login] ボタンをクリックしてください。 もしくは、表示されているURLの語尾に /login を追記しても同じページが表示されます。

例)https://example.com/login


[login]ボタン

次に「ユーザーID/メールアドレス」「パスワード」の各欄に管理者が発行した情報を入力し、[ログイン] ボタンをクリックします。


ログイン画面

「ユーザーIDまたはパスワードが違います。」と表示されたら?


[ログイン] ボタンをクリックした時に「ユーザーIDまたはパスワードが違います。」と表示された場合は、以下のような原因が考えられます。


  • メールアドレス、パスワードが半角英数字で入力されていない
  • 意図しないスペースが入っている

パスワードを忘れてしまったら?


パスワードを忘れてしまった場合は、パスワードを再発行しましょう。

[パスワードをお忘れですか?] をクリックして登録してあるメールアドレスを入力すると、パスワードを変更するためのリンクと新しいパスワードがメールで送られてきます。メールの内容に従って新しいパスワードでログインしてください。


これでログインは完了です。

ログイン中は、ヘッダーの直後とフッターの直前に灰色の管理ボックスが表示されます。サイトの運営は主にこの管理ボックスを使って行っていきます。



またヘッダー直後の管理ボックスにある [ログアウト] というボタンをクリックすることで、ログイン前の状態に戻ることもできます。


インストール時のサイトマップについて


a-blog cmsはインストール時より、実際に企業のサイトを制作した場合の仕上がりの例として、あらかじめ複数のサンプル記事が入力されています。このサイトは下図のような構造になっています。



a-blog cmsでは、これらの階層に関わる情報を3種類に区別しています。それが「ブログ」「カテゴリー」「エントリー」です。


ブログ
全てのエントリーとカテゴリーを含むサイトの最大単位をブログといいます。サンプルサイトでは全てのエントリーとカテゴリーを「a-blog cms サンプルサイト」というブログで総括しています。

カテゴリー
複数のエントリーをジャンル別に分類する単位をカテゴリーといいます。サンプルサイトでは「お知らせ」「会社概要」「製品情報」などが当てはまります。
また、製品情報カテゴリーのように、カテゴリー中でさらに「家庭用製品」「業務用製品」とカテゴリーを分けることもできます。これらは「親カテゴリー」「子カテゴリー」と区別されます。

エントリー
ページの最小単位をエントリーといいます。サイトを更新する際には、主にこのエントリーを新規作成してページを追加します。

子カテゴリーを作成して階層を分けることもできますが、ブログの下の階層にさらに子ブログを設置することもできます。規模の大きさや用途によってカテゴリーで分けるのかブログで分けるのかを判断していきましょう。
またサイトの構成次第では、カテゴリーを持たないエントリーを用意することもあります。この際でも、カテゴリーがエントリーを内包し、ブログがカテゴリーを内包するような主従関係が逆転することはありません。


テーマについて


テーマ
テンプレート(HTMLファイル)やイメージファイル(画像ファイル)、CSSファイル、JavaScriptファイル等、サイトを構成するファイルを1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsでは、テーマごとにサイトの見た目や機能を設定することができます。

2022年6月現在では、デフォルトのテーマとして「site」「beginner」「utsuwa」「blog」「develop」を用意しています。また、各場合の初期テーマは以下のように設定されています。


  • a-blog cmsをインストールしている場合:セットアップ時に選択したテーマ
  • a-blog cms.ioで体験している場合:beginner

テーマを変更するには?


テーマはブログごとに設定します。
テーマを変更、もしくは現在適応されているテーマの確認は、以下の手順で行います。


  1. 管理ボックスの [管理ページ] をクリック
  2. サイドメニューの [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリック
  3. コンフィグ一覧内 [テーマ設定] をクリック



テーマ設定画面で「テーマ ディレクトリ名」という項目に表示されているテーマが現在適応されているテーマです。こちらで任意のテーマを選択し、保存ボタンをクリックすることでテーマの変更ができます。



チュートリアルでは、主にテーマ「beginner」を使います。「テーマ ディレクトリ名」を「beginner」に設定し、保存をしておきましょう。


ディレクトリー構造について


a-blog cmsサイトの各ページは、複数のテンプレートファイルによって構成されています。


テンプレートファイル
ページを構成するHTMLファイルのことです。しばしば「テンプレート」と省略します。基本的なテンプレートとして、トップページに設定する _top.html 、一覧ページに設定する index.html 、詳細ページに設定する _entry.html があります。

ファイル名先頭のアンダーバーの有無について


a-blog cmsでは _top.html や _entry.html など、テンプレートファイル名の先頭にアンダーバーがつく場合があります。これはファイル名を含んだURLである「https://example.com/top.html」や「https://example.com/index/entry.html」へのアクセスを無効にするためのものです。詳しくは「直接表示させないテンプレートを指定する | a-blog cms developers」をご覧ください。


各テーマにおいて設定されているテンプレートは、テーマ設定画面で確認することができます。「テンプレート選択ファイル(template.yaml)の値を優先する」にチェックがある場合はテンプレート選択ファイル template.yaml 内に書かれた指示通りにテンプレートが適応され、チェックがない場合は管理画面上の入力欄から直接テンプレートを指定することができます。


チェックがある場合に適応されるテンプレート

チェックがある場合に適応されるテンプレート


チェックがない場合に適応されるテンプレート

チェックがない場合に適応されるテンプレート


インストール時には、先ほどのサイトマップに掲載した項目がそれぞれ以下のテンプレートで表示されています。



また各ページにおいて表示されているページのテンプレートは、管理ボックスから確認することができます。例えばトップページの管理ボックスには、「現在表示中のテンプレート:/themes/site2020/_top.html」と表記されています。


現在表示中のテンプレート:/themes/site2018/_top.html