HOME > ガイド > ブロックガイド > 基本ブロック / テキスト

基本ブロック / テキスト


フリーテキストブロック

マークダウン記法を使用して、タイトルや、見出し、文書やリストなどをまとめて記述し公開できるブロックです。
とても便利なブロックなので、ぜひ使い方をおぼえてください。

<div class="cms-markdown default ">
 	<h1>タイトル</h1>
 	<h2>大見出し</h2>
 	<p>文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。</p>
 	<h3>中見出し</h3>
 	<p>文書が入ります。文書が入ります。文書が入ります。文書が入ります。</p>
 	<h4>小見出し</h4>
 	<p>文書が入ります。文書が入ります。文書が入ります。</p>
 	<ul>
 	 	<li>項目1</li>
 	 	<li>項目2</li>
 	 	<li>項目3</li>
 	</ul>
</div>

データ入力

マークダウン記法でテキストを入力してください。

HTMLタグも利用できます。

マークダウン記法

マークダウン記法はとてもシンプルです。
テキストの先頭に#を入力すれば、タイトルタグに変換され、##の場合は大見出し、###の場合は中見出しというように、#の数により、見出しのレベルを指定することができます。

その他にリストも入力することができます。

なお、画像や表組みなどもマークダウンで入力できますが、記法が複雑になってくるので、画像ブロックや表組みブロックなどを利用したほうが、シンプルに記述できます。

マークダウン記法は、ネットにいろいろ乗っているので、そちらも参考にしてください。
Googleで検索する

見出しブロック

見出しを表示するブロックで、入力したテキストは、H1やH2といったタイトル、見出しタグに変換されて公開されます。
見出しブロックは、とても使用頻度の高いブロックです。HTMLタグも利用可能です。

<h1 class="cms-h default ">
	<em>h1</em> <small>headline1</small>
</h1>

データ入力

見出しテキストを入力できます。
見出し内では、HTMLタグも利用できます。
プリセットCSSでは、EMタグやsmallタグに対して、装飾が加えられています。

見出しレベルの変更

見出しブロックの、見出しレベルは、H1からH6まで、自由に切り替えられます。

サブテキスト・リンク設定

見出しテキスト以外にも、サブテキストや、リンク設定がおこなえます。

文書ブロック

文書を表示するブロックで、入力したテキストは、Pタグに変換されて公開されます。
主に、見出し以外の本文で使用する、とても使用頻度の高いブロックです。HTMLタグも利用可能です。

<p class="cms-p default ">
	<b>サンプルのタイトル</b><br>
	文書が入ります。<b style="color:red">赤文字や</b>、<i class='fa fa-caret-right '></i> <a href='http://www.yahoo.co.jp'>リンク</a> もはれます。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。<br>
	<small>※注釈の文書が入ります。注釈の文書が入ります。</small>
</p>

データ入力

テキストを入力してください。

HTMLタグも利用できます。

HTML入力について注意

文書ブロックでは、とくに制限なくHTMLを入力できますが、基本的には、文書装飾タグなど基本的なタグを利用してください。
複雑なHTMLや、CSS、JSなどについては、HTMLブロックを使用してください。
(文書ブロックは、Pタグでラップされますが、HTMLブロックは、そのまま出力されます)

リストブロック

入力したデータはリストタグとして公開されます。

<div class="cms-ul clearfix default">
	<ul>
		<li>サンプルの文書ですので、ご注意ください。サンプルの文書ですので、ご注意ください。</li>
		<li>サンプルの文書ですので、ご注意ください。サンプルの文書ですので、ご注意ください。サンプルの文書ですので、ご注意ください。サンプルの文書ですので、ご注意ください。</li>
		<li>ご注意ください。サンプルの文書ですので、ご注意ください。</li>
	</ul>
</div>

データ入力

「データの編集」ボタンをクリックすると、編集画面が表示されます。

見出しも入力できます。

詳細編集画面

公開 チェックしている行を公開します。
テキスト リストのテキストを入力できます。簡単なタグが入力でき、改行は自動で<BR>に変換されます。
追加リンク ボタンを設定できます。設定した場合は、テキストの下にボタンが表示されます。

引用ブロック

引用文書を表示するブロックで、入力したテキ ストは、Blockquoteタグに変換されて公開されます。

<blockquote class="cms-bq default">
	文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。文書が入ります。<br>
	<small>文書が入ります。文書が入ります。文書が入ります。</small>
</blockquote>

データ入力

テキストを入力してください。

HTMLタグも利用できます。

コードブロック

プログラムコードを表示するブロックで、入力したテキ ストは、Codeタグに変換されて公開されます。

<div class="cms-code default ">
	<code>var s = "hello world!";</code>
</div>

データ入力

プログラムコードを入力してください。

HTMLによる装飾はできません。
そのまま、出力されます。

質問・問い合わせなどについて

不具合や不明点などあれば、ページ右下のチャットで聞いてもらうか、
開発者のピクセルイメージ田中 ( tanaka@pixelimage.jp ) にメール下さい。
CMSには未反映の不具合と対処方などもあるので、お気軽に質問いただければと思います。

使用した感想などあれば、TwitterやFacebookなどでシェアしてもらえるとうれしいです!
あと、JS CMS開発者日記のサイトもはじめました。こっちはユルめのサイトです。
ピクセルイメージ | JS CMSの導入、カスタマイズの依頼は...