2020年3月8日にリリースされたVer. 2.11.8より、前後リンク（SerialNavi ）を表示するブロック内でeidを表示できるようになりました。

前後リンクのeidを使ってできるようになること

前後リンクでeidが表示できるようになり、前後のエントリーのカスタムフィールド 画像を表示する際には、以前まではポストインクルードで呼び出す必要がありましたが、代わりにctxを使って呼び出せるようになります。

実装方法

ソースコードの例

<!-- BEGIN serialNavi:veil -->
<nav aria-label="ページ送り">
  <ul class="serial-nav clearfix">
    <li class="serial-nav-item serial-nav-item-prev"><!-- BEGIN prevLink -->
        <a href="{url}">&laquo;<!-- BEGIN_MODULE\ Entry_Field id="EF_no_context" ctx="eid/{eid}" --><img src="%{MEDIA_ARCHIVES_DIR}\{ogp_image@path\}" alt="" width="80">\{title\}<!-- END_MODULE\ Entry_Field --></a><!-- END prevLink -->
    </li>
    <li class="serial-nav-item serial-nav-item-next"><!-- BEGIN nextLink -->
        <a href="{url}"><!-- BEGIN_MODULE\ Entry_Field id="EF_no_context" ctx="eid/{eid}" -->\{title\}<img src="%{MEDIA_ARCHIVES_DIR}\{ogp_image@path\}" alt="" width="80">&raquo;<!-- END_MODULE\ Entry_Field --></a><!-- END nextLink -->
    </li>
  </ul>
</nav>
<!-- END serialNavi:veil -->

※上記のスクリーンショットの通りにするにはカスタムフィールド の作成と別途CSSの記述が必要になります。

モジュールIDの設定

Entry_Fieldのモジュールは別途モジュールIDを作成する必要があります。モジュールの設定は、エントリーのURLコンテキストのチェックを外した状態で作成してください。 （※エントリーのURLコンテキストが優先された状態ではctxで指定した値が優先されません）

まとめ

これで、以前よりも楽にカスタムフィールド 画像が表示できるようになります。よりリッチな前後リンクをぜひ実装してみてくださいね！

カスタムフィールドとは

エントリーや、カテゴリー・ブログ・ユーザーに対して独自のデータを追加することができる機能です。追加したデータは表示や検索用のキーとして利用されます。例えば、ひとつの商品を紹介するエントリーに対して「値段・発売日・サイズ」などの情報をカスタムフィールドとして追加することで、商品情報のデータベースを作ることができます。

カスタムフィールドのタグの基本

カスタムフィールドはフォームタグのようにHTMLベースで書くことができます。値段を入れるカスタムフィールドを追加してみます。カスタムフィールドの変数は price にします。

<input type="text" name="price" value="{price}" />
<input type="hidden" name="field[]" value="price" />

これでカスタムフィールドが１つできました。HTMLなので入力画面を入力しやすいレイアウトできます。

カスタムフィールドでできること

カスタムフィールドは以下のような入力フォームが追加できます。

• テキスト（テキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス）
• 画像
• ファイル
• 地図（GoogleMaps）

今回作成するカスタムフィールド

では、site2015テーマを元に以下のようなカスタムフィールドを追加してみたいと思います。（site2015テーマでインストールした事を前提としています。）

• エントリー（記事）データに独自フィールドを追加
• 商品価格のテキストデータを追加
• 商品画像の画像データを追加

編集画面のカスタマイズ

SFTPに接続し、/themes/site2015/admin/entry/field.html に以下のコードを追記します。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>商品価格</th>
    <td>
      <input type="text" name="price" value="{price}" class="acms-admin-form-width-full"/>
      <input type="hidden" name="field[]" value="price" />
    </td>
  </tr>
  <tr>
    <th>商品画像</th>
    <td>
      <!-- BEGIN productImage@path:veil -->
      <img src="%{ARCHIVES_DIR}{productImage@path}"/>
      <input type="hidden" name="productImage@old" value="{productImage@path}" /><br />
      <label class="acms-admin-form-checkbox">
        <input type="checkbox" name="productImage@edit" value="delete" />
        <i class="acms-admin-ico-checkbox"></i> 削除
      </label>
      <!-- END productImage@path:veil -->
      <input type="file" name="productImage" size="20" /><br />
      <input type="hidden" name="field[]" value="productImage" />
      <input type="hidden" name="productImage:extension" value="image" />
      <input type="hidden" name="productImage@size" value="300" />
      <input type="hidden" name="productImage@filename" value="" />
    </td>
  </tr>
