高さを揃える

現在ではレスポンシブ対応をしたjs-autoheight-rを公開しております。特に理由がなければ、js-autoheight-rをご利用ください。

ブロック要素の高さを揃える機能が標準で実装されています。(Ver. 1.5.1より)

1. 設定の編集

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

//----------
// autoHeight
autoHeightMark   : '.js-autoheight',
autoHeightConfArray : [
    {
        '.column3'  : '3', // クラス名と高さを揃えるコンテンツ数
        '.column2'  : '2'
    }
],


autoHeightMark 適用したい親要素に指定するクラスを設定
autoHeightConfArray 実際に高さを揃える要素につけるクラスの設定とコンテンツ数を設定

2. HTMLとCSSの編集

HTML

siteテーマを修正する場合 /themes/site/include/main/summaryDefault.html を修正します。

<!-- BEGIN_MODULE Entry_Summary id="summaryDefault" -->
<h2>サマリー1/デフォルト</h2>
<div id="summaryDefault" class="js-autoheight">

<!-- BEGIN notFound -->
<p>記事が見つかりませんでした。</p>
<!-- END notFound -->

<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<div class="summaryDefaultEntry js-biggerlink column2">
	<div style="width:{x}px; height:{y}px; overflow:hidden; position:relative;"><!-- BEGIN image:veil -->
		<img src="/{path}" width="{imgX}" height="{imgY}" style="left:{left}px; top:{top}px; position:relative;" /><!-- END image:veil --><!-- BEGIN noimage -->
		noimage
		<!-- END noimage -->
	</div>

   (以下略)>

3行目の <div id="summaryDefault"> に class="js-autoheight" を追加し、11行目のクラスに column2 を追加します。もし、4つを同じにしたい場合には、設定に以下のようなものを追加する事で4つのDIVの高さを揃える事が可能になります。

'.column4'  : '4'

3. デモ

スタンダードライセンス

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

プロフェッショナル/エンタープライズライセンス

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

特別ライセンス

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

Ver. 3.1.49 & Ver. 3.0.53 リリースのお知らせ


この記事では、2025年5月23日にリリースした Ver. 3.1.49Ver. 3.0.53 の修正内容について紹介いたします。

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

リリースノート

Ver. 3.1.49 修正点

  • CMS-7208 ログアウト時や読者権限で、テンプレートに管理系・編集系のGETモジュールがあると403エラーになる場合がある問題を修正

Ver. 3.0.53 修正点

  • CMS-7209 ログアウト時や読者権限で、テンプレートに管理系・編集系のGETモジュールがあると403エラーになる場合がある問題を修正

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

CMS-7208 ログアウト時や読者権限で、テンプレートに管理系・編集系のGETモジュールがあると403エラーになる場合がある問題を修正

ログアウト状態または読者権限で、テンプレートに以下管理系GETモジュールがあるページを表示した場合に403エラーになる問題を修正しました。

Admin_Errors モジュール

<!-- BEGIN_MODULE Admin_Errors -->
...
<!-- END_MODULE Admin_Errors -->

Admin_Entry_Edit モジュール

<!-- BEGIN_MODULE Admin_Entry_Edit -->
...
<!-- END_MODULE Admin_Entry_Edit -->

テンプレートを読み込んでいても <!-- BEGIN_MODULE Touch_Edit --> などタッチモジュールで囲んでいる場合に、テンプレートが隠れる場合は発生しません。


最後に

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

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

スクロールヒント

1. 概要

スマホなどの小さいディスプレイの時に、横に長いコンテンツ(テーブルなど)を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくくUIとして悩むところです。

そこで、この組み込みJS「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。

Col1 Col2 Col3 Col4
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Tips. Tips. Tips. Tips.

2. 使用方法

横スクロールするコンテンツの親要素に js-scroll-hint をclass属性として適用します。

<div class="js-scroll-hint">
  <table class="acms-table" style="white-space: nowrap;">
    ...
  </table>
</div>

3. オプション

オプションは js/config.js で設定されています。


項目名 詳細 デフォルト値
suggestClass スクロールが始まった時につくクラス名 is-active
scrollableClass スクロールするコンテンツにつくクラス名 is-scrollable
scrollableRightClass 右にスクロールできるコンテンツにつくクラス名 is-right-scrollable
scrollableLeftClass 左にスクロールできるコンテンツにつくクラス名 is-left-scrollable
scrollHintClass スクロールコンテンツの親要素につくクラス名 scroll-hint
scrollHintIconClass アイコン要素のクラス名 scroll-hint-icon
scrollHintIconAppendClass アイコン要素のクラス名(追加) scroll-hint-icon-white
scrollHintIconWrapClass アイコン要素の親要素のクラス名 scroll-hint-icon-wrap
scrollHintText スクロールメッセージ要素のクラス名 scroll-hint-text
remainingTime 一定時間が経ったらアイコンを非表示にします。 -1
scrollHintBorderWidth シャドーが有効場合のシャドーの幅を指定します。 10
enableOverflowScrolling iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加します。 true
suggestiveShadow 要素がスクロール可能の場合、アイコンの他にシャドーも表示します。 false
applyToParents 指定されたセレクターの親要素に対してJavaScriptが実行されます。 false
offset アイコンが表示されるのに必要なスクロール量(どれくらいスクロールできる場合にアイコンを表示するのか)を数値(単位はpx)で指定します。 0
i18n.scrollable スクロールのメッセージを変更できます。 スクロールできます

オプション設定例

オプションを上書きする時の例になります。$.extend を使用して部分的に書き換えれるようになっています。

<script>
  ACMS.Ready(function() {
    ACMS.Config.scrollHintConfig = $.extend(ACMS.Config.scrollHintConfig, {
      suggestClass: 'is-active',
      scrollableClass: 'is-scrollable',
      scrollableRightClass: 'is-right-scrollable',
      scrollableLeftClass: 'is-left-scrollable',
      scrollHintClass: 'scroll-hint',
      scrollHintIconClass: 'scroll-hint-icon',
      scrollHintIconAppendClass: 'scroll-hint-icon-white',
      scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
      scrollHintText: 'scroll-hint-text',
      remainingTime: -1,
      scrollHintBorderWidth: 10,
      enableOverflowScrolling: true,
      suggestiveShadow: false,
      applyToParents: false,
      offset: 0,
      i18n: {
        scrollable: 'スクロールできます'
      }
    });
  });
</script>

アイコンの表示位置を調整する

Ver. 3.0.10 より、スクロール可能時に表示されるアイコンの表示位置を変更できるようになりました。Ver. 3.0.9 以前の 「Scroll Hint」ではアイコンが表示される位置が js-scroll-hint クラスが適用された要素の高さの半分がビューポートと交差した時でしたので、縦に長い表などで、表の上側の位置でアイコンを表示することができませんでした。

表示位置の変更方法は簡単で、scrollHintIconClass で設定したクラス(アイコン要素)のスタイルを変更して、表示したい位置に配置するだけです。アイコン要素がビューポートと交差した時にアイコン要素が表示されるようになります。デフォルトでは scrollHintIconClassscroll-hint-icon となっているため、以下のようにCSSを変更すると、js-scroll-hint を適用した要素の上から 25% の位置でスクロール可能時に表示されるアイコンを表示します。

.scroll-hint-icon {
  top: 25%;
}