アフィリエイトで経済的自立を目指す

シリウスで表を簡単に作ってみましょう

 

ブログ記事に、表を入れたい!

 

と思ったことはありませんか?

 

 

私はありました。

 

そんな時思いついたのが、

 

EXCELで表を作って画像で保存し、ブログ記事に画像を貼る

 

という方法でした。

 

しかし、

  • EXCELを開く手間
  • 画像として保存する手間
  • SIRIUSに画像を取り込む手間

 

どうしても「手間」がかかるんですよね。

 

さらに画像で取り込むため、「画質」が悪くなります。

 

 

私と同じようなことをお悩みの方へ

 

SIRIUSには、とっても便利なお助けツールがあります。

 

「テーブル作成ツール」です。

 

これで、3つの手間を解消しましょう。

 

 

テーブル作成ツールの使い方

 

 

toolbox

 

この画面に見覚えがありますよね。
いつも記事をつくる画面にあります。
この中の、赤い四角のアイコンが「テーブル作成ツール」ですのでクリックしてください。

 

 

table serector

 

まず、「テンプレート」の中から使いたいテンプレートを選択してください。
今回は、デフォルトを選択しますので、そのままでOKをクリックします。

 

 

html editor

 

HTMLエディターが起動します。
この画面で表を作成していきます。

 

表が作ってありますがこれを削除します。
キーボードの「Ctri」を押しながら「A」を押してみてください。

 

これは「全選択」のショートカットキーです。

 

表がグレーに変わりましたね。
これが「選択している」というサインですので、キーボードの「Delete」を押して表を削除します。

 

 

html editor2

 

次に表を作成します。

 

テーブルの「▼」 ⇒ 「空のテーブルを作成」 ⇒ 「OK」 の順にクリックします。

 

 

table property

 

 

「テーブルのプロパティー」が出てきました。
この画面で、行や列の数を決めたり、表の色を決めます。

 

 

kihon
基本情報では、列・行の数、横幅が設定できます。
横幅の変更については、また後で記載します。


 

テーブルスタイル

 

 

テーブルのスタイルでは、線の太さ、セルの余白、セルの横幅、見出しの設定ができます。
下の画像は、それぞれの数値を変えていますので、参考になればと思います。

 

セルの横幅は、✔をれると均等に固定され、✔を外すと、文字数によって横幅が変わります。

 

 

color  color serect

 

 

色の設定では、線、行見出し、列見出し、セルの色が設定できます。
それぞれの▼をクリックすると、「カラーテーマ」が出てきますので、お好みの色を選択します。

 

その他では、カラーテーマの色以外の色を作成することもできます。

 

 

全て設定したら、「新規作成」をクリックします。

 

 

table hensyu

 

 

入力したいセルをクリックし、セルに文字を入力します。

 

表のところで「右クリック」すると「メニュー」が出てきますので、行や列の挿入・削除の編集が行えます。

 

 

kansei

 

 

文字の入力が終わったら「OK」をクリックして完成です。

 

記事中にテーブル作成のHTMLが記述されます。
ピレビューで確認してみてくださいね。

 

 

覚えておくと便利な機能

 

セルに文字を入力する場合、セルをマウスで毎回選択するのは面倒ですね。
そんな時は、「Tab」を使うと便利です。
Tab」を使うと、カーソルが横のセルに移動してくれます。
ひとつ前のセルに戻りたいときは、「Shift+Tab」で戻れます。

 

 

 

 

セルの横幅について

 

セル横幅の変更方法は2種類ありあす。

 

テーブル作成ツール内で編集

 

width

 

width2

 

 

HTMLで編集

 

テーブル作成ツールを閉じてしまうと上記の方法はできませんので、記事中にあるHTMLを編集します。

 

<!-- ★テーブルタグここから★ -->
<table cellpadding="5" cellspacing="0" class="gytffv">
<tbody>
<tr>
<th class="colh"><p style="text-align:center"></p></th>
<th class="colh"><p style="text-align:center">商品1</p></th>
<th class="colh"><p style="text-align:center">商品2</p></th>
<th class="colh"><p style="text-align:center">商品3</p></th>
</tr>

 

<!-- ★テーブルタグここから★ -->
<table style="width:75%" cellpadding="5" cellspacing="0" class="gytffv">
<tbody>
<tr>
<th width=15% class="colh"><p style="text-align:center"></p></t>
<th class="colh"><p style="text-align:center">商品1</p></th>
<th class="colh"><p style="text-align:center">商品2</p></th>
<th class="colh"><p style="text-align:center">商品3</p></th>
</tr>

 

 

下の赤い所を追加しました。

 

style="width:75%"
テーブルの横幅を「100%」で設定してるので、「75%」にするという意味です。

 

width=15%
この場合は、行見出しの横幅を、全体の幅の「15%」にするという意味です。

 

「px」でも設定はできますが、スマホやiphoneで閲覧する場合、表が崩れてしまうことがありますので「%」で設定することをおすすめします。

 

 

まとめ

 

お疲れさまでした。

 

記事の中に表を入れることは、頻繁にあることではないかもしれませんが、覚えておくととても便利な機能です。

 

表にするだけではなく、ちょっとしたレイアウトにも使えるんです。

 

こちらをクリックしてみてください

 

この画像のレイアウトを、「テーブル作成ツール」で作っています。

 

こんなこともできますので、いろいろと試してみてくださいね。

 

 

お読みいただきありがとうございました。

 

 

 

 


アフィリエイトランキング  <<<ポチッと押していただけると嬉しいです♪


ホーム RSS購読 サイトマップ