</table>

保存できるか確認

では実際にサイトにログインして、「エントリー作成」ボタンを押して記事編集画面を出してみます。以下の画像のように、商品価格と商品画像というフィールドが追加されていると思います。 実際にデータを入力して記事を保存してみましょう。保存後、編集画面を再度開くと保存されている事が確認できると思います。

サイトに表示させる

編集画面ができましたので、作ったカスタムフィールドをサイトに表示させます。

エントリーのカスタムフィールドはEntry_Fieldモジュール、Category_EntryListやCategory_EntrySummary、Entry系モジュールのentry:loop内で使うことができます。 以下のコードでは Entry_Fieldモジュール を使い表示しています。

<!-- BEGIN_MODULE Entry_Field -->
<p>{price}</p>
<!-- END_MODULE Entry_Field -->

表示側のカスタマイズ

SFTPに接続し、/themes/site2015/include/module/entry/body.html の 40行目付近に追記します。

<h2 class="entryTitle"><a href="{titleUrl}">{title}[raw]</a></h2><!-- END_MODULE Touch_NotEntry -->
</header>
<!-- END title:veil -->

<!-- ここから追記 -->
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>商品価格</th>
    <td>
      {price}
    </td>
  </tr>
  <tr>
    <th>商品画像</th>
    <td>
      <!-- BEGIN productImage@path:veil -->
      <img src="%{ARCHIVES_DIR}{productImage@path}"/>
      <!-- END productImage@path:veil -->
    </td>
  </tr>
</table>
<!-- ここまで追記 -->

<!-- BEGIN entry:veil -->
<div class="acms-entry entryColumn">
  <div class="acms-grid-r">

カスタムフィールドの追加からサイトへの表示まで一通り行ってみました。HTMLのみで追加・表示できるので表現の幅が広がると思います。またコードのみで追加できるので、バージョン管理ツールなどで管理しやすくなるのもメリットです。

詳しいカスタムフィールドのドキュメントは以下よりご覧ください。

カスタムフィールドのドキュメントはこちら

a-blog cms awards 2020 の応募開始が本日4月1日より開始となりました。

2019年度（2019年4月〜2020年3月）に作成したサイトがあれば応募してみませんか？

お1人で複数の制作事例の応募可能です。あなたのご応募をお待ちしております！

なお、今年の参加特典には、スタンダードライセンスのバージョンアップ権利または1ユーザーライセンスをご用意しております。 現在スタンダードライセンスを使用中で、最新バージョンへのバージョンアップを検討しているサイトをお持ちの場合はぜひご検討ください。

応募条件

1. a-blog cms で作られたサイトであること
2. 今回提出されたコンテンツをa-blog cmsの今後の広報活動に利用することを承諾していること
3. 2019年度（2019年4月〜2020年3月）に制作されたサイトであること※リニューアル可
4. 個人利用のサイトはご応募いただけません

参加特典

・スタンダードライセンスのバージョンアップ権利または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ができました。

2. モジュールIDをテンプレートに反映させる

今の状態では、管理画面でモジュールIDを作成しただけで「モジュールを表示する」でテンプレートに記述したエントリーリストとは情報がひも付けられていません。モジュールIDの設定を反映するには、テンプレートにモジュールIDを記述する必要があります。

テンプレートに記述したエントリーリストのスニペットの冒頭に、id="newsList"と記入してください。

以下、記述例になります。

<!-- BEGIN_MODULE Entry_List id="newsList" -->

テンプレートを保存したら、サイトを確認しましょう。お知らせカテゴリーのエントリーのみが表示されるようになっています。

そのほかのビルトインモジュール

今回はエントリーリストを使って説明しましたが、ほかにもカテゴリーを表示する「カテゴリーリスト」や、ナビゲーションを表示する「ナビゲーション」などのビルトインモジュールが用意されているので、使用してみてください。

ビルトインモジュールのドキュメントは、以下のページになります。

ビルトインモジュールのドキュメントへ

また、今回は管理画面からスニペットをコピー&ペースとしましたが、ビルトインモジュールのスニペットはa-blog cms 制作者向け情報にも用意しています。

ビルトインモジュールのリファレンスへ