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

目次

1.カスタムcssとは？

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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