エントリーの作成

目次

自動保存機能を利用しない設定

a-blog cms では、記事を書いている途中にブラウザを閉じてしまっても自動保存機能で戻す事ができます。デフォルトの状態では利用する設定になっていますが、js/config.js の設定で利用しないように変更できます。

config.js の変更箇所

    //--------------
    // web storage
    webStorage          : 'on',
    webStorageType      : 'local', // local or session
    webStorageCapacity  : 'one', // one or limitless
    webStorageInterval  : 2000,

webStorage の設定を off にして下さい。

画像を使った見出しを入力できるようにする

標準の設定では、画像は画像ユニットを利用し、見出しはテキストユニットを利用します。ここでは、画像を見出しとして入力する「画像見出し」ユニットを用意する方法を説明します。

1. ユニット追加ボタンを設定

ユニットを追加する際に「画像見出し」を追加できるようにする必要がありますので、管理ページ > コンフィグ > 編集設定 の「ユニット追加ボタン」から以下のような設定を追加します。

モード拡張 image_h2
ラベル画像見出し

2. ユニット設定の追加

管理ページ > カスタマイズ管理 > コンフィグ > ユニット設定 を確認すると、各ユニットに「画像見出し」というボタンが増えているのがわかります。また、一番下に「画像見出し」というユニットが追加されていますので、そこに「画像見出し」をクリックして1つ画像見出しユニットを追加して保存してください。

3. テンプレートを調整

ユニットは /themes/system/include/unit.html をカスタマイズすると、テキストユニットや画像ユニットをカスタマイズする事ができます。このファイル自身を修正するのではなく、使用テーマディレクトリの include/unit.html にコピーして修正してください。
そこで、今回は画像ユニットを改良して、画像見出しユニットを作ります。同じような考え方で、オリジナルのテキストユニットを作る事もアイデア次第で可能です。

画像ユニット

<!-- BEGIN unit#image -->
<!-- 画像 -->
<div class="column-image-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<img class="columnImage" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}"><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN caption:veil -->
	<p class="caption">{caption}</p><!-- END caption:veil -->
</div><!-- END unit#image -->

画像見出しユニット

<!-- BEGIN unit#image_h2 -->
<!-- 画像見出し -->
<h2 id="h{utid}"><img src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}"></h2>
<!-- END unit#image_h2 -->

今回のカスタマイズでのポイントは、ユニット追加ボタンのモードの設定で、標準のモード＋アンダーバー＋任意の文字 でモードを書く事で、標準のモードを継承したかたちのユニットを作れる点になります。

以下にデフォルトのモードを表にしておきましたので、参考にして下さい。

標準のモードリスト

textテキストユニット
image画像ユニット
fileファイルユニット
mapマップユニット
youtubeYouTubeユニット
eximage画像URLユニット
break改ページユニット
yolpYahoo地図ユニット

画像ユニットで正方形画像をアップロードする

画像ユニットで正方形の画像を作成するためには、管理画面からの設定変更が必要になります。

管理ページ > コンフィグ> 編集設定 のページ内にイメージ編集「正方形画像の一辺サイズ」という項目があります。この値が0の場合は、正方形画像が生成されない設定になっています。画像ユニットによるアップロードで正方形画像を生成したい場合は、この値を0から任意のサイズに設定してください。
※数値を変更し、次にエントリーの画像を投稿すると正方形画像が生成されるようになりますが、過去に投稿されていた画像は正方形に生成されません。

モジュールで記述する場合は、{squarePath}、{squareX}、{squareY}の変数を使ってください。

例） Entry_Photoモジュールの場合

<!-- BEGIN_MODULE Entry_Photo -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<div style="width:{x}px; height:{y}px; overflow:hidden;">
<!-- BEGIN image:veil -->
<img src="%{ROOT_DIR}{squarePath}" width="{squareX}" height="{squareY}" style="left:{left}px; top:{top}px; position:relative;" /><!-- END image:veil -->
<!-- BEGIN noimage -->noimage<!-- END noimage -->
</div>
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Photo -->

サブカテゴリーを利用して複数のカテゴリーをエントリーに設定する

サブカテゴリーとは

a-blog cms は１エントリーにつき１カテゴリーというシングルカテゴリー方式でしたが、 Ver. 2.10 ではこの仕様を拡張し、メインカテゴリーの他に、複数のサブカテゴリーをエントリーに設定できるようになりました。 サブカテゴリーを使うと一つのエントリーを複数のカテゴリーページで表示することができます。

例えば以下のエントリーがあったとします。

エントリーコード entry-123.html
メインカテゴリー 記事（カテゴリーコード: article） 
サブカテゴリー お知らせ（カテゴリーコード: news）製品（カテゴリーコード: products）

この場合、このエントリーを以下の一覧ページで表示させることができるようになります。

  • https://example.com/article/
  • https://example.com/news/
  • https://example.com/products/

ただし詳細ページでは、メインカテゴリーのみを使ったURLで表示されます。

https://example.com/article/entry-123.html

使い方

機能の有効化

サブカテゴリー機能を有効化するには 管理ページ > コンフィグ > 編集設定 に移動し、「エントリー項目設定」の「サブカテゴリー」にチェックをつけます。

エントリー編集画面

さっそく、エントリーの編集画面をみてみましょう。機能を有効化することでカテゴリーの下に「サブカテゴリー」入力欄が増えています。タグ入力のように複数のカテゴリーを同時に登録できるUIになっています。

サブカテゴリー選択画面