MIYAJI NAMI DESIGN

BLOGS

【前編】a-blog cmsのトライアル「ablogcms.io」を試してみた

BLOGS

このエントリーは「a-blog cms Advent Calendar 2023」の7日目の記事です。

a-blog cmsはPHPが不要なのにカスタマイズができるインストール型のCMSです。
a-blog cmsを使うにはCMSの他に、ライセンスやサーバーとドメイン・開発環境などが必要ですが、a-blog cmsのトライアル「ablogcms.io」が新しくなったので使ってみることにしました。

a-blog cmsのトライアル「ablogcms.io」って?


ablogcms.ioより出典

a-blog cmsには30日間無料で試せるablogcms.ioというサービスがあります。トライアルなので本番には使えませんが、カスタマイズが試せる点がデモサイトとの大きな違いだと思います。

ablogcms.ioの特徴

  • 30日間無料で使える(料金が発生することはない
  • テスト環境を提供してくれる
  • 管理画面だけでなくカスタマイズも試せる

ablogcms.ioの使い方

では早速試してみましょう。

テスト環境を作る


まずはhttps://www.ablogcms.io/にアクセスします。
a-blog cmsの特徴やablogcms.ioでできること、公式テーマなどについて説明されていますが、すぐにでもトライアルがやりたい!という方は、ファーストビューの「無料で試す」ボタンをクリックしてください。


そうするとフォームにジャンプするので、テーマを選択します。
初めての方にはBeginnerやBlogがお勧めらしいので、今回はBeginnerを選択します


残りの入力欄にも記入したら、「テスト環境を構築する」ボタンをクリックします。


このように、ページが切り替わったらテスト環境構築完了です。


管理者ページにログインしてみる


先ほど入力したメールアドレスにメールが届いているので確認してみると、管理者ページログイン情報が記載されています。早速ログインしてみましょう。
するとこんなメッセージが表示されますが、今回はテスト環境での使用なので無視して大丈夫です。


次に、メニューの下に管理ページへのリンクが設置してあるので、クリックしてみましょう。


記事を作成してみる


何やらメッセージが出ていますが、これらもテスト環境での使用なので問題ありません。無視します。

a-blog cmsでは記事のことをエントリーと呼びます。
左側のメニューのエントリーをクリックし、緑色の「エントリーを作成」ボタンをクリックして、エントリーを作成してみます。
(トップページに設置してある緑色の「エントリー作成」ボタンからも、エントリーの作成画面に行くことができます。)


カテゴリー選択で「??」となる


エントリー編集画面のカテゴリー選択の時に「??」となるポイントがあります。
WordPressの場合、「記事」というと、お知らせやブログの記事のことを指しますが(たぶん)、a-blog cmsの場合はお知らせやブログに限らず一覧ページ以外をエントリーと呼ぶそうです。(正確には違うかもしれませんが私はそう解釈しています。)


会社概要のページをWordPressで作ろうとした時、おそらくは固定ページで作るはずです。というのも、どんどんページが増えるようなコンテンツではないからです。
しかし、a-blog cmsの場合、どんどんページが増えるようなコンテンツだろうとそうでなかろうと、「エントリー」なのです。(たぶん)
つまり、記事≒エントリーという風に私は認識しました。


そして、こんなに長い文章をつらつらと書いておいて言いにくいのですが、このことは特に重要ではありません。WordPressとはちょっとだけ作り方が違う…というくらいの認識で大丈夫です。(エンジニアさんから「違うわ!」と言われたら、その時に違いを学習することにします。)


話を元に戻します。
今回はお知らせの記事を書きたいので、カテゴリーは「お知らせ」を選択します。

カテゴリー選択をしなかった場合、どうなるのか?


こんな感じに、ドメインのすぐ後ろに記事のスラッグが入ってしまいます。
今回は、お知らせ(news)の中に記事を作成したいので、カテゴリーの選択は忘れずにしましょう。


詳細設定


次に詳細設定のアコーディオンを開けると、ファイル名で「??」となります。(私だけ?)
ファイル名はWordPressでいう「URLスラッグ」のことです。


ここでのつまずきポイントは2つです。


1. ファイル名を日本語にしてしまった

これについては日本語でも問題はないように思えますが、URLをコピー&ペーストした場合、「URLエンコード」という処理によって長く意味が通じない文字の羅列になってしまいます。
仮に「ファイル名」という名前をエンコードにすると下記のようになり、全く意味不明な感じになり…ユーザーに「なんか怪しいサイトなのでは?」と警戒されてクリックしてもらえないなんてことも??(考え過ぎ?)

2. 拡張子「.html」を忘れてしまった

これを忘れると記事が公開されません。
「.html」を忘れてしまった場合は、該当するエントリーの編集画面から修正します。

ファイル名の入力を忘れた場合、どうなるのか?

その場合は「entry-20.html」のように自動で名前がふられるようです。SEO的には弱くなりますが、公開されない訳ではないので安心してください。
ファイル名は後からでも変更できますが、お気に入りやブックマークに登録したリンクからは404になってしまうので、はじめにファイル名を書いておくのがベストと言えます。(でもそんなこと言っていたらカテゴリーの変更もしにくいのでこれは理想論に過ぎません  …よね?)

つまり、ファイル名は半角英数字にして、拡張子「.html」を末尾につけるべし!ということです。

リンク先URLって何?


さて、詳細設定の一番下に「リンク先URL」というものがあるではありませんか?
ここで「さっきのファイル名と違うの??」「リンク先は当然、記事の詳細ページでしょう?」となるのは私だけではないはずです。


リンク先URLとは、記事のサマリーをクリックした際、記事の詳細ページを開くのではなく、リンク先URLに記載したURLを開く‥という機能らしいです。


さてどんな時に使うのか‥
例えば、「外部リンクに記事を書いたので、その外部リンクをサマリーに貼って誘導したい」という場合に使えそうです。
ただここで少し問題なのは、クリック先が記事の詳細ページなのか、それとも他のページなのかは視覚的に判断できません。リンク先URLを使う場合は、サマリーに別タブマークを付けるとか…、飛び先のURLを記載するなどのカスタムが必要そうです。


記事の内容を書いてみる

やっと記事の内容のところまで来ました。a-blog cmsはユニットと呼ばれるブロックパーツに情報を入れて記事を作ります。
追加のところから使いたいパーツをクリックします。そうするとユニットが追加されるので、ここに情報を入れていきます。


画像の追加
画像・ファイルボタンを押すと画像ユニットが現れるので、アップロードボタンを押してローカルにある画像をアップロードしてみます。


するとこんな感じの画面になりました。
タグを追加という項目があります。
これは画像にタグをつけることができる機能です。タグなので1枚の画像に付き、複数枚付けることができます。
画像を使い回す時に検索しやすいようにタグをつけておきましょう。このタグはサイト上に表示されないので、好きな言葉で大丈夫です。


画像の名前を表示したい場合は、キャプションの欄に入力します。
代替テキストはaltに入れるテキストのことです。
リンク先URLは画像のリンクを貼りたい場合に入力します。


この画像にリンクを貼る‥というのは視覚的には特に変化がなく動きが予測できないので、バナーのように視覚的にクリックできる・クリックしたら別のページにジャンプするよ!ということを伝えられる画像に適しています。


保存して完了


ユニットを1つずつ紹介しているとなかなか先に進めないので今回はこのくらいにしておくとして、とりあえず保存ボタンを押して公開してみます。
これで記事の投稿は完了です!

まとめ

ablogcms.ioの特徴

  • 30日間無料で使える(料金が発生することはない)
  • テスト環境を提供してくれる
  • 管理画面だけでなくカスタマイズも試せる

記事の投稿でのポイント

  • カテゴリーは選択しよう
  • ファイル名はURLスラッグのことなので半角英数字にし、末尾に「html」を付ける

以上、少しつまずきポイントもありましたが、無事に記事を公開することができました。
後編では、SFTPソフトで接続してみようと思います!