この記事では、2024年7月29日にリリースした Ver. 3.1.21 及び、Ver. 3.0.38、Ver. 2.11.67 の修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver. 3.1.21 リリースノート

変更点

CMS-6820 メディアモーダルのUI改善
CMS-6881 コンフィグ・テーマ・編集画面セットの一覧で従来の設定方法が「非推奨」表示になっていて、UIが分かりにくい問題を修正

修正点

CMS-6871 フォームID の投稿データの本文表示ラベルの切り替え
CMS-6819 sitemap.xml のバージョンを更新 & エントリーコードが空の場合、重複出力される問題を修正"
CMS-6880 ブラウザサポートのバージョンを更新
CMS-6874 コンフィグキャッシュでLifetimeを「.env」で設定できるように修正 & デフォルトLifetimeを長く（10日間）設定
CMS-6879 strip_select_tags校正オプションのパフォーマンス向上
CMS-6876 クエリの発行数を抑えるように修正
CMS-6877 メディアユニットでサイズ指定しない場合も、リサイズ校正オプションが動作する問題を修正
CMS-6878 jpeg画像生成・リサイズ時のデフォルト圧縮率を75%に変更
CMS-6883 raw校正オプションを指定した場合、target属性が消えてしまう問題を修正（テキストユニットなど）
CMS-6886 セキュリティフィックスにより、JavaScriptのコンテンツの遅延読み込み（js-lazy-contents）が動作しない場合がある問題を修正
CMS-6889 API機能利用時に監査ログの通知メール送信をすると正常に表示できない問題の修正

Ver. 3.0.38 リリースノート

修正点

CMS-6875 コンフィグキャッシュでLifetimeを「.env」で設定できるように修正 & デフォルトLifetimeを長く（10日間）設定
CMS-6884 raw校正オプションを指定した場合、target属性が消えてしまう問題を修正（テキストユニットなど）
CMS-6887 セキュリティフィックスにより、JavaScriptのコンテンツの遅延読み込み（js-lazy-contents）が動作しない場合がある問題を修正

Ver. 2.11.67 リリースノート

修正点

CMS-6885 raw校正オプションを指定した場合、target属性が消えてしまう問題を修正（テキストユニットなど）
CMS-6888 セキュリティフィックスにより、JavaScriptのコンテンツの遅延読み込み（js-lazy-contents）が動作しない場合がある問題を修正

主なリリースノートの詳細な内容

CMS-6820 メディアモーダルのUI改善

ファイル名が2つ出力されていたことと、メディアで管理する情報が多くなりわかりづらくなっていたため、入力項目を編集タブ、その他を詳細情報タブで切り替えられるようにUI改善を行いました。それに伴い「アップロード者」と「最終更新者」を表示と、「詳細情報」入力欄の見出しを「メモ」に変更し管理用のメモとして使用できる旨をツールチップに明記し、よりメディアを管理しやすく情報を整理しました。

従来のメディアモーダル画面

新しいメディアモーダル画面（編集タブ）

新しいメディアモーダル画面（詳細情報タブ）

CMS-6881 コンフィグ・テーマ・編集画面セットの一覧で従来の設定方法が「非推奨」表示になっていて、UIが分かりにくい問題を修正

Ver. 3.0 以前で、コンフィグセットを利用せず、「このブログの初期コンフィグ」を利用しているサイトを Ver. 3.1 にアップデートした場合、「このブログの初期コンフィグ（非推奨）」という表示になってしまい、「このブログの初期コンフィグ」を利用することが今後できなくなると勘違いを発生させるようなUIになっているというユーザーの方からのフィードバックがあり改善をおこないました。

「非推奨」という表記を廃止し、「レガシー設定」に変更することであくまで古い方法であり、非推奨ではないことがわかるようになりました。

従来のコンフィグセット一覧

新しいコンフィグセット一覧

従来のコンフィグセット一覧（コンフィグセットが存在しない場合）

新しいコンフィグセット一覧（コンフィグセットが存在しない場合）

コンフィグセット一覧だけでなく、テーマセット一覧及び編集画面セット一覧も同様に修正しています。

