コンテンツを入力する

文章を入力する。

ツリーでコンテンツを選択すると、CBWeb の右下のエリアは下のような画面に切り替わりいます。

この、エリアでコンテンツの文章(HTML)入力を行います。
では、文章を入力してみましょう。

ここでは、”CBWeb を使用する上でいくつか注意点があります。” と入力してみました。


文章を入力したら、プレビューを見てみましょう。
[ 更新 ] ボタンを押してください。
CBWeb 右上の画面に 今入力した文章が埋め込まれたホームページが表示されます。

表示は、選択したテンプレートによって異なります。

TOP

画像を入れる。

CBWeb は、ユーザー画像を1箇所で管理します。
コンテンツに画像を挿入するには、既定のフォルダに画像を保存してから行います。

TOP

画像を配置する

CBWebでは、すべてのユーザー画像を1箇にまとめておきます。
コンテンツ編集エリアの [ 画像 ] ボタンをクリックしてください。

画像を選択するためのダイアログが表示されます。

初期時には、ディレクトリツリーに何も表示されませんので、これから今作っているサイト用の画像保存フォルダと、必要な画像を用意します。
先ず、[ フォルダを開く ] ボタンをクリックして保存フォルダを開きます。


保存フォルダが開きますので、ここにフォルダを作成し、画像ファイルを配置してください。
名前は自由ですが、英数小文字等のサーバー上のフォルダ名として一般的な文字を使用してください。

TOP

画像を挿入する

画像を用意したらコンテンツに挿入してみましょう。

先ほどと同様に、コンテンツ内容編集エリアの [ 画像 ] ボタンをクリックして、画像選択ダイアログを表示します。

下の画像選択ダイアログは、 user_image フォルダの下に cbweb フォルダを作成し、WindowsXP のサンプルイメージを4つ配置した場合の表示です。

画像の挿入方法には、画像の扱いによって3種類を用意しています。
通常は、画像を選択して、そのまま画像の [ 挿入 ] ボタンを押してもらえば挿入できます。

では、Winter.jpg をコンテンツに挿入してみましょう。

1.Winter.jpg を選択します。

2.このままでは大きすぎるので、拡大縮小エリアで 幅=400 に設定します。

3.画像の [ 挿入 ] ボタンを押します。

これで、画像 Winter が 400 の幅に修正されて ページに埋め込まれます。
[ 更新 ] ボタンを押してプレビューを確認してください。

TOP
画像の扱い別 挿入手順

画像挿入の手順
1.挿入したい画像を選択
2.必要ならば 拡大縮小で大きさを指定。
3.画像の[ 挿入 ] ボタンを押す。


サムネイル画像挿入の手順
1.挿入したい画像を選択
2.サムネイルの大きさを拡大縮小のエリアで入力
3.サムネイルリンクの [ 挿入 ] ボタンを押す。


画像リンク(リンク先が外部URLの画像) 挿入手順
1.挿入したい画像を選択
2.必要ならば拡大縮小で大きさを指定。
3.URL に リンク先アドレスを入力。
4.画像リンクの [ 挿入 ] ボタンを押す。


TOP

HTMLタグを入力する

CBWeb version 1.0 には、画像挿入機能以外に、いくつかの HTMLタグ入力支援ボタンが付いています。

では、上で入力したコンテンツへ <br />タグを追加してみましょう。

コンテンツの <br />タグを入力する位置をクリックしてカーソルを移動します。

次に、[ <br /> ] ボタンを押します。

コンテンツ文章に <br /> が追加されました。

[ 更新 ] ボタンを押して、プレビューを見てみてください。
画像の前で改行されて、下のようなプレビューが表示されます。

<br /> ボタン以外は、範囲の選択が必要になりますが、使い方は似たようなものです。
下に、現在用意しているタグ支援機能一覧を掲載しておきます。
(随時追加するかもしれません。。。)

<br />カーソル位置にBRタグを入力します。
<p>選択範囲をPタグで囲みます。
<em>選択範囲をEMタグで囲みます。
<font color>選択範囲を色を指定して FONT COLOR= タグで囲みます。
<a href=>選択範囲を a href= タグで囲みます。
<ul>選択範囲を全体を UL タグで囲み、改行毎に LI タグで囲みます。
<ol>上記と同様ですが、リストタイプを指定してから実行します。
<blockquote>選択範囲を BLOCKQUOTEタグで囲みます。
<pre><code>選択範囲を PRE & CODE の両タグで囲みます。
<:&lt >:&gt選択範囲の <を&ltへ、>を&gtへ 置き換えます。
TOP