エントリー一覧のときに、タイトルと一緒に表示されるステータスを出力したくないときのカスタマイズ


エントリー一覧などでエントリータイトルと一緒に表示される【下書き】、【非公開】などのステータスの状況を出力しないようにする方法をご紹介します。

サイト全体に対応する方法

/private/config.system.default.yamlの900行〜908行目付近にあるステータスの設定をconfig.system.yamlに空の状態で記述すると、実現できます。

config.system.yamlの記述例

admin_entry_title_prefix_close :
admin_entry_title_prefix_draft :
admin_entry_title_prefix_secret :
admin_entry_title_prefix_trash :
admin_entry_title_prefix_pre_approval :
admin_entry_title_prefix_trash_approval :
admin_entry_title_prefix_awaiting :
admin_entry_title_prefix_start :
admin_entry_title_prefix_end :

ただし、上記の方法ではサイト全てが適用されてしまいます。個別に対応したい場合は、下記の対応を行ってください。

個別に対応する方法

エントリーサマリーやエントリーボディには{status}という変数が用意されているので、校正オプションと合わせれば個別に非表示にすることも可能です。

HTMLの記述例

<!-- BEGIN_IF [{status}/neq/open] -->
{title}[split('】', 1)]
<!-- ELSE -->
{title}
<!-- END_IF -->

{status}は英語でそれぞれのステータスの情報が表示される変数となっており、公開時にはステータスが出力されないため、公開時以外の時にsplitの校正オプションを使ってタイトルのみを表示しています。

インライン要素の挿入リンクをカスタマイズする

これはVer.2.7以前のテキストユニットをカスタマイズする方法です。Ver.2.8以降でテキストユニットをカスタマイズしたい場合はこちらの記事をご覧ください。

ユニットの右下には、「リンク挿入(aタグ)」、「強調1(em)」、「強調2(strong)」の3つリンクがデフォルトで用意されています。それぞれクリックするとインライン用のタグが挿入される仕組みになっているのですが、これらの項目はカスタマイズ次第で増やすことができます。

たとえば、smallタグを増やすことができます。



実装方法


systemフォルダの中にある、/ajax/emoji-edit.html をカスタマイズします。カスタマイズする際は、オリジナルのテーマの中にテンプレートをコピーしてください。

a-blog cms のバージョンをアップデートしたときに、systemフォルダ上書きしないために、管理画面のテンプレートをカスタマイズする際はオリジナルテーマにテンプレートを持ってきましょう

テンプレートの中身は以下のようになっています。

<span class="js-tag_insertion">
<!--<p> -->
  <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>-->
  <a href="#" class="emoji-trigger-tag" rel="em">強調1</a>
  <a href="#" class="emoji-trigger-tag" rel="strong">強調2</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>-->
<!--
  文字色
  <a href="#" class="emoji-trigger-text" rel="color-red"><span class="color-red">赤</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-blue"><span class="color-blue">青</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-yellow"><span class="color-yellow">黄</span></a>
  <br />
-->
<!--</p> -->
</span>

8行目に以下の記述追記します。

追加する記述

<a href="#" class="emoji-trigger-tag" rel="small">細則</a>
  1. rel="" には挿入したいHTMLの要素を指定してください。ここでは「small」としました。
  2. aタグの中には運営者がわかりやすいように日本語でラベルを記入してください。ここでは「細則」としました。

追記後

<span class="js-tag_insertion">
<!--<p> -->
  <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>-->
  <a href="#" class="emoji-trigger-tag" rel="em">強調1</a>
  <a href="#" class="emoji-trigger-tag" rel="strong">強調2</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>-->
  <a href="#" class="emoji-trigger-tag" rel="small">細則</a>
<!--
  文字色
  <a href="#" class="emoji-trigger-text" rel="color-red"><span class="color-red">赤</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-blue"><span class="color-blue">青</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-yellow"><span class="color-yellow">黄</span></a>
  <br />
-->
<!--</p> -->
</span>

マークダウンに対応するには

