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

Entry_Bodyの前後リンク部分の変数表をみるとeidが追加されています

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

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

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のみで追加・表示できるので表現の幅が広がると思います。またコードのみで追加できるので、バージョン管理ツールなどで管理しやすくなるのもメリットです。

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

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

Ver. 2.11.38 をダウンロード

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 2020 | a-blog cms

a-blog cms

a-blog cms awardsは、a-blog cms で制作されたサイトの事例をあつめて、よりよいサイトをみつけるための企画です。募集期間 2020年4月1日〜2020年4月17日まで。

a-blog cms awards とは？

a-blog cms awardsは、a-blog cms で制作されたサイトの事例をあつめて、よりよいサイトをみつけるための企画です。応募条件はa-blog cmsで制作されたサイトであること。選ばれたサイトから各分野の賞を贈り、その中からさらに優れたものを決めます。さらに優れたものには豪華景品を贈呈します。 2019年から始まり、今回で2回目の開催となります。

多くのサイトからのご応募をお待ちしておりますので、お気軽にご応募くださいね！

Ver. 2.11.37 をダウンロード

前後リンクでeidを表示できるようになりました