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

私は2024年3月末からBeginnerテーマをカスタマイズしています。（ただいまドメイン移管失敗により待機中）
実装に関して無知な私が、約半年間に遭遇した様々なことをこの記事に記録してみました。

半年分の記録が長文になってしまったので、先に結論を書いておきます。
この結論こそが、a-blog cms 超初心者の心得と言ってもいいかもしれません。
初めてa-blog cmsを触る方や、静的サイトもあんまり作ったことがない、という方の参考になれば嬉しいです。

キャッシュをクリアしよう
CSSを書いたのにログアウトすると当たっていない？そんな時はダッシュボード＞キャッシュクリアのクリア対象全てにチェックを入れてキャッシュをクリアする

クラスを振ってCSSを書こう
クラスを振らずにスタイルを当てると、エントリーの編集画面やフッターのさらに下に表示されているcheck-seo.htmlなどにも影響が出てしまう

htmlの整形ツールは使わない
a-blog cmsはコメントアウトを使って記述するので、意図しない箇所で改行されることがあり、モジュールが表示できなくなることがある

その他、細々とした山あり谷ありを知りたい方は、ぜひ下記の記録を読んでみてください。

ローカル
macOS Sonoma
MAMP 8.9（PHP：7.4.33）
http://localhost:8888

テストページ
Xserverを新規で契約
PHP8.1.29    

http://localhostで表示できず、http://localhost:8888のまま作業をスタート。

CMSにログインしていないと自分が書いたCSSが当たらない。
→管理画面ダッシュボード＞キャッシュクリアに全てチェックを入れて、「キャッシュをクリア」ボタンクリックで解消。

カスタムフィールドを「画像」で作ってしまい、「メディア」で作り直す…。
→「画像」だと、都度画像をアップロードしないといけないが、「メディア」だと画像の使い回しが可能。

記事の曜日を英語表記にするには、date#weekをdate#Dに変えるだけでいいみたい。
→https://developer.a-blogcms.jp/document/acms-code/vars/date.html

フッターのさらに下に表示されているcheck-seo.htmlなどの文字が白になって背景色に同化してしまう…。
→hタグやpタグに直接CSSで命令したのが原因。クラスを書いてCSSを当てることで解消。

初めてサマリーにタグを表示してみた。
→https://developer.a-blogcms.jp/document/acms-code/vars/Entry_Summary.html

aタグに直接CSSで命令してしまい、一つずつクラスを振って修正…。訪問済みのリンクが紫なのもなんとか修正できた。

admin/entry/ccd/カテゴリー名.htmlでカスタムフィールドを作成。初めてccdを活用した。

JavaScriptがさっぱりわからない…。（継続中）
仕方がないので、今回もハンバーガーメニューはCSSだけで作ることに。（アクセシビリティ的によろしくない）
→Beginnerテーマのハンバーガーメニューをカスタマイズすれば良かったんだとこの記事を書きながら気づいた…。

ヘッダーナビのSiteNameの<a>タグが下層ページで消えちゃう？<!-- ELSE --><!-- END_IF -->を消すとちゃんとリンクになるみたい？？
→条件分岐ごと削除してしまった…。SiteNameはトップの時はh1それ以外はpになるように書かれていたようだ。

一覧ページのページャーがうまく動かない…。
→モジュールID編集画面＞条件設定＞引数＞ページ（page）にチェックを入れたら直ったみたい。

admin>entry>ccdの中にカスタムフィールドを書いただけだと、子カテゴリーのエントリーに表示されない。 親カテゴリーだと表示される。
→admin>entry>field.htmlの@include("/admin/entry/ccd/%{CCD}.html")の「%{CCD}」を「%{RCCD}」にすると、子カテゴリーにもカスタムフィールドの入力欄が表示される。

ページャーで総ページ数を表示できた！と思ったら、最後のページだけ16/16にならなず、16/になってしまった…。
→一旦16/16は諦めて16だけ表示することに…。

開催期間の「告知／開催中／終了」のフラグを自動で判定してくれるカスタムフィールドに挑戦。今日を含む未来のイベントのみ表示したいがうまくいかない。
→管理画面＞モジュールID＞条件設定のフィールド（field）に「eventTo/gte/%{NOW_DATE} 」を書いて解決。
https://developer.a-blogcms.jp/document/template/if.html

モジュール編集モーダルを開いてクリックしても反応しなくなってしまった。
→iframeタグに直接CSSの命令をしてしまったのが原因！クラスを振って解決。
ちなみに危険なタグ（今回はiframeタグ）を許可するための記述も間違っていた。（許可する際は要検討）
https://developer.a-blogcms.jp/blog/news/specifications-change-vars.html

