a-blog cms を使ってみたいけど、なにから始めたらいいの?
このコンテンツは、a-blog cms(エーブログ シーエムエス)を使ってみたいけどまずは何をしたらいいかわからない人に向けて、基礎的な機能をまとめた記事です。くわしい実装方法や使い方などは紹介しているリンク先の記事をご覧ください。
目次
a-blog cms を利用できる環境を用意する
まずはa-blog cmsを利用できる環境を用意しましょう。手軽にa-blog cmsを利用できる環境は現在2つあります。
- デモサイト
- ablogcms.io
デモサイトは、ブラウザから行える作業のみ体験できます。登録データは、他の方もログインできるため共用となり、毎日リセットされます。ご注意ください。
![]()
a-blog cms
トップページ用の META Description 設定になります。このコンテンツは a-blog cms のテスト用に作られたコンテンツで、実在のものではありません。
ablogcms.ioは、ブラウザから行える作業以外にもSFTP情報が支給されるため、カスタマイズが体験できます。ご自身の専用環境となるため、登録データは共用ではありません。お試し用の環境となりますので、サーバー内のファイルや登録データは登録から30日で削除されてしまいますのでご注意ください。
![]()
ablogcms.io
「a-blog cms に興味はあるけどサーバ環境を用意するのは大変!」「デモサイトではテーマのカスタマイズは試せないの?」そんな時には ablogcms.io をご利用ください。
本番環境で運用する場合は、サーバーにa-blog cmsをインストールする必要があります。詳しくは以下をご覧ください。
![]()
インストール | ドキュメント | a-blog cms developer
a-blog cms developer
a-blog cmsのドキュメントページ。a-blog cmsの基本のカスタマイズ方法を掲載しています。
CMSにログインして記事を書く
a-blog cmsを自由に触れる環境ができたら、CMSにログインしましょう。CMSをインストールしたサイトのURLの末尾に「/login/」とつけてブラウザからアクセスするとログインページが表示されます。
![]()
ログイン | オンラインマニュアル | a-blog cms
a-blog cms
a-blog cmsにログインする方法、ユーザーIDやパスワードが間違っていた場合とパスワードを忘れてしまったときの対処法を掲載しています。
ログインができたら、記事を作成しましょう。a-blog cmsでは記事のことを「エントリー」と呼んでいます。詳しいエントリーの書き方は以下の記事をご覧ください。
![]()
エントリーの作成 | オンラインマニュアル | a-blog cms
a-blog cms
a-blog cmsでは、1つのエントリーはタイトルとユニットと呼ばれる情報で構成されます。ここでは基本的なエントリーの作成方法、ユニットのレイアウトの仕方について掲載しています。
カスタムフィールド
つぎは、カスタマイズした自由な入力欄を提供できるカスタムフィールドを作りましょう。a-blog cmsでは、エントリーの他に、ブログとカテゴリー、ユーザー、モジュールの5つの種類のカスタムフィールド が作成できます。
学習の流れとしては、「カスタムフィールドの基本」の記事でだいたいどんなソースコードで構成されているかを把握して、「カスタムフィールド メーカー」でソースコードを作り、カスタムフィールド メーカーで作ったソースコードの記述場所を把握するために「ブログのカスタムフィールド」の記事を参考にするのがいいと思います。
![]()
カスタムフィールドの基本 | カスタムフィールド | ドキュメント | a-blog cms developer
a-blog cms developer
カスタムフィールドとは エントリーや、カテゴリー・ブログ・ユーザーに対して独自のデータを追加することができる機能です。追加したデータは表示や検索用のキーとして利用されます。例えば...
![]()
カスタムフィールドメーカー | a-blog cms developer
a-blog cms developer
カスタムフィールドメーカーとは、ラベルや値、サイズなど入力していきカスタムフィールドのHTMLが生成する便利なツールです。カスタムフィールドメーカーでは、テキストや画像などさまざま...
前述した通り、a-blog cmsにはカスタムフィールド の種類が5つありますが、ブログのカスタムフィールド を作成する方法をここではご案内しておきます。以下の記事をご覧ください。他の4つのカスタムフィールド を作る際はテンプレートを設置するディレクトリが変わりますので、それぞれの記事をご覧ください。
![]()
ブログのカスタムフィールド | カスタムフィールド | ドキュメント | a-blog cms developer
a-blog cms developer
ブログの管理画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイルなどブログ毎に項目が作れます。 ブログのカスタムフィールドはブログ管理の...
テーマとテンプレート
テーマとテンプレートでは、どこに書いたら意図したものが表示されるのか、実際に確認しながら進めることをおすすめします。
まずは「テーマとテンプレートの構成」の記事で構成をなんとなく把握してください。実践したい場合は「表示テンプレートの確認」の見出しを参考に、テーマに実際に書いてみることがおすすめです。
![]()
テーマとテンプレートの構成 | テーマ | ドキュメント | a-blog cms developer
a-blog cms developer
テーマの構成と動作の仕組み テーマディレクトリ(themes)には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています...
公式テーマのHTMLを開いてみると、英語でHTMLのコメントタグのようなものや「@」からはじまるコードがたくさん書かれていますが、この記述がa-blog cmsではプログラムが動作する箇所になります。各記述方法を知りたい場合は以下の記事をご覧ください。
![]()
テンプレート | ドキュメント | a-blog cms developer
a-blog cms developer
a-blog cms で更新ができるページを作るためのHTMLファイルを「テンプレートファイル」といいます。テンプレートにさまざま表示ができる「モジュール」を貼り付けていくことで、データベース...
モジュール
a-blog cmsに登録したデータを表示する機能がモジュールです。
以下の記事を見ると、モジュールにはたくさんの種類があることがわかります。モジュールの機能でできることが大体把握できると思います。
![]()
モジュール | ドキュメント | a-blog cms developer
a-blog cms developer
a-blog cmsの表示用テンプレートは「モジュール」というパーツをHTMLファイルに貼り付けて作ります。モジュールの扱い方がわかれば、Webサイトの見栄えやデータ表示に関する表現の幅が広がり...
ビルトインモジュールを使っているうちに、ビルトインモジュールで登録データの条件設定のしかたについて疑問を持つ方が多いですが、その場合にはモジュールIDを作成してください。モジュールIDを作成することで、複数の条件設定が可能になります。
実際にサイトを制作するときには、基本的には毎度モジュールIDを作成して使うことになります。
![]()
モジュールID | ドキュメント | a-blog cms developer
a-blog cms developer
モジュールIDとは、モジュールの機能をさらに便利にしたもので、URLコンテキストを利用せずに管理ページのモジュールIDで指定した条件設定や表示設定を元にモジュールを動作できるようになり...
フォーム
サイトにフォームを作る際は以下の記事を参考にしてください。
![]()
フォーム | ドキュメント | a-blog cms developer
a-blog cms developer
Webサイトのお問い合わせやアンケートとして欠かせないメールフォームをa-blog cmsで作る方法です。a-blog cms では標準でフォーム機能も搭載しています。
たくさんソースコードがあるので、全て覚えるのは大変だと思います。公式テーマではブログテーマ以外はお問い合わせフォームの仕組みを持っておりますので、ソースコードをコピー&ペーストして要素を追加したり削除して、少しずつデザインに近づけていくことをおすすめします。
なお、フォームはカスタムフィールドと同じソースコードです。カスタムフィールド メーカーを活用して制作してください。
他にも、フォーム機能と連動してGoogleスプレッドシートやSlackやReCaptchaなどの外部機能と連携することができる「拡張アプリ」という機能があります。こちらは基礎的な内容ではありませんが、こういった機能も知っていると提案の幅が広げることができるため、ご紹介しておきます。
![]()
拡張アプリ一覧 | a-blog cms developer
a-blog cms developer
a-blog cmsの拡張アプリ一覧です。Ver.2.8 以上の a-blog cms がインストールされた環境で /extension/plugins に これらの拡張アプリを設置していただくことでお使いいただけます。
基礎的な機能については以上となります。これまでに紹介した機能で小さなコーポレートサイトなら作ることができますので、まずはこれらの機能を使ってみることがオススメです。
ほかにも、静的サイトから動的サイトを作っていくハンズオンコンテンツがあるため、こちらを2~3周して学習すると理解が深まると思います。
![]()
静的HTMLサイトからCMSのテーマを作ってみよう(Ver.2.8) | 初心者向け | ハンズオン | a-blog cms developer
a-blog cms developer
a-blog cms は、CMS を利用していない HTML ファイルで作られたサイト ( 静的 HTML サイト ) を、PHP のコード ( <?php 〜 ?> ) を書くことなく、CMS を利用して日々更新できるような...
そのほかの機能
マルチサイトは管理画面から「ブログ管理」のページで子ブログを作成することで作れますし、パスワード制限をかけたサイト(例:会員制サイト)もブログのステータスを「シークレット」にするだけで作れます。
その他にもレスポンシブWebデザインではなく、PCとスマホのデザインを変更するときにはルールという機能が必要です。
![]()
ルール | ドキュメント | a-blog cms developer
a-blog cms developer
「ルール」はさまざまな条件毎に設定を変更する機能です。デバイスのユーザーエージェント毎に表示テーマを切り替えたり、特定のデバイスやブラウザからの閲覧時のみ別の表示設定ができるよ...
運営者がウェブサイトのレイアウトを自由に変更したいという特殊な要望があれば、レイアウト機能という機能も用意しています。
![]()
レイアウト機能 | ドキュメント | a-blog cms developer
a-blog cms developer
a-blog cmsには、ブラウザ上からコンテンツのレイアウトを変更できる機能があります。この機能を使うことで、これまでHTMLファイルの変更が必要だったレイアウトの変更やモジュールの追加が...
他にもたくさん機能があるa-blog cmsですが、まずはこの記事に書いてある機能を把握することが第一歩です。もしよくわからない箇所があればお気軽にフォーラムで質問してください。
実際に勉強会に来ていただくと、あなたに合わせてご説明することも可能です。ぜひご検討ください。