目次
1.カスタムcssとは?
「カスタムcss」は、サイト全体のスタイルcssに新たにcssを追加するのではなく、
その個別ページ独自(専用)のcssを追加することができる機能です。
「このページだけにcssを追加してオリジナルのテーブルやリードを作りたい」という時に便利です。
2.カスタムcssを使ってオリジナルテーブルを作る
wordpress記事投稿画面にある「カスタムcss」を使って、オリジナルテーブルを作ってみましょう。
「カスタムcss」は、「投稿」と「固定ページ」の記事入力画面にあります。
この「カスタムcss」にcssを追加してみましょう。
下のサンプルcssを追加してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.table-design { width: 95%; margin-top:2%; border-collapse: collapse; border: 1px solid #CCC; font-size: 12px; text-align: left; } .table-design th { border: 1px solid #cbcbcb; color: #333; background-color: #ffcedc; font-weight: bold; padding: 5px 10px 5px 10px; } .table-design td { border: 1px solid #cbcbcb; padding: 10px; color: #666; } |
下のようになりましたか?
次に、記事投稿エディタにテーブルのソースコードを入力します。
入力する時は、下の画像のように「テキスト」というタブをクリックしてHTMLモードに変更してから入力します。
下のテーブルのサンプルソースコードを記事投稿エディタに入力してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table class="table-design"> <tbody> <tr> <th></th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <th>内容</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th>内容</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th>内容</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </tbody> </table> |
入力が終わったら通常通り「公開」ボタンを押して記事を投稿します。
下のようにオリジナルテーブルが投稿されるはずです。
3.ソースコードを見てみる
ソースコードを見てみると、投稿したその個別ページにだけ、cssが追加されています。
トップページなどの他のページのソースコードを見ると、このcssは追加されていません。
検索エンジンで、「tabele css」などのキーワードで検索すると、
かっこいいテーブルレイアウトのCSSを無料で公開してくださってる方たちがたくさんいます。
そういったものをコピペして使うと、キレイなデザインのテーブルなどが簡単にすぐ作成できます。
cssの知識がある方は、ご自身でcssを入力して作るのも面白いと思います。
※ cssのclass名はテンプレートにデフォルトで入ってるcssのclass名とかぶらないようにしましょう。
またテーブルだけでなく、そのページ専用のオリジナルリードや文字の装飾などもcssの追加で行うことができますので、
いろいろ試してみてくださいね ( ´∀`)ノ
テーブルやリードの横幅を指定する際は、ピクセル(px)などの固定の単位ではなく、
パーセント(%)で指定するとレスポンシブに対応し、画面の幅に応じて縮小されます。
(例):「 .table-design { width: 95%; } 」