emoji-edit.htmlをカスタマイズすると、htmlでの挿入ができるようになるのですが、マークダウンでは対応しておりません。対応するには、/js/dispatch/edit/_emojiedit.js をカスマイズします。(※バージョンアップの際は上書きしないようにご注意ください)

圧縮されていますので、解凍します。Ver.2.5.1.2 では19行目から31行目に記述があります(他のバージョンでは行数が変わっている可能性がありますので、付近を探してください)ので、参考にして記述してください。

たとえば、以下のように追記します。

case "small":
  $(acms_textarea).selection("<small>" + txt + "</small>");
  break;

2行目の<small>と</small>と書かれている場所はマークダウンのときにテキストエリア内に表示される要素になります。たとえば、強調1の場合だと以下のようになっています。

case "em":
  $(acms_textarea).selection("*" + txt + "*");
  break;

Ver.2.11.29リリースのお知らせ


この記事では、2021年3月3日にリリースした Ver.2.11.29 の改善・修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver.2.11.29 のリリースノート

  • CMS-5542 標準jQueryを3.5.1 に変更
  • CMS-5546 多言語ユニットでメディアのキャプションなどが管理画面で保存したものが表示されない問題を修正
  • CMS-5548 developテーマのliの余白を調整
  • CMS-5553 ユーザーのCSVインポートで、違うブログでインポートした場合に、フィールドのデータが壊れる可能性がある問題を修正 & CSVインポートで他ブログのアイテムを更新できないように修正
  • CMS-5554 エントリーコード空の一覧ページのページネーションのリンク先に余分なスラッシュが入ってしまう問題を修正
  • CMS-5555 画像ユニットの「そのまま」の設定でレスポンシブで可変できていなかった問題を修正する
  • CMS-5556 静的書き出しで書き出し先がオフセットされている場合、acms.js のパスのクエリのオフセットが反映されていない問題を修正
  • CMS-5557 静的書き出しで書き出し先がオフセットされている場合、メディアユニットなどの data-src属性のパスが書き変わらない問題を修正
  • CMS-5551 環境によって管理画面のカテゴリ選択肢などがクライアントキャッシュされてしまい、更新にラグがある問題を修正
  • CMS-5545 テキスト置換に@が入るとエラーが起きる問題を修正
  • CMS-5543 ナビゲーションモジュール編集画面で、コピペでタブを入れてしまうとjsonが壊れて、正常に動作しない問題を修正
  • CMS-5550 ポップアップでのバナーモジュール編集でユニットがエンターキーで消えてしまう問題を修正
  • CMS-5540 カスタムユニットのフィールドグループでユニット複製して更新すると画像データが消える場合がある問題を修正
  • CMS-5549 ユーザー管理画面で子ブログも含めた表示にした時、チェックボックスの動作が不安定になる問題を修正

主なリリースノートの詳細な内容

CMS-5542 標準jQueryを3.5.1 に変更

セキュリティ対策のためjQueryをバージョンアップしました。

CMS-5555 画像ユニットの「そのまま」の設定でレスポンシブで可変できていなかった問題を修正する

「そのまま」の設定になっている画像ユニットが、画面幅を狭くした時にはみ出てしまう問題を解消しました。


画面幅が小さいと画像が画面からはみ出ていた問題


CMS-5551 環境によって管理画面のカテゴリ選択肢などがクライアントキャッシュされてしまい、更新にラグがある問題を修正

jsonをクライアントキャッシュするサーバー設定になっている場合に発生していた問題です。カテゴリー情報を変更した直後、エントリーの編集画面でカテゴリー選択肢を表示させるとカテゴリー情報の変更内容が反映されないことがありましたので修正しました。



最後に

この度はご迷惑をおかけしてしまい申し訳ございませんでした。該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。 また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいりますので、引き続き気づいた点がありましたらフィードバックいただけると幸いです。

ユニットを拡張して画像見出しユニットを作成する

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

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

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


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


2. ユニット設定の追加


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


3. テンプレートを調整