また、コンフィグ一覧からも「非推奨」という文言を削除し、「レガシー設定」に変更を行いました。

古いコンフィグ一覧

新しいコンフィグ一覧

コンフィグキャッシュでLifetimeを「.env」で設定できるように修正 & デフォルトLifetimeを長く（10日間）設定

コンフィグキャッシュのみ Lifetime （有効期限）を設定することができず、必要以上に長い期間コンフィグキャッシュが残ってしまう問題を解決するため、コンフィグキャッシュのLifetime（有効期限）を「.env」で設定できるようにいたしました。

また、「.env」でキャッシュの Lifetime （有効期限）を指定しなかった場合、テンプレートキャッシュとコンフィグキャッシュの Lifetime（有効期限）を10日間にするようにいたしました。

Lifetime（有効期限）を任意の値に変更したい場合は、a-blog cms 設置ディレクトリの「.env」から以下のように設定できます。

# コンフィグキャッシュに指定できるドライバーは、file, database, redis のみとなります。
CACHE_CONFIG_DRIVER=database
CACHE_CONFIG_NAMESPACE=config
CACHE_CONFIG_LIFETIME=864000

最後に

該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。
また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。

テキストカラーコントラスト

概要

背景色が動的に変化する場合（CMSでカラー設定ができるようにしたり、ランダムで色を変えるなど）文字色によって、文字が読みにくくなる場合があります。この組み込みJSを使用すると、背景色からコントラストが高い文字色（黒系・白系）を設定できるようになります。

デモ

ラベル

<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: #333;" >ラベル</span>
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: tomato;" >ラベル</span>
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: skyblue;" >ラベル</span>

使い方

「js-contrast-color」クラスを振った要素の背景色から、その要素の文字色を変更します。

<span class="js-contrast-color">ラベル</span>

設定について

設定は data属性で指定します。

データ属性名	詳細	デフォルト値
data-black-color	黒系の文字色のカラーをhex色で指定します	#000000
data-white-color	白系の文字色のカラーをhex色で指定します	#ffffff
data-bg-color	コントラスト計算に使用する背景色を固定で指定します。	要素の背景色

<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" >ラベル</span>

Ver. 3.1.22 リリースのお知らせ

この記事では、2024年7月30日にリリースした Ver. 3.1.22 の修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver. 3.1.22 リリースノート

修正点

CMS-6892 Ver. 3.1.21 でコンフィグ・テーマ・編集画面セットの選択肢が出てこない問題を修正

主なリリースノートの詳細な内容

CMS-6892 Ver. 3.1.21 でコンフィグ・テーマ・編集画面セットの選択肢が出てこない問題を修正

Ver. 3.1.21 の修正が原因でブログ・カテゴリー編集画面でコンフィグ・テーマ・編集画面セットを選択できない状態になっていたのを選択できるように修正いたしました。

ブログの編集画面

最後に

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。

キーワードをハイライトする

a-blog cmsでは、CMSでの検索結果ページで検索キーワードにマッチしている文字列をハイライト表示する設定が標準で実装されています。（Ver.1.2.1より）
この設定をおこなうと、検索キーワードにマッチした文字列に独自のスタイルを設定することができるため、検索結果内のどこに検索キーワードがマッチしているのかが分かりやすいというメリットがあります。

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

config.jsの内容

// 検索ワードのハイライト
searchKeywordHighlightMark: '.entry, .entryColumn, .entryTitle', 
searchKeywordMatchTag: 'mark',
searchKeywordMatchClass: 'highlight'

searchKeywordHighlightMark	検索結果ページで、ここで指定したセレクタ内に検索ワードが含まれているときに、該当部分がハイライトします。「.entry」の場合は、class="entry" の要素内に検索ワードが含まれていたらハイライトします。
searchKeywordMatchTag	ハイライト部分に付与されるHTMLタグを指定します
searchKeywordMatchClass	ハイライト部分に付与されるclass名です。ドット「.」なしで指定します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.searchKeywordHighlightMark = '.sample-contents'';
  ACMS.Config.searchKeywordMatchTag  =  'mark';
  ACMS.Config.searchKeywordMatchClass = 'sample-highlight';
});

