HTML TAG 入力支援

カスタム検索

HELP > 機能詳細 > コンテンツHTMLの作成 > HTML TAG 入力支援

HTML TAG 入力支援

基本機能オブジェクトの操作オブジェクトのプロパティコンテンツHTMLの作成電脳卸データのアップデート商品データの絞込み商品ページ作成

コンテンツの内容コンテンツ編集キー操作 HTML TAG 入力支援

コンテンツＨＴＭＬ編集Ｗｉｎｄｏｗでは、いくつかのタグの入力を支援する機能があります。

画像の登録に関しては、以降の章で扱いますので、ここではそれ以外のタグの入力支援機能について記載します。

入力支援ボタン

↓はツリー上でコンテンツを選択して表示される、コンテンツ HTML 編集 Window です。

電脳卸CBWeb コンテンツHTML編集Window

この Window の左側には、下の各ボタンが並んでいます。

全般
改行・配置
フォント
文字タイプ
意味付き文字列
テーブル
リンク
画像
変換

それぞれのボタンをクリックすると、入力できるタグのリストが表示されます。

例えば文字タイプでは

たとえば、文字タイプボタンをクリックすると、下のWindowが表示されます。

電脳卸CBWeb タグ入力支援文字タイプで表示されるボタン

ここには、テキストのタイプを指定するためのタグが並んでいて、
<b>,<i>,<u>,<s>,<sup>.<sub> の各タグを選択できるようになっています。

１つのタグを選択すると、対応したタグが入力されます。

たとえば、<b> - </b> を選択した場合には、テキストをBOLD (太い文字)で表示するためのタグ <b></b> が入力されます。

文字列が選択されている場合には、<b>文字列</b> のように、選択された文字列を囲むようにタグが入力されます。

特殊な入力支援

これらのボタンの中には、選択するとさらにダイアログが表示されるものや、入力されているテキストを変換する機能のボタンがあります。

全般 - SPAN

全般-<span>-</span>

を選択すると、SPAN タグのクラスを選択するためのダイアログが開きます。

このダイアログでは、テンプレートに登録してある SPAN に使用できるクラスが選択できます。

電脳卸CBWeb CSSクラスを選択するコンボ

CSSクラス選択のコンボボックス ▼ ボタンを押してCSSのクラスを選択を変更します。

CSSクラスを選択すると、ダイアログ上でプレビューが表示されます。
文字列が選択されている場合には、その文字列が ”テスト文字列” として表示されます。

クラスが選択できたら、OK を押すと、<span class="指定クラス">文字列</span> のように、クラス指定付きでタグが出力されます。

全般 - DIV

DIV の場合にも、SPAN タグ ↑ と同様に動作をします。

出力されるタグは <div class="指定クラス">文字列</div> となります。

リスト - UL

リスト - UL を実行する場合は、先にリストに記述する項目を記述しておきます。

たとえば、

リスト１
リスト２
リスト３

のようにコンテンツHTML編集Windowに記述して、
その３行を選択してからリスト - UL を実行します。

すると、↓のようなリストスタイルを設定するダイアログが開きます。

電脳卸CBWeb リストタイプ設定ダイアログ UL版

HTML TAGで指定で指定する場合
リストのマーカーを ● ○ □ マーカー無しから選択できます。

Styke で指定で指定する場合も同様に、
リストのマーカーを ● ○ □ マーカー無しから選択できます。

CSS クラスを選択すると、
ULタグをさらに <div class="指定クラス"></div> で囲んだ形式で出力されます。

いずれの場合も、ダイアログ上の右側にプレビューが表示されるので、プレビューを見ながら設定してください。

設定ができたら、OK ボタンを押します。

<ul type="disc">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

選択していた文字列が、改行している所で区切られて↑のようなタグがコンテンツHTML編集Windowに出力されます。

リスト - OL

指定できるリストのタイプが UL タグと異なりますが、
OL の場合にも、UL タグ ↑ と同様に動作をします。

テーブル - TABLE

テーブルタグの作成は面倒な作業なので、できるだけ素早く作成できるように考えてダイアログを用意してみました。

テーブル - <table>-</table> を実行すると、
↓のようなテーブルタグを作成するためのダイアログが表示されます。

ダイアログの下部分にプレビューが表示されるので、確認しながらテーブルを作成できます。

各コントロールの用途は↓の通りです。

	テーブルの横のセル数
	テーブルの縦のセル数
	□の部分をクリックすると縦に並ぶセルが結合します。
	□の部分をクリックすると横に並ぶセルが結合します。
	TD が設定されているセルで、クリックで選択できます。
	TH が設定されているセルで、クリックで選択できます。
	選択されているセルを TH あるいは TD に設定するボタン（TD）
	選択されているセルを TH あるいは TD に設定するボタン（TH）
	選択しているセルの結合を解除します。
	テーブルのCSSクラスを設定します。

これらのコントロールを使って、セル数、セルの結合、TD,TH、CSSのクラスの各値を設定していきます。

設定ができたら、OK ボタンを押してください。
コンテンツHTML編集Window に作成したテーブルタグが出力されます。

リンク - A HREF

リンク - <a href="">-</a> は、
ホームページへのハイパーリンクタグを作成します。

リンク - <a href="">-</a> を実行すると ↓ のようなダイアログが表示されます。

URL	リンク先のURLを指定します。例えば、 http://dno-cbweb.oissu.net のようにURLを入力します。
ターゲット	表示するブラウザの対象を設定します。 self （リンク先を現在のブラウザで表示） blank（リンク先を新しいブラウザで表示）指定無しのいずれかを選択します。
出力TAG	出力されるタグのサンプル

URL を入力して、ターゲットを選択し、 OK ボタンを押すと、コンテンツHTML編集ダイアログにリンクタグが出力されます。

画像 - IMG SRC

画像のタグ入力に関しては、画像の登録の章で記述します。

変換

HTML には、そのままでは表示できない文字がいくつかあります。

例えば、半角文字の不等号 ”<” という記号は、HTMLでは < と記述しなければ表示できません。

< なんて打ち込むのは面倒なので ”<” と打ち込んでおいて選択してから、
変換を使って < へ置換します。

変換で置き換えられる記号は↓の通りです。

< >	変換-< > -> < > を実行します。
SPACE	変換-space ->   を実行します。複数のスペースを並べて表示したい場合など。
"	変換-" -> " を実行します。
&	変換-& -> & を実行します。
¥	変換-¥ -> ¥ を実行します。

各機能を実行すると、コンテンツHTML編集Windowの選択範囲文字列が変換されて、
& を含むコードに置き換わります。

新しいブラウザでは、変換しなくても表示できるものも多いですが。。。。

DNO-CBWeb HOME PAGE