How To

シリウスのテーブル幅を調整|スマホでもPCでもカッコよく表示

2019年8月6日

大福
こんにちは、大福です。

この記事では、サイト作成ソフトSIRIUS(シリウス)テーブル幅の調整方法について解説しています。

 

  • テーブルの幅が大きすぎてなんとかしたい
  • 自分の好きな幅にテーブルを調整したい
  • PCでもスマホでも見やすいテーブルを作りたい

 

こんな悩みに答えます。

デフォルトの状態ではサイトの横幅いっぱいに表示

シリウスでテーブルを作成すると、デフォルトの状態ではサイトの横幅いっぱいにテーブルが表示されます。

でもコレ、ちょっとカッコ悪いなって思っちゃうことありませんか?

テーブル内によけいなスペースが多すぎて、見た目がイマイチです。

 

できればこんな状態の方がしっくりきませんか?

 

シリウスでテーブル幅を調整する方法

シリウスでテーブル幅を調整する方法を3つ紹介します。

それぞれのメリット・デメリットにも注目です!

 

  • SIRIUSの機能を使用してテーブル幅を調整する方法
  • 横幅を指定してテーブルを表示する方法
  • テーブルをスクロールさせて表示する方法

 

SIRIUSの機能を使用してテーブル幅を調整する方法

まずは、一番簡単なシリウスの機能を使用してテーブル幅を調節する方法を紹介します。

方法

SIRIUS搭載の機能を使用します

 

デザインモードをクリック

 

テーブル空のテーブルを作成をクリック

 

横幅の数値に任意のパーセンテージを入力することで、テーブル幅を調整することができます。

 

メリット

SIRIUS搭載の機能をそのまま使用しているので簡単

デメリット

スマホでもテーブルの幅が縮小されてしまうので、PCでは良くてもスマホでは見にくい場合もある

 

横幅を指定してテーブルを表示する方法

方法

SIRIUSテーブルタグに「横幅を指定するタグ」を追加します。

シリウスでテーブルを作成すると、こういったタグが表示されているはずです。

 

赤枠で囲まれている部分に、タグを追加していきます。

デフォルトの状態

<table class="dsc2item col2" cellspacing="1">

タグを追加

<table style="width:400px;" class="dsc2item col2">

大福
widthの数値を変更することで、テーブルの幅を自由に指定できるよ。

数値は、px(ピクセル)で指定することも、%(パーセント)で縮小率を指定することも可能です。

 

メリット

任意の幅に細かい調整が可能

デメリット

スマホで表示した時に、サイト幅からテーブルがはみ出してしまうこともある

 

テーブルをスクロールさせて表示する方法

これまでは、テーブル幅を縮小する方法を紹介してきましたが、ここでは横長のテーブルをスクロール表示する方法を紹介します。

方法

SIRIUS搭載の「テーブルを横スクロールする」機能を使用します。

 

例えば、こういった横長のテーブル。

PCでの表示 

スマホでの表示 

PCでは問題なく表示できますが、スマホでは無理矢理縮小されてしまってとても見にくいですよね。

テーブルの横スクロール機能を使用すれば、スマホでの表示時にもテーブルが変に縮小されてしまうことはありません。

方法は簡単。

 

対象のテーブルタグ全体を選択

 

テーブルタグが選択された状態で、マウスを右クリック。

テーブルを横スクロールさせるを選択。

 

スマホ画面での横スクロールが可能になり、テーブルが無理矢理縮小されなくなりました。

 

メリット

横長のテーブルがスマホでも見やすくなる

デメリット

テーブルがスクロールできるとは気づかずに、スルーされてしまうことがある

 

テーブルの位置を指定する方法

 

方法

SIRIUSテーブルタグに「位置を指定するタグ」を追加します。

 

赤枠で囲まれている部分に、位置を指定するタグを追加します。

 

デフォルトの状態(テーブル幅を50%で指定済み)

<table style="width:50%" class="dsc2item col2">

中央に表示

<table style="width:50%;margin-left:auto;margin-right:auto;" class="dsc2item col2">

margin-left:auto;margin-right:auto;を追加

左端に表示

<table style="width:50%;margin-right:auto;" class="dsc2item col2">

margin-right:auto;を追加

右端に表示

<table style="width:50%;margin-left:auto;" class="dsc2item col2">

margin-left:auto;を追加

 

番外編:PCとスマホでテーブル表示の幅をそれぞれ変更する場合

小豆
PCでは50%サイズのテーブル、スマホでは見やすいように横幅いっぱいのテーブルを表示したいなぁ。

PCとスマホ、それぞれで最適な大きさのテーブルを表示したいときもありますよね。

 

これまでに紹介してきた方法では、以下のデメリットがありました。

デメリット

SIRIUS機能を使用してテーブル幅を調整する方法

→スマホでもテーブルの幅が縮小されてしまうので、PCでは良くてもスマホでは見にくい場合もある

横幅を指定してテーブルを表示する方法

→スマホで表示した時に、サイト幅からテーブルがはみ出してしまうこともある

 

ちょっと面倒ですが、SIRIUSに搭載の機能をうまく使うことでPC、スマホそれぞれで最適な幅のテーブルを表示することが可能です。

 

PC表示とスマホ表示、それぞれのテーブル幅を最適にする方法

方法

「PC表示用のテーブルタグ」と「スマホ表示用のテーブルタグ」をそれぞれ記載する

 

SIRIUSには、「PCのみで表示」「スマホのみで表示」を指定することが可能な機能が搭載されています。

この機能を使用すれば、【PC表示用のテーブル】と【スマホ表示用のテーブル】を使い分けることが可能になります。

 

ここでは、以下の条件のテーブルを作る方法を説明します。

こんなテーブルタグを作成

PC表示では、サイト幅に対し50%の大きさのテーブルを表示

スマホ表示では、サイトの幅いっぱいのテーブルを表示

 

step
1
PC表示用のテーブルタグを作成

SIRIUS機能を使用してテーブル幅を調整する方法を参考に、横幅を50%に指定したテーブルタグを作成します。

step
2
スマホ表示用のテーブルタグを表示

横幅いっぱいに表示するためのスマホ用のテーブルタグを作成します。

SIRIUSで作成したテーブルは、デフォルトの状態で横幅100%で表示されるようになっていますので、いつも通り普通にテーブルを作成すればOKです。

step
3
それぞれのテーブルタグに、指定タグを挿入

PC表示用のテーブルタグ全体を選択し、右クリック

タグ挿入PCのみで表示<pcc>を選択

 

PC表示タグ同様に、スマホ表示用タグ全体を選択し、右クリック

タグ挿入iPhoneのみで表示<ipc>を選択

 

PCとスマホ、それぞれで最適な幅のテーブルが表示されるようになりました。

以前の状態

修正後の状態

 

大福
この記事は以上です。設定お疲れさまでした。

 

関連
予算1万円で買える!本気でアフィリエイトする人におすすめの椅子

続きを見る

関連
アフィリエイトヘッダー
【2019年】ルレアは稼げない?超初心者が1年間実践してみた結果

続きを見る

関連
アフィリエイトヘッダー
購入する価値あり?アフィンガー5をワードプレス初心者が使ってみた

続きを見る

関連
アフィリエイトヘッダー
アフィリエイトは独学でも稼げるの?本当のことを話そうと思います

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-How To
-

© 2020 大福日記