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

スタイリッシュな表

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

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

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


この記事では
表をスタイリッシュにしてみたカスタマイズを説明。
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
テーマエディター
FTPソフト

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

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

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

夏だしどっか行こう!

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

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

 

 

まとめ

追加CSSのまとめ

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