ユニットのカスタマイズには /themes/system/include/unit.html をカスタマイズすると、テキストユニットや画像ユニットをカスタマイズできます。(※ CMSのバージョンアップデート時に上書きしてしまう可能性があるため、このファイル自身を修正するのではなく、現在制作しているテーマの 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="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}" height="{y}"><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}/nem] -->
	<p class="caption">{caption}</p><!-- END_IF -->
</div><!-- END unit#image -->

画像見出しユニット

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

今回のカスタマイズのポイントは、ユニット追加ボタンのモードの設定で、標準のモード+アンダーバー+任意の文字 でモードを記述し、標準のモードを継承したユニットを作ることです。

下記に、デフォルトのモードを一覧にした表を用意いたしました。参考にしてください。

標準のモードリスト

textテキストユニット
tableテーブルユニット
image画像ユニット
fileファイルユニット
mapマップユニット
videoビデオユニット
eximage画像URLユニット
yolpYahoo地図ユニット
videoビデオユニット
mediaメディアユニット
quote引用ユニット
moduleモジュールユニット
break改ページユニット
customカスタムユニット

Ver.2.11.30とVer.2.11.31リリースのお知らせ


この記事では、2021年3月12日にリリースした Ver.2.11.30 とVer.2.11.31 の改善・修正内容について紹介いたします。 現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver.2.11.30のリリースノート

  • CMS-5561 管理画面・テーマのフォントのヒラギノを Pro から ProN に変更
  • CMS-5566 ナビゲーションモジュールで、ダブルクウォートが最後に入るデータがあると、編集画面が表示されなくなってしまう問題を修正
  • CMS-5567 カテゴリ管理ページで、2ページ以降のまま子カテゴリへ移動すると、エラーが発生する問題を修正
  • CMS-5477 gif画像がpngに変換されて保存される問題を修正
  • CMS-5559 js-datepicker2 で手動入力・コピペができるように修正
  • CMS-5560 バックアップ時にzip作成で、一時領域が少ないと処理が止まってしまうので、一時領域変更方法の文言を追加
  • CMS-5506 関連エントリで、エントリタイトルにタブが入っているとJSONが壊れて、正常に動作しない問題を修正

Ver.2.11.31のリリースノート

  • CMS-5599 ナビゲーションモジュールでデータ元のJSONが壊れ、表示されなくなる場合がある問題を修正

主なリリースノートの詳細な内容

CMS-5566 ナビゲーションモジュールで、ダブルクウォートが最後に入るデータがあると、編集画面が表示されなくなってしまう問題を修正

ナビゲーションモジュールで、ダブルクオートがデータの末尾に入っていると編集画面が下図のようになり、編集できなくなってしまう問題がありました。 この問題に対応するためVer.2.11.30のリリースを行いましたが、別途問題が発覚したためVer.2.11.31をリリースしました。

一連のナビゲーションモジュールに関する問題は Ver.2.11.31 で解決しております。 Ver.2.11.30をお使いの場合は、Ver.2.11.31へアップデートをお願いいたします。



CMS-5559 js-datepicker2 で手動入力・コピペができるように修正

エントリー記事作成などの際に使用されている組み込みJS flatpickrを使用の際に手動入力とコピペができるように改善を行いました。

CMS-5560 バックアップ時にzip作成で、一時領域が少ないと処理が止まってしまうので、一時領域変更方法の文言を追加

特定の共有サーバーを使用時に、一時領域に書き込める容量が少ないとバックアップに失敗する可能性があります。それを解決する方法を管理画面に追記しました。同じ問題が起こった場合は下記の方法をお試しください。

管理画面へ追加した内容

一時領域に書き込める容量が少ないとバックアップに失敗する可能性があります。その時は、config.server.php に下記のようなコードを書き、一時領域を変更ください。

putenv('TMPDIR=/path/to/tmp'); // ドキュメントルートより上の階層を設定ください


最後に

この度はご迷惑をおかけしてしまい申し訳ございませんでした。該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。 また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいりますので、引き続き気づいた点がありましたらフィードバックいただけると幸いです。