スムーズスクロール

ページ内のリンクをクリックしたとき、スムーズにスクロールする機能です。(Ver. 1.2.1より)
通常のHTMLのアンカーリンクでのページ内移動では瞬間的に移動しますが、この設定をおこなうとスクロールのスピードを徐々に変化させることができるため、ページ内のどこに移動したのか閲覧者が認識しやすくなります。

例えば、Webページの上部に移動させる「ページの先頭へ戻る」というアンカーリンクや、ページ内の任意の項目に移動させるアンカーリンクで使用できます。※ページ内の任意の項目に移動させるのはVer. 1.5.x以上からになります。

飛び先判定

アンカーリンクは「#hoge」のようなリンクになりますが、飛び先になる要素は「id属性」もしくは「name属性」で設定した要素になります。

<section id="hoge"> <!-- id属性で指定 -->

<form name="hoge" method="post"> <!-- name属性で指定 -->

デフォルトの設定

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

scrollToMark: 'a.scrollTo', 
scrollToI: 40,
scrollToV: 0.5,

scrollToMark セレクタのアンカーをクリックするとhref属性のフラグに指定された要素へスクロールします。
scrollToI 間隔(i)msec
scrollToV 0 < 移動量(v) < 1

設定のカスタマイズ

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

ACMS.Ready(function(){
  ACMS.Config.scrollToMark    = 'a.js-scrollTo';
  ACMS.Config.scrollToI       = 40;
  ACMS.Config.scrollToV       = 0.5;
});

デモ

ページの先頭へ

パスワード認証によるGmail SMTPが使用できなくなりました

この記事は 2024年7月9日に公開された記事ですが、2025年4月15日 に既存の設定で送信できなくなった事から、内容をより詳細に記述しアップデートしました。

パスワードを使ったGmail SMTPの利用が不可に

Gmailの仕様変更により、2024年9月30日より GmailのSMTP サーバー(smtp.google.com)でパスワードを利用した認証が利用できなくなります。 a-blog cms で、GmailのSMTPをご利用の皆様は、2024年9月30日までに対策をお願いします。


対応方法1: Gmail SMTP の利用をやめる

パスワード認証が使える他のSMTPサーバーに変更いただくか、SMTPを使用せずSendmailを利用します。


Gmail以外のSMTPの設定をするか、空に設定する

Gmail以外のSMTPの設定をするか、空に設定する

この変更により、送信元メールアドレスのドメインが送信元サーバーと違ってしまう可能性があります。その際は、SPFレコード(DNS)などを設定して「なりすましメール」の防止を行ってください。

対応方法2: Gmail SMTP を OAuth認証で利用する(Ver. 3.1.19 以降)

a-blog cms を Ver. 3.1.19 以降にアップデートすることで、OAuth認証を使った Gmail SMTPが利用できるようになります。

管理画面 > コンフィグ > メール設定 にある Google SMTPサーバー設定を行ってください。


Gmail SMTP設定

Gmail SMTP設定

OAuthクライアントJSONの取得方法

「Google Cloud」の「API とサービス」管理ページにアクセスします。

https://console.cloud.google.com/apis/?hl=ja


Google Cloud の「API とサービス」

Google Cloud の「API とサービス」

Gmail API の有効化

ライブラリから「Gmail API」を検索し、「有効化」しておきます。


Gmail API の有効化

Gmail API の有効化

OAuthクライアントJSONの取得

認証情報より「OAuthクライアントID」を作成し、OAuthクライアントJSONファイルをダウンロードし、サーバーに設置後、管理画面にJSONまでのパスを入力ください。

OAuthクライアントJSONの取得

左側のメニューにある「認証情報」をクリックし、「+認証情報を作成」をクリックしてください。


次に「OAuthクライアントID」を選択してください。


OAuth クライアントIDを作成

OAuth クライアントIDを作成

以下の画面に切り替わりますので、設定項目を入力し(作成)ボタンをクリックします。


設定項目
アプリケーションの種類 ウェブアプリケーション
名前 分かりやすい名前をつけてください。例)Gmail
承認済みのリダイレクト URI a-blog cms管理画面に記述されているコールバックを入力

「OAuthクライアントを作成しました」の表示が出たら成功です。今回の設定では、JSONファイルを利用しますので「JSONをダウンロード」をクリックしファイルをダウンロードします。

ダウンロードしたファイルを利用するサーバーにアップロードしてください。

コンフィグ > メール設定 > Google SMTPサーバー の設定に、メールアドレスと上記の JSONファイルのパスを設定し、保存することで(認証)ボタンが表示されます。


これで(認証)ボタンをクリックで設定完了です。

また、既存の SMTPサーバー の設定は空にしておいてください。


これで、設定は完了ですので、フォームからメール送信が可能かどうかをテストしてください。


交互にclassを付与するゼブラ機能

a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能(zebra)の設定が標準で実装されています。(Ver. 1.3.0より)この機能を使用してクラスが付与される要素は次のとおりです。

  • tableのtr
  • ul, olのli
  • dlのdt, dd

デモ

1つ目のdt(1行目)
1つ目のdd(2行目)
2つ目のdd(3行目)
3つ目のdd(4行目)
2つ目のdt(5行目)
1つ目のdd(6行目)

設定の編集

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

//-------
// zebra
zebraMark       : '.js-zebra',
zebraOddClass   : 'odd',
zebraEvenClass  : 'even',

zebraMark ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。
zebraOddClass 奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。
zebraEvenClass 偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。

使い方

HTML

指定したクラスをHTMLのtable要素やul要素、ol要素、dl要素に記述します。例)zebraMarkで「.js-zebra」と指定した場合

<dl class="js-zebra">
  <dt>1つ目のdt(1行目)</dt>
  <dd>1つ目のdd(2行目)</dd>
  <dd>2つ目のdd(3行目)</dd>
  <dd>3つ目のdd(4行目)</dd>
  <dt>2つ目のdt(5行目)</dt>
  <dd>1つ目のdd(6行目)</dd>
</dl>

出力後のソースコード

<dl class="js-zebra">
  <dt class="odd">1つ目のdt(1行目)</dt>
  <dd class="even">1つ目のdd(2行目)</dd>
  <dd class="odd">2つ目のdd(3行目)</dd>
  <dd class="even">3つ目のdd(4行目)</dd>
  <dt class="odd">2つ目のdt(5行目)</dt>
  <dd class="even">1つ目のdd(6行目)</dd>
</dl>

CSS

必要に応じてスタイルを指定します。