View Transitions API を利用したテーマのカスタマイズ
View Transitions API を利用して、一覧で表示されているメイン画像（アイキャッチ画像）をクリックすると、その写真が拡大表示されるアニメーションと共にページが切り替わるような動きをつけることができます。 なお、すべてのブラウザが対応しているものではありません。 今回の実装は PC の Chrome と Edge で動き、...
カスタマイズ
承認申請画面でデフォルト承認者を設定できるようにするカスタマイズ
今回のカスタマイズのゴールは、採用情報の投稿者Jが特定の編集者Hに承認依頼を行うことを便利にする、ミスを減らすことができるようにすることを考えてカスタマイズを進めていく事にします。 今回のサイトの構成 システムとしては a-blog cms プロフェッショナル版 を利用します。 ルートブログや子ブログに架空のダミ...
エントリーのカスタムフィールドでパスワードを設定する実装方法
a-blog cms では、ブログ単位で会員コンテンツとしてログインしないと見えないコンテンツを管理するような実装は標準で用意されております。しかし、今回は、もう少し簡単にエントリーのカスタムフィールドでエントリー毎の個別パスワードを設定できるような実装を考えてみます。 パスワードを入れる前の画面を確認する...
モジュールフィールドを使って管理画面からカスタムフィールドグループの初期値を編集可能にする
a-blog cms においてなんらかの値を管理画面から編集可能にしたい場合は、モジュールフィールドが役立つことが多いです。このエントリーでは、カスタムフィールドグループの初期値を編集可能にするやり方を例に説明しますが、モジュールフィールドでのコンテンツ編集は他の場面でも使えるTipsなので、ぜひ参考にしてみて...
Entry_BodyモジュールでRSSファイルを作成する
a-blog cms では、/themes/system/rss2.xml が用意されており、特に意識しなくてもルート直下にRSSファイルが生成されます。他のテンプレートファイルと同様、お使いのテーマに複製してカスタマイズすることも可能です。このファイルには Feed_Rss2モジュールが使用されています。しかし、Feed_Rss2モジュールでは変数等...
ナビゲーションモジュールの中でテンプレートを呼び出す方法
ナビゲーションモジュールについては基本的には、管理画面から手動で自由にラベル・リンクを設定し、更新可能にするためのモジュールですが、例えば「採用情報」のコンテンツ以下のエントリーを追加した際に自動で増えるようなメニューに実装したいと思ったことはありませんでしょうか。 Navigation モジュールの設定 ...
次世代フロントエンドツール「Vite」を a-blog cms で利用するためのコツ
この記事は Advent Calendar 2023 の24日目の記事となります。a-blog cms にまつわる25日分の記事が公開されていますので、是非ご覧ください。 https://adventar.org/calendars/8651 a-blog cms の テーマのビルド環境 a-blog cms 標準テーマのビルド環境は、これまで「webpack」を利用してビルドされていました。パッケ...
Mapboxをカスタムフィールドで表示する方法
Mapboxとは Mapboxは、世界中で採用されている地図サービスです。 地図の関する様々なプロダクトが展開されていて、中でもMapbox Studioは、独自の地図デザインを作成しwebサイト上に表示できるので、よりリッチなサイトを作成したい方にはぴったりなサービスとなっています。 今回は、そんなMapboxをユニットとして使用...
Mapboxをカスタムユニットで表示する方法
Mapboxとは Mapboxは、世界中で採用されている地図サービスです。 地図の関する様々なプロダクトが展開されていて、中でもMapbox Studioは、独自の地図デザインを作成しwebサイト上に表示できるので、よりリッチなサイトを作成したい方にはぴったりなサービスとなっています。 今回は、そんなMapboxをユニットとして使用...
a-blog cms × 構造化データ
みなさん、サイトのリッチリザルト対応はしていますでしょうか？ 対応することで、Googleの検索結果にリッチな表現で表示できます。これにより、他の検索結果ページよりも目を引くような表示でユーザーの目を引き、アクセスしやすいサイトになり、間接的なSEO向上が見込めるというメリットがあります。 動的コンテンツ...