テーブル内の背景色を変える方法
シリウスのテーブルタグ、デフォルトの背景色はイマイチ、パっとしません。
背景色を変えたいのだけれど、どうしたらいいのか？
その方法を解説していきます。
例として、特定商取引法を例に説明していきます。
こういうやつですね。
この左側の背景色、灰色ぽい色を変えますね。
| 販売業者 | ○○○株式会社 |
|---|---|
| 運営統括責任者 | 山田 太郎 |
| 所在地 | 〒123-4567 東京都○○区○○12-34-567 |
| 電話番号 | 03-00-0000 電話でのお問い合わせは受け付けておりません。 サポートはメールのみとなります。あらかじめご了承いただきますよう お願いいたします。 |
| info★example.com (★を@マークに変えてください。) | |
| URL | http://example.com/ |
| 決済方法 | ・クレジットカード決済 ・銀行振込 ・代金引換 |
| 商品代金以外の必要経費 | 銀行振込の場合、振込手数料 代金引換の場合、代引き手数料 |
| 商品引き渡し時期 | 通常お支払い後、○日以内に発送 |
注意事項
ターブルは個別で、変更することができません。
サイト単位の変更になります。
だから、トップページと個別ページで同じテーブルタグを使っている場合
別々の配色にすることは出来ません。
同じ色の設定になるので注意してくださいね。
それから、何が起こるかわからないのバックアップを取ってからやってください！
本来ならこのサイト、設定を変更した方が分かりやすのですが
このサイトはページ数も増えてきて、いろんなページでテーブルを使っている関係上
このサイトを変更すると、いちおうすべてのテーブルタグを使っているページを
不具合がないか確認する必要があります。
それが、面倒なので、別のサイトでテストすることにしました。
ご了承ください。
そして、こんな感じになりました。
分かりやすいように、派手めに配色しました。
方法
まず、ページ作成画面の上部のテンプレートのプルダウンから
「スタイルシートを編集」を選択します。
次に、「スタイルシートを編集」の中から、「table.css」を選択。
そしたら、80行目ぐらいに「特定取引法に関する表記 」ってところの
赤字のところの色コードを変えます。
枠線の色↓↓↓↓（今回は青にしました）
.tokusho {
background-color: #CCCCCC;
}
.tokusho th, .tokusho td {
padding: 8px;
}
左側の背景色↓↓↓↓（今回緑にしました）
.tokusho th {
background-color: #E3E3E3;
width: 30%;
で、右側の黄色の背景色の部分は、13行目あたりの「td」のところを
変更してください。
td{
background-color:#FFFFFF;
実際の変更したサイトはこちらになります。⇒こちら
以上です。
これをやる前は、くれぐれもバックアップは忘れずに。
それから、自己責任でお願いします。
テーブル内の背景色を変える方法関連ページ
- 文字装飾の小ネタ
- 文字装飾のコネタです。知らなくても問題ないんだけど、知っとくと便利。そんな小ネタです。
- 記事の文字数カウント機能
- シリウスには、記事数をカウントする機能が付いています。アドセスとか文字数を気にして記事を書いている人には便利な機能です。
- 記事の装飾機能が増えました
- 記事スタイルが大幅に追加になっています。短調になりがちな見た目を簡単に変えることが可能。試してみよう。
- ＳＩＲＩＵＳは自動でサイトマップ生成
- ＳＩＲＩＵＳは、とくに何かをしなくても勝手にサイトマップを生成してくれます。サイトマップは、訪問者にも検索エンジンにも利便性がありますから、ありがたい。
- 個別ページを1カラムにする方法
- シリウスで個別ページを１カラムにする方法。超簡単出来ます。
- サテライトサイトから画象で誘導する
- シリウスの新しくなった機能を使い、サテライトサイトから誘導する方法
- テーブルタグを使って簡単に商品を紹介
- シリウスのテーブルタグを使って商品を紹介する方法です。
- 段組レアウトの作り方
- シリウスの新機能、段組レイアウトの作り方を解説します。参考にして下さい。
- 編集画面の文字を大きくする方法
- シリウスページ編集画面は、デフォルトだと字が小さいんですよね。それを大きな文字にするにはどうしたらいいのだろう？
- 更新情報活用術
- シリウスは、ブログではなくサイトです。なので、更新頻度も少ないサイトが多いわけですが、適度に更新しているサイトなら、更新情報をうまく活用する方法があります。
- カウントダウンタイマー設置の方法
- シリウスでカウントダウンタイマーを設置する方法って？いやあ、実に簡単です。
- Facebook「いいね！」ボタンをシリウスサイトに設置する方法
- シリウスのサイトにFacebookの「いいね！」ボタンを設置できるのだろうか？その方法を模索。
- シリウスのテーブルを使って、売りたい商品を比較する
- サイトアフィリエイトで重要なことの一つに「商品を比較する」ということがあります。で、今回、シリウスのテーブルを使って比較してみました。
- 自動でサイト生成先フォルダを作ってもらう裏ワザ
- サイトを作ったあとのサイト生成先フォルダ。いちいちその都度、新しいフォルダーを作ることなく、シリウスに自動で作ってもらう方法。
- ヘッダーにロゴ画像を表示させる方法
- シリウスのヘッダーにロゴ画像を表示させる方法です。
- 角丸テーブルを作ってみる
- 角丸テーブルを作ってみようと思います。
- 新しいカタチのランキング
- シリウスを使った新しいカタチのランキング表示です。参考程度に聞いてください。
- シリウス編集機能で縦書き文字を書く
- シリウスの画像編集機能を使って、縦文字を書く裏技をご紹介します。
- シリウス、スマートフォンサイトをプレビューで確認する方法
- シリウス上位版には、スマートフォン同時生成機能があります。で、どういったスマートフォンサイトになっているのか確認する方法
- シリウスの見出しのデザイン色を変える方法
- シリウスの見出し「Ｈ３」のデザイン力を変える方法です。