モジュールオプションを無効化する

このテーマには、詳細なモジュールオプション機能が実装されています。

モジュールの外観のカスタマイズ | はじめての方へ | 解説資料 | echo_zeroデモサイト

しかし、この機能が必要とされない状況があります(このテーマの性格上、その方が多いと思われます)。

  • デザインに注力しており、すべてのモジュールを詳細にマークアップしたい場合
  • プロトタイプの制作中のみ利用し、コーディング着手以降は個別マークアップとしたい場合
  • クライアントに外観を変更させたくない場合

ここでは、モジュールオプション機能を無効化する方法を解説します。

モジュールオプションを使用できないようにする

「echo_zero」のテーマ内の、以下のファイルをエディタで開いてください。

/admin/module/field.html

ファイルの内容をすべて空にして更新すると、以降はモジュールオプションが表示されなくなり、モジュールを更新すると見出しなどの設定がすべて破棄されます(a-blog cms本来の、条件設定・表示設定には影響しません)。

一部の機能だけ使用したくないという場合は、以下のファイルのカスタムフィールドを編集してください、

/admin/module/field_header.html
/admin/module/field_link.html
/admin/module/field_extra.html

各モジュールを、モジュールオプションから切り離す

さらに、一部のモジュールだけ独自にマークアップしていきたいという場合は、以下の手順で作業してください。
a-blog cmsのカスタマイズに慣れている方は、まとめに進んでください。

該当するテンプレートを探す

編集したいモジュールの「モジュールID」を確認してください。たとえばトップページの、ブログの新着を表示しているモジュールのIDは「summary_top_recent_02」です。

このモジュールを表示しているテンプレートは、「echo_zero」テーマ内の以下の場所にあります。エディタで開いてください。

/include/module/(モジュールID).html

セクションの開始部分を差し替える

ファイルを以下の通り置換してください。以降はこのテーマで基本としているマークアップです。オリジナルのコードに変更する場合はこの限りではありません。

置換前
<!--#include file="/include/module/section_first.html"-->
置換後
<div class="section">

セクションの終了部分を差し替える

ファイルを以下の通り置換してください。

置換前
<!--#include file="/include/module/section_last.html"-->
置換後
</div><!-- /.section -->

見出し部分を差し替える

ファイルを以下の通り置換してください。ヘッダが必要ない場合はインクルードを削除するだけで構いません。

置換前
<!--#include file="/include/module/section_header.html"-->
置換後
<div class="section-header">
	<h2 class="section-title">見出しです</h2>
	<p class="section-subtitle">サブタイトルです</p>
	<p class="section-caption">キャプションです</p>
</div><!-- /.section-header -->

フッタのリンクボタンを差し替える

ファイルを以下の通り置換してください。フッタが必要ない場合はインクルードを削除するだけで構いません。

置換前
<!--#include file="/include/module/section_footer.html"-->
置換後
<div class="section-footer">
	<p class="section-link"><a href="リンク先のURL" class="btn btn-block btn-lg btn-first-outline">ボタンのテキスト</a></p>
</div><!-- /.section-footer -->

まとめ

上記の修正をまとめると、以下の通りとなります(summary_top_recent_02の場合)。

<!-- BEGIN_MODULE Entry_Summary id="summary_top_recent_02" -->
<div class="section">
	<div class="container">
	<!-- BEGIN module_setting --><div><!-- END module_setting -->
		<!--#include file="/admin/module/setting.html"-->

		<div class="section-header">
			<h2 class="section-title">見出しです</h2>
			<p class="section-subtitle">サブタイトルです</p>
			<p class="section-caption">キャプションです</p>
		</div><!-- /.section-header -->

		<!--#include file="/include/module_loop/summary_blog.html"-->

		<div class="section-footer">
			<p class="section-link"><a href="リンク先のURL" class="btn btn-block btn-lg btn-first-outline">ボタンのテキスト</a></p>
		</div><!-- /.section-footer -->
	<!-- BEGIN module_setting --></div><!-- END module_setting -->
	</div><!-- /.container -->
</div><!-- /.section -->
<!-- END_MODULE Entry_Summary -->

余談ですが、トップページ用のモジュールのみ、ログインしているときにdiv要素がひとつ多く包括されます。セクションを幅100%としているときは、.cotainer内にdiv要素がないと、a-blog cmsのモジュール編集ボックスが画面いっぱいに伸びきってしまうためです。