HOME > ガイド > ブロックガイド > 基本ブロック / 表組

基本ブロック / 表組,HTML


表組みブロック

表組みブロックを表示するブロックです。 入力したデータはTableタグに変換されて公開されます。

<table class="cms-table default w100p">
	<colgroup>
		<col width="20%">
		<col width="*">
		<col width="*">
		<col width="*">
		<col width="*">
	</colgroup>
	<tbody>
	<tr>
		<th>項目名</th>
		<th>項目名</th>
	</tr>
	<tr>
		<th>項目名</th>
		<td>サンプルの文書ですので、ご注意ください<br> <a href='http://www.google.co.jp'><i class='fa fa-caret-right '></i> リンク</a> </td>
	</tr>
	<tr>
		<th>項目名</th>
		<td>サンプルの文書ですので、ご注意ください</td>
	</tr>
	<tr>
		<th>項目名</th>
		<td>サンプルの文書ですので、ご注意ください</td>
	</tr>
	</tbody>
</table>

データ入力

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

見出しも入力できます。

詳細編集画面

基本設定

チェックをいれると、それぞれの行や列を見出し<TH>タグにすることができます。

情報量の多い表組みを、狭い画面のスマホで閲覧しても、レイアウトが崩れることなく表示させることができます。スマホ閲覧時のみ、表組み部分のみ横にスワイプできるようにします。

テーブルデータ

データ一覧をグリッド編集機能で編集できます。

公開 チェックしている行を公開します。
1〜15 テキストを入力できます。簡単なタグが入力でき、改行は自動で<BR>に変換されます。

列(縦方向のセル)設定

幅リスト 列のセル <col> ごとの幅属性 ( width= ) を,(カンマ区切り)で入力します。無指定の場合は * (アスタリスク)です。例:[ 20%,20%,*,* ]
属性リスト 列のセル <col> ごとの属性を , (カンマ区切り)で入力します。無指定の場合は * (アスタリスク)です。例:[style="width:20%",style="width:20%";,*,* ]

グリッド編集詳細

HTMLブロック

HTML,JS,CSSを入力するブロックで、入力内容をそのまま公開します。

<b>
HTML
</b>
<style></style>
<script></script>

データ入力

HTMLを入力してください。

直接HTML,JS,CSSを入力できるので、汎用的に利用できます。

  • YouTubeやGoogleMapなどの、埋め込みコード用
  • ブロックでは実現できない場合に、HTMLを直接記述
  • ブロックを使うのが面倒な場合に、HTMLを直接記述
  • CSSやJavaScriptを直接記述

無理にブロックを組み合わせてつくるより、HTMLを直接記述したほうが手軽な場合もあるので、HTMLブロックと、そのほかのブロックをうまく使い分けてください。

プレビューについて

デフォルトでは、「プレビューする」にチェックは入っておらず、ページ編集時には、コードの評価(JS実行や、HTMLの表示)は行いません。
「プレビューする」にチェックをいれれば、コードの評価(JS実行や、HTMLの表示)を行いますが、以下の問題点があります。

「プレビューする」チェック時に気をつけること

JavaScriptを含んだコードの場合は、ページ編集時にも実行される関係で、表示が重くなる場合があるためです。
その他、例えば、YouTubeの埋め込みコードを記述し、プレビューした場合は、編集毎にYouTubeのプレビュー処理が発生し、編集しにくい状況になります。

HTMLやCSSの場合は、このような問題は発生しないので、「プレビューする」にしても問題ありませんが、JavaScriptの場合は、このような問題が発生する可能性があるので、注意してください。

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

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

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