特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える機能です。（Ver.1.2.1より）

初期状態は非表示状態です。通常は隠しておき、クリックした時に表示されるようなものに使用できます。js-faderでは、表示／非表示の対象を複数指定できます。

デモ

スタンダードライセンスを表示する

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

プロフェッショナル/エンタープライズライセンスを表示する

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

特別ライセンスを表示する

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

デフォルト設定

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

//-------
// fader
faderMark   : '.js-fader',
faderConfig :
{
    initial      : 'hide', // ( 'hide' | 'show' )
    effect       : 'fade', // ( 'fade' | 'slide' | '' )
    speed        : 'fast', // ( 'fast' | 'slow' )
    activeClass : 'js-fader-active',
    readyMark   : '.js-ready-fader' // e.g. window.document.location.hash
},
faderArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

設定のカスタマイズ

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

ACMS.Ready(function(){
  ACMS.Config. faderMark = '.js-sample-fader';
  ACMS.Config.faderConfig = {
    initial     : 'hide', // ( 'hide' | 'show' )
    effect      : 'fade', // ( 'fade' | 'slide' | '' )
    speed       : 'fast', // ( 'fast' | 'slow' )
    activeClass : 'js-fader-active',
    readyMark   : '.js-ready-fader' // e.g. window.document.location.hash
  }
});

配列で使用する方法

faderArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはfaderMark を、configにはfaderConfig の設定を指定できます。

faderArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.faderArray.push({
    mark: '.js-sample-fader',
    config: {
      initial     : 'hide', // ( 'hide' | 'show' )
      effect      : 'fade', // ( 'fade' | 'slide' | '' )
      speed       : 'fast', // ( 'fast' | 'slow' )
      activeClass : 'js-fader-active',
      readyMark   : '.js-ready-fader'
    }
  });
});

HTMLの編集

指定したクラスをHTMLに記述します。

例）tabsMarkで「.js-fader」と指定した場合

表示／非表示を切り替えるスイッチのa要素にクラス「js-fader」を付与し、そのa要素のhref属性には頭に#が付いたフラグ名を付けます。
表示／非表示される内容部分の要素には、id属性値としてa要素で指定したhref属性値の#なしの名称を付けます。

<p><a href="#fadeSampleA" class="js-fader">詳細Aを表示する</a></p>
<p><a href="#fadeSampleB" class="js-fader">詳細Bを表示する</a></p>
<p id="fadeSampleA">詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。</p>
<p id="fadeSampleB">詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。</p>

この記事では、2025年9月26日にリリースした Ver. 3.2.3 と Ver. 3.1.56 の修正内容について紹介いたします。

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

リリースノート

Ver. 3.2.3 修正点

• CMS-7270 リッチエディターユニットから多言語機能のコードを削除（最初から動作していないため互換性には影響しません）
• CMS-7292 同梱されているサンプルの gitignore を利用すると、embed ライブラリのLicense.php もignoreされてしまう問題の修正
• CMS-7294 テキストユニット以外のユニットでもsummaryの改行を削除するように修正
• CMS-7295 ポート番号付きの環境で、静的書き出しをするとポート番号が付与されたままになる問題を修正
• CMS-7299 編集時のブロックエディタのリンクボタンに target="_blank" 時のスタイルが当てれるように data-target 属性を追加
• CMS-7300 ユニットグループを使用した場合に画像などの幅が小さくなってしまうことがある問題対応
• CMS-7301 ブロックエディターのリスト内のpタグにユニット余白が付く場合がある問題対応
• CMS-7303 管理画面のコンフィグにある、変数表やスニペットが403 Forbidden になってしまう問題を修正
• CMS-7304 Entry_Headlineモジュールでブログ・カテゴリー情報が出力できなくなっている問題を修正
• CMS-7281 カスタムフィールド変数表のメディアの変数にファイ名を出力する変数 {xxxx@name} がない問題を修正
• CMS-7298 静的書き出しで、404エラーはエラーログとして出力しないオプションを追加（static_export_exclude_log_status_codes）
• CMS-7306 WordPress形式エクスポート機能で、カスタムフィールドのメイン画像に対応
• CMS-7296 非最新マイナーバージョンの更新に対応 & PHP非対応マイナーバージョンを表示するように改善
• CMS-7309 クリックサーチでタイトルクリック時（変数表・スニペットなど）に画面遷移してしまう不具合を修正
• CMS-7311 CMSアップデート後に動画・YouTubeユニットが崩れる問題を修正
• CMS-7314 SetTemplate や SetRendered の引数で指定した変数が展開されない問題を修正
• CMS-7315 Field_ValueList のフィールド絞り込みが "em" の場合に絞り込みできない不具合を修正
• CMS-7312 ブロックメニューのタイプ変換のメニュー候補の挙動がおかしい問題を修正
• CMS-7316 APIレスポンスに X-Robots-Tag: noindex を付与するように改善
• CMS-7318 site,beginner テーマのスタイル調整とタグづれ修正
• CMS-7319 Entry_Summary系 / Entry_Bodyモジュールで、サブカテゴリー表示オプション利用時のPHPエラーを修正
• CMS-7320 カスタムフィールドメーカーの id 属性で、マルチバイト文字をそのまま／エスケープの切り替えが出来るように改善

Ver. 3.1.56 修正点

• CMS-7293 テキストユニット以外のユニットでもsummaryの改行を削除するように修正
• CMS-7278 ポート番号付きの環境で、静的書き出しをするとポート番号が付与されたままになる問題を修正
• CMS-7305 カスタムフィールド変数表のメディアの変数にファイ名を出力する変数 {xxxx@name} がない問題を修正
• CMS-7297 静的書き出しで、404エラーはエラーログとして出力しないオプションを追加（static_export_exclude_log_status_codes）
• CMS-7307 非最新マイナーバージョンの更新に対応 & PHP非対応マイナーバージョンを表示するように改善
• CMS-7308 クリックサーチでタイトルクリック時（変数表・スニペットなど）に画面遷移してしまう不具合を修正
• CMS-7317 APIレスポンスに X-Robots-Tag: noindex を付与するように改善

最後に

該当する問題がございましたら、できるだけ早めのバージョンアップをご検討ください。

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

特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える組み込みJSです。（Ver.1.2.1より）初期状態は非表示状態です。

通常は隠しておき、クリックした時に表示されるようなものに使用できます。

デモ

詳細を表示する

詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。

デフォルトの設定

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

fadeHeadClassSuffix : 'fade-head',
fadeBodyClassSuffix : 'fade-body',

設定のカスタマイズ

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

ACMS.Ready(function(){
  ACMS.Config. fadeHeadClassSuffix = 'js-sample-fade-head';
  ACMS.Config. fadeBodyClassSuffix = 'js-sample-fade-body';
});

使い方

HTMLを修正します。

例）fadeHeadClassSuffixで「fade-head」、fadeBodyClassSuffixで「fade-body」と指定した場合

<p class="fade-head">詳細を表示する</p>
<p class="fade-body">詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。</p>