今回はElementの画面構成、Textの第二弾です。

  • リンクの挿入
  • 画像の挿入
  • テーブル

についてご紹介していきます。

リンク

入力した文字にリンクを貼ります。
下記のように「こちら」の部分にリンクを貼りたいとします。
「こちら」をドラッグした状態でエディターのリンクアイコンをクリックします。

下記のような表示がされるので、必要な箇所を記入します。

項目 説明
URL リンク先のURLを記入します。
Title マウスオーバー時に表示するタイトル
Open link in... Current window：今のタブで開く
New window：新しいタブに開く

文字にリンクを貼るのは以上です。
画像にリンクを貼りたい場合は、画像を選択した状態でリンクアイコンをクリックし、上記の手順を踏めばＯＫです。

画像

続いて画像を添付します。
画像アイコンをクリックします。

 こちらのウィンドウが表示されたら、赤枠のアイコンをクリックします。

Select Imagesというページが表示されるのでファイルを選択をクリックします。
そして自身のPCからアップロードする画像を選択します。

新しく画像が追加されたら画像を選択します。
画像を選択すると上部に「選択項目を削除」と「選択項目を追加」が表示されます。
文字の通り、削除する場合は「選択項目を削除」をクリックします。
画像を追加する場合は、「選択項目を追加」をクリックするか、画像をダブルクリックします。

すると下記の画面に戻ります。
必要な項目を記入してSaveしたら画像の挿入は完了です。

項目 説明
Source 選択した画像のソースが表示されています。
Alternative description alt属性に記載される部分です。
Width 画像の幅を指定します。
Height 画像の高さを指定します。

ちなみに画像の大きさはWidthとHeightの横にある鍵のアイコンが上記の状態だと、どちらかを指定した際に自動で入力してくれます。
しかしページに反映したときに画像が歪んでしまうことがあります。なので特別に指定の必要がない時は空白にしておくことを推奨します。

テーブル

続いてテーブルを作っていきます。

ツールバーからテーブルアイコンをクリックし、Tableにカーソルを合わせると表の大きさを指定する表が表示されます。
今回はまず2×2で作成していきます。

作成した表をクリックするとメニューが表示されます。
左から

  • テーブルプロパティ
  • テーブルを削除
  • 上に行を追加する
  • 下に行を追加する
  • 行を削除する
  • 左に列を追加する
  • 右に列を追加する
  • 列を削除する

テーブルプロパティ

ではテーブルのプロパティを見ていきます。
上記で表示されたテーブルプロパティを選択するか、テーブルを選択した状態でツールバーのテーブルアイコンをクリックし、テーブルプロパティをクリックします。

大項目 小項目 説明
General Width 表全体の幅
Height セルの高さ
Cell spacing セル同士の間を設定する。（デフォルトでCSSでborder-collapse: collapseを無効にしないと反映されません。）
Cell padding セル内のパディングを設定する。（デフォルトでCSSでpaddingを無効にしないと反映されません。）
Border width 枠線の太さ
Caption テーブルの見出し(デフォルトのCSSを無効にしないと反映されません。)
Alignment 表示する場所

 

大項目 小項目 説明
Advanced Border style 枠線のスタイル（こちらを参照してください。）
Border color 枠線の色
Background color テーブル内の色

下記表示例

Cell

ではセルについて見ていきます。
対象のテーブルをクリックし、ツールバーのテーブルアイコンのセルを選択します。
もしくは選択したセル内で右クリックをするとメニューが出るので、セルを選択してください。


まずはCell propertiesです。

大項目 中項目 小項目 説明
General Width   選択したセルの幅
Height   選択したセルの高さ
Cell type Cell 通常のセル
Header cell ヘッダーとして認識されるセル
Scope   th要素の範囲を指定する。
Horizontal align   水平方向の位置
Vertical align   垂直方向の位置

大項目 小項目 説明
Advanced Border width 枠線の太さ
Border style 枠線のスタイル（こちらを参照してください。）
Border color 枠線の色
Background color セル内の色

それぞれの設定は下記を参照してください。

次にセルをマージするには、マージしたいセルを全て選択し、右クリックで

Cell>Merge cells

を選択するとセルがマージされます。

マージしたセルを解除するには、マージされたセルを右クリックし、

Cell>Split cell

を選択すると解除されます。

Row

次にRowをみていきます。
対象場所で右クリックしてRowを選択します。

項目 説明
Insert row before 上に行を追加する
Insert row after 下に行を追加する
Delete row 行を削除する
Row properties 後述します
Cut row 選択した行を切り取る
Copy row 選択した行をコピーする
Paste row before コピーした行を上に貼り付けて追加する
Paste row after コピーした行を下に貼り付けて追加する

Rowのプロパティについて見ていきます。

大項目 中項目 小項目 説明
General Row type Header 指定した行が先頭に移動する
Body 指定した行が真ん中に移動する
Footer 指定した行が下部に移動する
Alignment   水平方向の位置
Height   垂直方向の位置

 

大項目 小項目 説明
Advanced Border style 枠線のスタイル（こちらを参照してください。）
Border color 枠線の色
Background color セル内の色

Column

最後にColumnをみていきます。
同じく対象場所で右クリックしてColumnを選択します。

項目 説明
Insert column before 左に列を追加する
Insert column after 右に列を追加する
Delete column 行を削除する
Cut column 選択した列を切り取る
Copy column 選択した列をコピーする
Paste column before コピーした列を左に貼り付けて追加する
Paste column after コピーした列を右に貼り付けて追加する

長くなってきたので、残りは次回に。
次回でテキストは最後です。