テーブル(表)-SIRIUS2

テーブル(表)

SIRIUS2の表作成機能についての詳細ページ。

アイキャッチ画像

ページ内に見栄えのいいテーブル(表)を簡単に作れます。


テーブル設定

テーブル(表)を作成するには記事装飾メニューの【テーブル】をクリックします。

 

アイキャッチ画像

 

下のような設定画面が表示されるので、ここで大枠を決めていきます。

(毎回、下のような設定で起動するとは限りません)

 

キャプチャ画像

キャプチャ画像

①基本設定

列数』は縦軸のセルの数、『行数』は横軸のセルの数。

数字を変更してみればどっちがどっちかすぐわかります。

(あとからも変更可)

②ヘッダー

1行目をヘッダーにする』→1目(から右方向)をヘッダー(thタグ)として処理します。

(デフォルトではグレーの背景がつく)

1列目をヘッダーにする』→1目(から下方向)をヘッダー(thタグ)として処理します。

(デフォルトではグレーの背景がつく)

サイト管理人

筆者

 

「ヘッダー」とは”ブロックの上部にあるもの”という意味で、テーブル(表)では見出し的な意味合いと考えればよろしいかと。

③デザイン設定

デザイン』→予めデザイン済みのレイアウトがいくつか用意されてます。

デザインの一覧はこちら

カラー』→テーブルのカラーを15色から選択できます。

(デフォルトではグレーが選択)

行揃え』→ヘッダー以外のセルを「左揃え・中央合わせ・右揃え」にできます。

(※個別に設定もできます)

淡色』→対応しているデザインのみですが、”カラー”を淡い色合いに変更できます。

角丸』→対応しているデザインのみですが、テーブルの端部を角丸にできます。

④オプション

横幅100%』→チェックを入れればテーブル(表)の横幅を常に100%(コンテンツ表示幅)で表示します。

チェックなしならテーブル(表)内のコンテンツ量に合わせた横幅になります。

また横幅が100%を超える場合はスクロール表示されます

サイト管理人

筆者

 

と公式サイトには書いてあるんですが、セルに大量のテキストをぶち込んで横幅100%のチェックを外してもスクロール表示にならないので、イマイチ違いがわかっておりません。

 

文字サイズ小』→チェックを入れると通常サイズよりも一回り小さい文字で表示してくれます。

1列目を25%幅にする』→【ヘッダー】の『1列目をヘッダーにする』にチェックが入っていてなおかつここにもチェックを入れればの列幅を常に25%に固定することができます。

行の背景色を分ける』→対応しているデザインのみですが、セルの位置関係が見やすくなるよう1行おきに背景色を変えてくれます。

ヘッダー列の固定』→【ヘッダー】の『1列目をヘッダーにする』にチェックが入っていてなおかつここにもチェックを入れれば、テーブル(表)が横スクロールされる際に1列目が固定表示されるようになります。

⑤デザインモードで編集

ここをクリックするとテーブルのデータ編集画面がデザインモードで立ち上がります。

サイト管理人

筆者

 

テーブルのデータ編集に際しては(HTML編集に慣れた方でも)レイアウト等を確認しながら編集できるデザインモードが便利です。

ここまでの設定はいつでも変更可能なので、列数と行数だけとりあえず決めちゃって「OK」をクリックしても問題ありません。

 

「OK」をクリックせずにそのままデータの編集に進みたければ、⑤「デザインモードで編集」をクリックします。

(編集機能についてはこのあとの『データ編集』にてご紹介します)

 

すぐにデータ編集に進まずいったん設定を保存したい場合は設定終了後に「OK」をクリックします。

すると記事編集画面内に空のHTMLテーブルタグが挿入されます。

 

キャプチャ画像

 

テーブルの再表示(再編集)

テーブル設定画面の再表示の仕方ですが、2通りあります。

 

キャプチャ画像

 

  • A:青枠(テーブルタグの最初から最後まで)を全選択して記事装飾メニューの「テーブル」アイコンをクリックする
  • B:赤矢印で示したアンダーラインの付いてる部分(ここでは”<table>”)をダブルクリックする

これ何度かやってみたんですが、”テーブル設定画面”が開くこともあればデザインモードでの”データ編集画面”が表示されることもあります。

 

現時点ではそのルールがよくわかってないのでこういう言い方しかできません。

そのためもしもAで違った画面が開いたらBでやり直してみてください。

 

行数・列数に関しては、一度記事編集画面内にコードを出力してしまうとそのあと設定画面を出してもグレー表示になって変更不可みたいです。

 

しかしながら行数・列数の変更はデータ編集画面上で行えるのでご安心を。