検索文字列の指定

ACMS.Config.keywordに検索対象文字を代入

検索する文字列は「ACMS.Config.keyword」に検索対象の文字を代入することで指定できます。

例）「いろ」と「ほへ」を検索文字列として指定する

ACMS.Ready(function(){
  ACMS.Config.keyword = "いろ ほへ";
});

URLコンテキストにkeywordを指定

URLの末尾に「/keyword/検索したい文字列」を追記することで、ACMS.Config.keywordに自動で値が設定され、上記のJavaScriptを書かなくても文字列の検索が可能です。

https://example.com/keyword/いろ%20ほへ

keywordを検索するためのフォームを作成

また以下のようなフォームを用意することで自動でURLを組み立てることも可能です。ポイントとしては、1つのinput要素のname属性には「query」とvalue属性に「keyword」を指定し、もう1つのinput要素にはname属性に「keyword」とvalue属性に「検索したい文字列」を指定したものを用意することです。

<form action="" class="search-form" method="post" role="search" aria-label="検索フォーム">
  <input type="hidden" name="tpl" value="/entry.html">
  <input type="hidden" name="query" value="keyword">
  <input type="hidden" name="bid" value="6">
  <input type="text" name="keyword" class="search-form-text" value="" size="15" placeholder="検索キーワード">
  <span class="search-form-btn-wrap">
    <button type="submit" name="ACMS_POST_2GET" class="search-form-btn"><span class="acms-icon-search"></span></button>
  </span>
</form>

HTMLとCSSの編集

HTML

config.jsで指定したクラスをHTMLに記述します。

例）「.entry」を指定した場合検索対象：

いろはにほへと

検索キーワード：「いろ」「ほへ」

検索結果：

<span class="highlight1">いろ</span>はに<span class="highlight2">ほへ</span>と

項目1の内容で指定した場合、class="entry"のあるdivが検索対象となり、検索キーワードにマッチしている文字列がある部分に自動でハイライト表示のスタイルが付与されます。

CSS

ハイライト表示のスタイル指定はCSSで以下のように記述します。例えば、「いろ」「ほへ」の検索結果では、「いろ」に「.highlight1」というクラスが付与され、「ほへ」に「.highlight2」というクラスが付与されます。複数キーワードで検索されることが予想されるならその分スタイルを用意する必要があります。

例）

/* ハイライト */
.highlight1 {
	color: #000;
	background: #ffff66;
}
.highlight2 {
	color: #000;
	background: #a0ffff;
}
.highlight3 {
	color: #000;
	background: #99ff99;
}
.highlight4 {
	color: #000;
	background: #ff9999;
}
.highlight5 {
	color: #000;
	background: #ff66ff;
}
.highlight6 {
	color: #000;
	background: #880000;
}

Ver. 2.9.49 をダウンロード

Ver. 3.1.21 リリースのお知らせ

Ver. 3.1.21 リリースノート

変更点

修正点

Ver. 3.0.38 リリースノート

修正点

Ver. 2.11.67 リリースノート

修正点

主なリリースノートの詳細な内容

CMS-6820 メディアモーダルのUI改善

CMS-6881 コンフィグ・テーマ・編集画面セットの一覧で従来の設定方法が「非推奨」表示になっていて、UIが分かりにくい問題を修正

コンフィグキャッシュでLifetimeを「.env」で設定できるように修正 & デフォルトLifetimeを長く（10日間）設定

最後に

テキストカラーコントラスト

概要

デモ

使い方

設定について

Ver. 3.1.22 リリースのお知らせ

Ver. 3.1.22 リリースノート

修正点

主なリリースノートの詳細な内容

CMS-6892 Ver. 3.1.21 でコンフィグ・テーマ・編集画面セットの選択肢が出てこない問題を修正

最後に

キーワードをハイライトする

デフォルトの設定

config.jsの内容

設定のカスタマイズ

検索文字列の指定

ACMS.Config.keywordに検索対象文字を代入

URLコンテキストにkeywordを指定

keywordを検索するためのフォームを作成

HTMLとCSSの編集

HTML

CSS