a-blog cms awards 2020 応募受付スタートいたしました！
a-blog cms awards 2020 の応募開始が本日4月1日より開始となりました。
2019年度（2019年4月〜2020年3月）に作成したサイトがあれば応募してみませんか？
お1人で複数の制作事例の応募可能です。あなたのご応募をお待ちしております！
なお、今年の参加特典には、スタンダードライセンスのバージョンアップ権利または1ユーザーライセンスをご用意しております。 現在スタンダードライセンスを使用中で、最新バージョンへのバージョンアップを検討しているサイトをお持ちの場合はぜひご検討ください。
応募条件
- a-blog cms で作られたサイトであること
- 今回提出されたコンテンツをa-blog cmsの今後の広報活動に利用することを承諾していること
- 2019年度（2019年4月〜2020年3月）に制作されたサイトであること※リニューアル可
- 個人利用のサイトはご応募いただけません
参加特典
・スタンダードライセンスのバージョンアップ権利または1ユーザーライセンス
詳細は下記のイベントページをご覧ください。
a-blog cms awards とは？
a-blog cms awardsは、a-blog cms で制作されたサイトの事例をあつめて、よりよいサイトをみつけるための企画です。 応募条件はa-blog cmsで制作されたサイトであること。選ばれたサイトから各分野の賞を贈り、その中からさらに優れたものを決めます。さらに優れたものには豪華景品を贈呈します。 2019年から始まり、今回で2回目の開催となります。
多くのサイトからのご応募をお待ちしておりますので、お気軽にご応募くださいね！
モジュールの利用
a-blog cms にはモジュールと呼ばれる仕組みがあり、この「モジュール」がa-blog cmsで管理しているコンテンツの表示を管理しています。
モジュールには、大きく分けてビルトインモジュール・フィールドモジュール・タッチモジュールの3種類がありますが、今回はよくサイト制作で使われているビルトインモジュールを使ってみましょう。
ここでは、最終的にお知らせカテゴリーの記事一覧を表示できるように説明していきます。
作業の前に、まずは a-blog cms にログインしてください（ http://あなた専用のURL/login/ のURLでログイン画面が表示されます ）。
モジュールを表示する
1.使用するモジュールのスニペットを入手する
まずは、使用するモジュールのスニペットを入手する必要があります。（スニペットとは、a-blog cms で管理されているコンテンツを表示するために必要なソースコードのことです。）ここでは記事の一覧を表示したいので、「エントリーリスト」というモジュールのスニペットを入手します。
管理者ボックス（ヘッダー下の灰色のボックス）より、「管理ページ」ボタンをクリックし、管理ページに移動したら、左の黒いサイドバーより、「コンフィグ」へ移動します。
管理者ボックス
「モジュール」項目からエントリーリストを探し、「スニペット」ボタンをクリックしてください。別ウィンドウが表示され、HTMLのコメントタグの文字列とHTMLタグが書かれているのが確認できますが、これがスニペットです。ここまできたら、スニペットをコピーします。
2. テンプレートにモジュールを貼り付ける
ご自分のa-blog cmsが入った環境の /themes/site2015/top.html を開いてください。さきほどコピーしたスニペットを、top.html のお好きな場所にペーストしてください。保存をし、 http://あなた専用のURL/ へ移動すると、リンク付きの記事の一覧が表示されています。
赤く囲われた枠が追加したエントリーリスト
これでサイト全体の記事の一覧が表示されるようになりました。ですが、サイト全体の記事一覧が表示されている状態なので、まだお知らせカテゴリーのエントリー一覧とは言えません。エントリーを表示する条件を追加して、お知らせカテゴリーのエントリーのみを表示してみましょう。
お知らせカテゴリーのエントリーのみを表示する
1. モジュールIDを作成する
お知らせカテゴリーのエントリーのみを表示するには、モジュールIDを作る必要があります。モジュールIDは管理画面で作成します。再度管理ページへ移動し、左の黒いサイドバーから「モジュールID」をクリックして「モジュールID管理」の画面へ移動します。
モジュールID管理の画面
右上の「モジュールIDを作成」ボタンをクリックします。新規モジュールID画面になったら、以下の項目を入力します。
| モジュール | エントリーリスト（Entry_List） |
|---|---|
| id | newsList |
| 名前 | お知らせの記事一覧 |
| カテゴリーID（cid） | お知らせ（「ID参照」ボタンをクリックして選択すると簡単です） |
設定が完了した画面
入力したら、上部にある青い「作成」ボタンをクリックします。
これで、お知らせカテゴリーのみを表示するエントリーリストのモジュールIDができました。
2. モジュールIDをテンプレートに反映させる
今の状態では、管理画面でモジュールIDを作成しただけで「モジュールを表示する」でテンプレートに記述したエントリーリストとは情報がひも付けられていません。モジュールIDの設定を反映するには、テンプレートにモジュールIDを記述する必要があります。
テンプレートに記述したエントリーリストのスニペットの冒頭に、id="newsList"と記入してください。
以下、記述例になります。
<!-- BEGIN_MODULE Entry_List id="newsList" -->
テンプレートを保存したら、サイトを確認しましょう。お知らせカテゴリーのエントリーのみが表示されるようになっています。
設定完了後のエントリーリスト。エントリーがお知らせカテゴリーのみに絞られている。
そのほかのビルトインモジュール
今回はエントリーリストを使って説明しましたが、ほかにもカテゴリーを表示する「カテゴリーリスト」や、ナビゲーションを表示する「ナビゲーション」などのビルトインモジュールが用意されているので、使用してみてください。
ビルトインモジュールのドキュメントは、以下のページになります。
また、今回は管理画面からスニペットをコピー&ペースとしましたが、ビルトインモジュールのスニペットはa-blog cms 制作者向け情報にも用意しています。
Pretty Scroll でオフセット距離を設定する
Site2019テーマで実装した例
今回の機能紹介記事では、2020年1月14日にリリースされたVer. 2.11.3より加わった、Pretty Scrollの属性をご紹介します。
data-offset-topとdata-offset-bottomの2つ属性が追加されたことにより、オフセット距離が設定できるようになります。
下記のコードではウィンドウの上部より100px離れた位置で要素を固定します。
<div class="js-pretty-scroll-container"> <div class="main"> </div> <div class="sub js-pretty-scroll" data-offset-top="100"> </div> </div>
data-offset-bottomを指定すれば、指定した数値のpx分だけウィンドウの下部から離れた位置で対象の要素を固定します。
Pretty Scrollの使い方はドキュメントをご覧ください。