2025年夏までの勉強会の予定をご紹介
a-blog cms Ver. 3.2 リリースに向けて、日本各地での勉強会の企画を進めております。自社主催のものもあれば登壇イベントもあります。お近くのイベントによろしければ参加をご検討ください。
以下のバナーには、申し込みページへのリンクがされています。
a-blog cms Ver. 3.2 リリースに向けて、日本各地での勉強会の企画を進めております。自社主催のものもあれば登壇イベントもあります。お近くのイベントによろしければ参加をご検討ください。
以下のバナーには、申し込みページへのリンクがされています。
ブロック要素の高さを揃える機能が標準で実装されています。(Ver. 1.5.1より)
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。
//----------
// autoHeight
autoHeightMark : '.js-autoheight',
autoHeightConfArray : [
{
'.column3' : '3', // クラス名と高さを揃えるコンテンツ数
'.column2' : '2'
}
],
autoHeightMark | 適用したい親要素に指定するクラスを設定 |
---|---|
autoHeightConfArray | 実際に高さを揃える要素につけるクラスの設定とコンテンツ数を設定 |
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'
スタンダードライセンス
自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。
プロフェッショナル/エンタープライズライセンス
自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス
特別ライセンス
自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。
この記事では、2025年5月23日にリリースした Ver. 3.1.49 と Ver. 3.0.53 の修正内容について紹介いたします。
現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。
ログアウト状態または読者権限で、テンプレートに以下管理系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 -->
などタッチモジュールで囲んでいる場合に、テンプレートが隠れる場合は発生しません。
該当する問題がございましたら、できるだけ早めのバージョンアップをご検討ください。
今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。
スマホなどの小さいディスプレイの時に、横に長いコンテンツ(テーブルなど)を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくくUIとして悩むところです。
そこで、この組み込みJS「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。
横スクロールするコンテンツの親要素に js-scroll-hint
をclass属性として適用します。
<div class="js-scroll-hint">
<table class="acms-table" style="white-space: nowrap;">
...
</table>
</div>
オプションは 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
で設定したクラス(アイコン要素)のスタイルを変更して、表示したい位置に配置するだけです。アイコン要素がビューポートと交差した時にアイコン要素が表示されるようになります。デフォルトでは scrollHintIconClass
は scroll-hint-icon
となっているため、以下のようにCSSを変更すると、js-scroll-hint
を適用した要素の上から 25% の位置でスクロール可能時に表示されるアイコンを表示します。
.scroll-hint-icon { top: 25%; }