ページ専用のCSSを追加して簡単にオリジナルテーブルを作ろう

2015年1月8日 ()

目次

1.カスタムcssとは?

「カスタムcss」は、サイト全体のスタイルcssに新たにcssを追加するのではなく、
その個別ページ独自(専用)のcssを追加することができる機能です。
「このページだけにcssを追加してオリジナルのテーブルやリードを作りたい」という時に便利です。

cus_tab_000

 

2.カスタムcssを使ってオリジナルテーブルを作る

wordpress記事投稿画面にある「カスタムcss」を使って、オリジナルテーブルを作ってみましょう。
「カスタムcss」は、「投稿」と「固定ページ」の記事入力画面にあります。

cus_tab_001

この「カスタムcss」にcssを追加してみましょう。
下のサンプルcssを追加してみてください。

下のようになりましたか?

cus_tab_002

次に、記事投稿エディタにテーブルのソースコードを入力します。

入力する時は、下の画像のように「テキスト」というタブをクリックしてHTMLモードに変更してから入力します。

cus_tab_003

下のテーブルのサンプルソースコードを記事投稿エディタに入力してみてください。

入力が終わったら通常通り「公開」ボタンを押して記事を投稿します。
下のようにオリジナルテーブルが投稿されるはずです。

cus_tab_004

3.ソースコードを見てみる

ソースコードを見てみると、投稿したその個別ページにだけ、cssが追加されています。

cus_tab_005

トップページなどの他のページのソースコードを見ると、このcssは追加されていません。

検索エンジンで、「tabele css」などのキーワードで検索すると、
かっこいいテーブルレイアウトのCSSを無料で公開してくださってる方たちがたくさんいます。
そういったものをコピペして使うと、キレイなデザインのテーブルなどが簡単にすぐ作成できます。

cssの知識がある方は、ご自身でcssを入力して作るのも面白いと思います。
※ cssのclass名はテンプレートにデフォルトで入ってるcssのclass名とかぶらないようにしましょう。

またテーブルだけでなく、そのページ専用のオリジナルリードや文字の装飾などもcssの追加で行うことができますので、
いろいろ試してみてくださいね ( ´∀`)ノ

テーブルやリードの横幅を指定する際は、ピクセル(px)などの固定の単位ではなく、
パーセント(%)で指定するとレスポンシブに対応し、画面の幅に応じて縮小されます。

(例):「 .table-design { width: 95%; } 」