【SANGOを自分でカスタマイズ】メリハリのある表にカスタマイズする

メリハリのある表にカスタマイズ

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
表をカスタマイズした方法を説明。
表ってデフォルトのままだと良くないの?

ハハハ、このカスタマイズは完全に自己満足だよ!
自己満足で終わるくらいなら記事にしないとね(笑)


こんな感じに変更

Before


After
ベーシックプラン
ユーザー普通の人
価格1,000円
契約期間1年

線を細くして、色にメリハリを付けただけでもぜんぜん違う!

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

表をカスタマイズする

ビジュアルエディタで表を作成します

ビジュアルエディタでの表作成-1
まずはビジュアルエディタから表を作成しましょう。ヘッダーセルを使用する際は、その行(または列)を選択した状態でセルセルのプロパティ一般セルの種類ヘッダーセルを選択してください。
注意
今回は横の行でヘッダーセルを使用する際のカスタマイズです。縦でヘッダーセルを使用する際はstyle.cssの「丸み」の部分を削除する必要があります。
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

style.cssにコードを追加する

style.css(追加するコード:表のデザイン)

太文字のカラーコードはお好きな色に変更してください。余白などもお好みで。

コードを追加したら、エディタソフトでstyle.cssの保存FTPソフトでアップロードブラウザでキャッシュを削除して更新します。

表に背景色をつける

ビジュアルエディタでの表作成-3
ヘッダーセル以外のセルに背景色をつける場合は、セルを選択ビジュアルエディタセルセルのプロパティ詳細背景色で色を追加してください。

あとは下書きを保存(もしくは更新)を押して、確認しましょう。

 

 

夏だし髪を斬りに行こう!

夏だしどっか行こう!

表をカスタマイズする手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • ビジュアルエディタで表を作成。
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • ビジュアルエディタでセルに背景色を付ける。
  • 更新して確認。
自己満足は終わりましたか?

はい!!スッキリしました!