Home

新しくなったテキストユニットを拡張してみよう。

a-blog cms Ver.2.8.0 より新しくテキストエリアが生まれ変わります。今までは「リンク」や「強調」を挿入した際にHTMLタグが直接見えてしまう形になっていましたが、Ver.2.8.0より「リンク」や「強調」などが視覚的にわかりやすくなります。

このテキストエリアには、弊社が独自で開発したインライン専用のWYSIWYG、「Lite Editor」が導入されています。

カスタマイズ

a-blog cmsではデフォルトで、「リンク」「強調１」「強調２」のボタンが用意されていますが、カスタマイズして、新たにボタンを追加してみましょう。下記のように、ACMS.Ready内で、ACMS.Config.LiteEditorConf.btnOptionsに挿入したいボタンの設定をpushすることで、新たにボタンを追加することができます。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions.push({
        label: 'アンダーライン',
        tag: 'u',
        className: '',
        sampleText: 'アンダーライン'
    });
});

label	ボタンのラベルを設定できます。
tag	ボタンが押された際に挿入されるタグを設定できます。
className	挿入されたタグに対して付与できるクラスを設定できます。
sampleText	何もテキストが選択されていない場合に挿入されるデフォルトのテキストを設定できます。

課題

下記のようにエントリーのテキストエリアに「アンダーライン」「斜体」「赤色」の３つのボタンを追加してみましょう。

ヒント

赤色のボタンに関しては、自分で下記のようにスタイルも書いてあげる必要があります。

.red {
    color:red;
}

PCサイト表示とスマートフォン表示を行き来するボタンの設置

a-blog cms では、PC用とスマートフォン用のテーマをそれぞれ作成・適用できますが、スマートフォンでの表示の場合、スマートフォン用だけでなく、PC用の表示を見たいという場合があります。

ここでは、スマートフォン用テーマでの「PCモードに切り替える」ボタン、PC用テーマでの「スマートフォンモードに切り替える」ボタンの作成について解説します。

ヘテムルレンタルサーバーでPHP5.4でもionCube Loaderが利用可能になりました

ヘテムルレンタルサーバーでPHP5.4でもionCube Loaderが利用可能になりました。PHPのバージョンについては、PHPのご利用方法｜ヘテムルレンタルサーバーをご確認ください。

また、PHP5.4以前に作成されたMySQLは、パスワードの変更処理が必要になりますのでご注意ください。

なお、ヘテムルではPHP5.2 の提供は終了しており、PHP5.3 につきましてもPHP自体のサポートが2014年7月10日に終了します。今後のためにも、できるだけPHP5.4をご利用ください。

メールテンプレート

メールテンプレートにはフォームの項目で使用したカスタムフィールドの変数やグローバル変数などが記述されてします。
例えば /themes/site2015/contact/form/adminbody.txt では以下のような記述をしています。

{name} 様 よりお問い合わせがありました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

受付日時：%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}

■お問い合わせ情報

ご用件　　　　： {description}[raw]
お問い合わせ内容：
{inquiry}[raw]


■お客様情報

会社名　　　　： {company}[raw]
お名前　　　　： {name}[raw]
メールアドレス： {email}
お電話番号　　： {phone}
ご住所　　　　： 〒{zip}　{pref_code}　{address}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

site2015テーマのフォームのメールテンプレートはテキストファイルのためHTMLは記述していません。Ver.2.5よりHTMLメールにも対応となりましたので、HTMLメールをご利用になる際はVer.2.5以降のバージョンをお使いください。

また、校正オプションを記述することができます。校正オプションについてはリファレンスをご覧ください。例えばお問い合わせ内容のテキストを改行するには以下のような校正オプションを記述します。

{inquiry}[escape|nl2br]

新しいテンプレート機能を使ってみよう

Ver. 2.8.0 より新しいテンプレート機能が追加されました。その機能とは、テンプレートを継承できる仕組みになります。今までは、テンプレートをインクルードする事でテンプレートファイルを分割していましたが、この継承機能と組み合わせる事で、テーマをわかりやすく、管理しやすくできます。是非マスターしましょう！

テンプレート継承

初めに簡単な例を見てください。
ここでは、9:3のレイアウトを定義しているテンプレートを例にあげてみました。
ファイルの場所は、 themes/テーマ名/layout/main.html にしておきます。

※インクルードファイルはSimple2017を使用しています。別のテーマをお使いの場合は表示が崩れる場合がありますので、ご注意ください。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!--#include file="/include/head/meta.html" -->
	<!--#include file="/include/head/link.html" -->

	@section(head-js)
	<!--#include file="/include/head/js.html" -->
	@endsection
</head>
<body>

@section(header)
<!-- #include file="/include/body_start.html" -->
<!-- ヘッダー -->
<!--#include file="/include/header.html" -->
<!-- トピックパス -->
<!--#include file="/include/header/topicpath.html" -->
@endsection

<div class="acms-container">
	<!-- ※管理用パーツ -->
	<!--#include file="/admin/action.html"-->
	<div class="acms-grid">
		<main class="acms-col-lg-9 main">
			@section(main)
			<h2>メインのコンテンツ</h2>
			@endsection
		</main>
		<div class="acms-col-lg-3 sub">
			@section(sub)
			<h3>サブカラムのコンテンツ</h3>
			@endsection
		</div>
	</div>
</div>

@section(footer)
<!-- お問い合わせ -->
<!--#include file="/include/footer/suggest.html" -->
<!-- フッター -->
<!--#include file="/include/footer.html" -->
@endsection

</body>
</html>