SWELLの表(テーブル)のヘッダーセクションの色を変える方法

URLをコピーする
URLをコピーしました!
悩んでいる男性

SWELLの表(テーブル)のヘッダーセクションの色を変える方法がどこを探しても分からないけど、何か方法はある?

今回はこんな悩みにお答えします。

この記事の内容
  • SWELLの表(テーブル)のヘッダーセクションの色を変える方法
この記事を書いた人
しんでぃ
  • 本職は最高マーケティング責任者
  • SWELLレビュー記事は公式サイト掲載
  • ブログ開設5ヶ月目で5桁収益
  • 現在8ヶ月で最高3.6万

Twitter : (@shinshindy33)

今回はこんな質問をいただきました。

以下の部分です。

表(テーブル)のヘッダーセクションの色を変えたい

SWELLでは表のヘッダーセクションに色のついたスタイルを選択できますが、この色を編集画面上で変更する設定がありません。

そこでこの記事では、SWELLの表(テーブル)のヘッダーセクションの色を変える方法について解説していきます。

>>SWELLの口コミ評判レビューはこちら

>>SWELLの初期設定はこちら

目次

SWELLの表(テーブル)のヘッダーセクションの色を変える方法

SWELLの表(テーブル)のヘッダーセクションの色を変える方法は2つです。

  1. サイト全体のメインカラーを変更する
  2. CSSで調整する

SWELLの表(テーブル)のヘッダーセクションの色は、サイト全体設定で決めたメインカラーになっています。

残念ながら、記事の編集画面でこの色を変える設定はないので、サイト全体のカラーを変更することになります。

しかし、CSSでカラーを調整する方法であれば、記事ごと、あるいは表ごとに色を変更することができます。

今回はこの2パターンを紹介します。

サイト全体のメインカラーを変更する方法

サイト全体のメインカラーは、「外観」>「カスタマイザー」>「サイト全体設定」>「基本カラー」のメインカラーで設定できます。

メインカラーの設定

ただし、メインカラーはサイト全体のカラーになるので、ここを変更すると、該当するすべての要素の色も変更になってしまいます。

CSSで表の色を変える方法

おすすめはCSSで色を変える方法です。

CSSで色を変える方法は3パターンあります。

  • サイト全体で表の色を固定する
  • 記事全体で表の色を反映させる
  • テーブルブロックごとに色を変える

順番に解説していきます。

※コード修正は自己責任でお願いします。

サイト全体で表の色を固定する

サイト全体で表の色を固定する場合は、サイト全体のCSSを編集します。

「外観」>「カスタマイザー」>「追加CSS」に、以下のCSSコードを貼り付けします。

/*テーブルのヘッダーセクションの色 */
	.post_content thead th {
	color: #fff;
	background-color: #000;
	}
/*ここまで*/

※色の部分を好みの色に変更してください。

color:〇〇

ヘッダーセクションの文字の色

background-color:〇〇

ヘッダーセクションの背景の色

記事全体で表の色を反映させる

記事全体で表の色を変えるには、投稿編集ページ一番下の「カスタムCSS & JS」にCSSを記入すると、この記事内にあるすべての表に反映されます。

カスタムCSS & JS

この「カスタムCSS & JS」に先ほどのCSSコードを入力します。

テーブルブロックごとに色を変える

3つ目は、記事全体ではなくテーブルブロックごとに、ヘッダーセクションの色を変える方法です。

こちらは追加 CSS クラスを使います。

テーブルブロックのいずれかのセルを選択した状態で、記事編集画面右側のメニューの一番下にある、「高度な設定」をクリックし、「追加CSSクラス」にクラス名を記入します。

クラス名は英単語なら何でもいいですが、例えばここでは”heading”にしたとします。

追加CSSクラスにクラス名を入力

次に、先ほどの「カスタムCSS & JS」に、以下のように記入します。

/*テーブルのヘッダーセクションの色 */
	.heading thead th{
	color: #fff;
	background-color: #000;
	}
/*ここまで*/

※色の部分を好みの色に変更してください。

各テーブルごとに、「追加CSSクラス」に記入するクラス名と、上記のコードのheading部分を変更することで、CSSの適用するブロックを変えられます。

カスタムCSS & JSと追加CSSクラスのクラス名を一致させる

こうすることで、以下のようにテーブルごとにヘッダーセクションの色を指定できました。

ヘッダーセクションヘッダーセクション
緑だよ
緑だよ
ヘッダーセクションが緑
ヘッダーセクションヘッダーセクション
黄色だよ
黄色だよ
ヘッダーセクションが黄色

まとめ

今回は、SWELLを使った表ブロックのヘッダーセクションの色の変更方法を解説しました。

CSSを使うので難しいかもですが、こだわる方はぜひチャレンジしてみてください。

今回は以上です。

\ユーザー満足度が驚異的!/

>>SWELL公式サイトからSWELLをダウンロードする

その他のSWELLカスタマイズ

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる