テキストユニット

テキストユニットは、最も使われると思われる通常のテキスト「本文」をはじめ、様々な形式のテキストを登録するユニットです。

テキストユニットでは、プルダウンメニューから様々な種類のテキストを選択できます。管理ページから種類を追加もできますが、ここでは基本的な内容について説明します。

site2016の本文ユニットのプルダウンメニューを展開したところ

本文

p要素でマークアップされる本文テキストです。ユニット内で改行がされた場合は、br要素で改行されます。段落を追加する(次のp要素をマークアップする)場合は、もう一つテキストユニットを作成し「本文」を選択してください。

見出し

h要素でマークアップされる見出しテキストです。a-blog cmsに同梱されているテーマではエントリのタイトルをh1要素としているため、見出し大はh2としてマークアップされます。中、小は同じくh3、h4要素となります。

番号付きリスト

ol,li要素でマークアップされる番号付きのリストです。ユニット内の1行ごとにli要素としてマークアップされます。

記述リスト

dl,dt,dd要素でマークアップされる記述リストです。ユニット内の1行ごとにdtまたはdd要素としてマークアップされます。 dt要素としてマークアップする場合には、行の先頭に#を追加します。

テーブル

table,tr,th,td要素でマークアップされる記述リストです。ユニット内の1行ごとにtr要素としてマークアップされます。 1行中のテキストは「,」で区切ることでtf要素としてマークアップされます。 1行中の「,」で区切られたテキストをth要素としてマークアップする場合には、そのテキストの先頭に#を追加します。テーブル記述の詳細につきましては、a-blog cmsのマニュアルをご確認ください。

ソース

pre要素でマークアップされる整形済みテキストです。ラベルにもあるように、HTMLなどのソースコードをエントリ内に表示する場合に使用します。

引用

blockquote要素でマークアップされる引用テキストです。ユニット内のテキスト全体がblockquote要素としてマークアップされます。cite要素には対応していません。

自由入力

HTMLなどのソースコードがそのまま記述できるユニットです。ユニット内には自由に記述ができますが、ソースコードの記述に誤りがあった場合にはエントリの表示に影響を及ぼす場合がありますのでご注意ください。

マークダウン

マークダウン形式で情報の入力ができるユニットです。マークダウン記法の詳細につきましては、a-blog cmsのマニュアルをご確認ください。

WYSIWYG

WYSIWYG(ウィジウィグ)は、編集画面での見た目と表示画面での見た目が同じとなる技術で、a-blog cmsではTrumbowygというエディタを使用しています。Microsoft Wordなどの入力に近い感覚で、文字の装飾や画像の追加が行えます。

Trumbowyg を活用したWYSIWYGエディタ

配置

テキストユニットの配置には「おまかせ」「全体」があります。

おまかせ

該当するテキストの前で画像ユニットなどに「右」「左」といった配置指定が行われていた場合、該当するテキストを回り込み表示させます。

全体

該当するテキストを表示する前に、CSSによるfloatを解除します。その結果、回り込み表示することなく全幅でテキストが表示されます。

配置の「おまかせ」「全体」の表示例

Ver.2.8からのテキストユニットについて

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

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

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

また、デフォルトで用意されている「リンク」「強調」「重要」のボタングループを削除した上で、一からボタングループを設置する場合には以下のように、ACMS.Config.LiteEditorConf.btnOptions に直接、値を配列として代入してください。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions = [{
        label: '赤',
        tag: 'span',
        className: 'red',
        sampleText: '赤色のテキスト'
    },
    {
        label: '大',
        tag: 'span',
        className: 'big',
        sampleText: '大きいテキスト'
    }];
});

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

今まで通りのテキストユニットを使う方法

ただ、長く運営しているサイトでは互換性の都合上、以前のテキストユニットをそのまま利用したいというケースもあるかもしれません。その場合は下記のようにJavaScriptより、新しいテキストユニットの機能をOffにすることができます。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorFeature = false;
});