表をスタイリッシュにしてみる改良バージョン

スタイリッシュな表

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
表をスタイリッシュにしてみたカスタマイズを説明。
CUSTOM POINT
枠線を追加してみました。それと薄い背景の位置を変更できるようにしました。

こんな感じで変更

Before
ヘッダーセル
After
ヘッダーセル
ヘッダーセルなしタイプ
メモ
<table style=”border-collapse: collapse; width: 100%;” border=”1″>の部分を<table style=”border-radius: 0;”>に変更。これでヘッダーセルなしでもキレイに表示されます。
MENくん

ひゃはっ!枠線が改良部分だよ!


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

カスタマイズの準備

表の作成

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

STEP 1

表の作成1


STEP 2

表の作成2


STEP 3

表の作成3


STEP 4    重要

表の作成4

MENくん

ほいっほい!これで表の設定は終了です

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

カスタマイズコードの追加

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

 

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • 表を作成
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

アドクイックタグとかに入れておけば簡単に作成できるね