データ編集

ここではデザインモード上でのテーブル(表)の編集方法をご紹介します。

 

こちらがサンプルデータを入れた画面です。

(最上段はヘッダー扱いにしてます)

 

キャプチャ画像

 

セル上でクリックするといろいろなコマンドが出てきます。

 

行の挿入

選択したセルの上や下に空の行を挿入します。

 

キャプチャ画像

 

行の削除」を使用すると選択したセル行全体が削除されます。

 

列の挿入

選択したセルの左側や右側に空の列を挿入します。

 

キャプチャ画像

 

列の削除」を使用すると選択したセル列全体が削除されます。

 

分割

セルを選択して「縦分割」をクリックすると左右にセルが分かれます

 

キャプチャ画像

 

セルを選択して「横分割」をクリックすると上下にセルが分かれます

 

キャプチャ画像

 

結合

複数のセルを選択した状態で「セルの結合」をクリックすると1個のセルにまとまります。

 

キャプチャ画像

 

サイト管理人

筆者

 

範囲選択したいセルの先頭から末尾までドラッグすれば複数のセルが選択できます。

 

タグの変換

ここからは左端の列ヘッダー扱いにしてみました。

その状態でどこかのセルを選択→「上に行を挿入」します。

 

キャプチャ画像

 

選択セルのすぐ上に空の行が挿入されます。

ただし左端のセルヘッダー指定が解除された状態になってます。

(※コピーじゃないので当然の仕様ですね)

 

キャプチャ画像

 

ここで「THタグに変換」(つまり”ヘッダーに変換”)をクリックしてみます。

 

 

再びヘッダー指定状態に戻せました。

これが「タグの変換」機能です。

 

キャプチャ画像

 

サイト管理人

筆者

 

反対に、ヘッダー指定のセルを「TDタグに変換」で通常のセルに戻すこともできます。

 

行揃え

選択したセル横位置(左揃え・中央揃え・左揃え)を変更できます。

また選択したセルの縦位置(上揃え・中央揃え・下揃え)も変更できます。

 

キャプチャ画像

 

背景色

対象のセルを選択してバケツアイコンをクリックすると色選択画面が出てきます。

そこで目当ての色をクリックするとすぐにその色で背景色を変更できます。

 

キャプチャ画像

 

対象の色が見当たらない時は直接カラーコードを入力して「OK」をクリックすれば反映されます。

 

キャプチャ画像

 

カラーコードとはウェブ専用の色指定コードのことで、多いのは#から始まる3桁または6桁の英数字の組み合わせになります。

カラーコード一覧表といったようなページを参考に指定してみてください。

 

背景色が暗い場合はそのままだとテキストが見にくくなります。

 

そんな場合はテキストを範囲選択後、記事装飾メニューの『装飾』を使ってテキストカラーを変更してあげれば可読性が高まります。

 

キャプチャ画像

 

HTMLソース』に切り替えてのダイレクト修正もできます。

ただしそのまま「OK」をクリックしても反映はされません

(あくまで”ソース”という立場だからでしょうか)

 

必ず一度「デザインモード」に戻して「OK」をクリックする必要があります。

 

キャプチャ画像

 

ただし<テーブル(表)>機能を起動させずに記事編集画面上で直接変更した場合はもちろん何の問題もありません。

 

次回<テーブル>を起動した場合は変更が反映された状態で表示されます。

 

キャプチャ画像

CSVからの読込み

<テーブル(表)>機能ではCSVファイルとして作成しておいた表データを取り込んで簡単にテーブル表示させることができます。

 

CSVファイル

CSVファイルとは各項目をカンマ(,)で区切ったデータのことです。

 

Excel等で作った表をExcel方式(拡張子.xlsx)ではなくCSV形式(拡張子.csv)で出力しておくことでさまざまなアプリに読み込むことができます。

 

サンプルとしてExcelで下のような表を作ってみました。

 

キャプチャ画像

 

これを「コーヒー豆.csv」というCSV形式で出力しておきます。

その後にSIRIUS2の『テーブル設定』画面で【CSVファイルから読み込み】をクリックし、「コーヒー豆.csv」を選択します。

 

キャプチャ画像

 

こちらが読み込んだ直後のキャプチャ画像です。

問題なく読み込んでくれました。

 

キャプチャ画像

 

そして多少デザインをいじって出力したのがこちらのキャプチャ画像。

いかがです?簡単でしょ。

 

キャプチャ画像

コメントフォーム(β版)

    ※コメントはこちらからどうぞ

    このフォームを作成するにあたって参考にしたサイト情報はこちらに載せてます