ポストインクルードで前後リンクにサムネイルを表示できた！と思ったら、ログアウトしていたら表示できていないことが発覚…。
→結局直せなかった…。
参考にした記事）https://developer.a-blogcms.jp/blog/function/entry-3257.html

マウスオーバーで編集ボタンを表示できるように、<!-- BEGIN_MODULE Touch_SessionWithAdministration --> 省略 <!-- END_MODULE Touch_SessionWithAdministration -->を挿入。

メディアをアイコンで表示した時、アイコンとキャプションを横並びにしたかったんだけどそれは無理みたい？画像ユニットも横並びになってしまう。

チュートリアルのフォーム編に挑戦。
記事を読みながら、とりあえず送信まではできたっぽい。
https://developer.a-blogcms.jp/document/tutorial/5-form.html

ユニットで縦長の画像を掲載した時、画面の高さに画像が収まらないのが嫌で、max-height: 80vh;を書いたら画像の比率が保てなくなって、object-fit: contain;も追加した。そしたら、ユニットの「左・中央・右」が効かなくなって中央寄せになってしまった…。
→それを治そうと左寄せの時はobject-position: 0% 0%;…中央の時はobject-position: 50% 0%;…右寄せのときはobject-position: 100% 0%;と書いた。
「おまかせ」は捨ててしまったことになるのかな？

何も絞り込んでない時のタグフィルターでは、タグがつけられたエントリー数を表示できたのに、絞り込んだらエントリー数が出てこない‥。
→未だに謎。

モジュールを作ったのに、なぜだかカテゴリーページに表示できない？
→管理画面＞モジュールID>カスタム設定の引数のカテゴリーID（cid）にチェックを入れて解決？

contactページでなぜか変更ボタンの位置が先頭に来ていない上に、変更ボタンを押すと送信ボタンに反応するのか、エントリー編集ページに行けないことが発覚…。
→formの中にエントリーボディをつっこんでいるのが原因だった。エントリーボディに編集ボックスがひっついていて、その編集ボックスもフォームでできているらしく、フォームの中にフォームを入れるとおかしくなるとのこと…。

ちなみに、conatctはUTSUWAからごそっと移植したんだけど、タブに表示されるページ名が「お問い合わせ | お問い合わせ | サイト名」になっている。
→「お問い合わせ | サイト名」にするには、コンフィグのOpen Graph Protocol＞空のエントリーコードにチェックを入れるとできるらしい。

改行がおかしいと表示できなくなるモジュールがある。
→VS Codeで変なところで改行してしまうのは、拡張機能「Prettier」のせいだった。
Prettierをオンにしたまま、VS CodeでCommand shift p で「>Open User settings」で検索して、settings.jsonとやらを開く。
"[html]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
を追加すると、htmlの時だけ自動整形が効かなくなるらしい。a-blog cmsのときは書いておいた方が良さそう。

タグの閉じ忘れやインデントや改行をせっせと修正。
→Chromeの拡張機能「HTMLエラーチェッカー」が便利。でもIFブロックなどコメントアウトで書いてるところは目視で要チェック！ログアウトで表示されないモージュールは大方解決できた！

テストサイトで表示できるようになったけど、contactのフォームがおかしい。
→「管理画面>フォーム管理＞入力チェック・変換」がローカルと違っていたのが原因？ブログデータをテストサイトにインポートしたとき、このフォーム管理のところも更新されたと思い込んでいたけど違うみたい。

Wix→Xserverへのドメイン移管に失敗…。
→Wixでドメイン管理に自分を追加するのではなく、所有者を自分にしないといけなかったのかも。（所有者を変更してから移管できるようになるまでに2ヶ月待機期間があるので注意！）

管理画面＞編集画面の中の「このブログの初期編集画面設定（非推奨）」が無くなってしまった？
→Ver. 3.1.21でUIの変更があったみたい。編集画面セットを作った後に、ブログの基本設定で編集画面セットを選択しないといけない。（デフォルトだと何も選択されていない）
編集画面がセット化されておらず、編集画面セットで何も選択されていない…この状態はセット化する前の編集画面設定があたっていたということらしい。わかりにくいから編集画面セットは作っておいた方がいい。
https://developer.a-blogcms.jp/document/releasenote.html#ver-301021

何回聞いてもコンフィグセットがわからない。レガシー設定という言葉に遭遇するたびに「なんだっけ？わからないから触らないでおこう」という思考になってしまう。

テストサイトでリンクコピーボタンが効かない。
→SSL化していないのが原因。他の作り方も試してみるも私には無理だったのでこのまま放置。

こうしてみると、同じようなことで何回か躓いているのがわかります。
次回も何かに躓いた時はまずはこのブログを見て、同じ過ちをしていないかどうか確かめようと思います。