
ぽんひろさんのコピペだけで使える表を私が使っているDiverテーマにも導入してみました。

めちゃ不安!

function.phpをさわった後エラーが起きたら追加下コードを消してね。
真っ白になっちゃうよん!
この記事は
- グーテンベルクで記事を書いている
- Diverテーマを使っている
- HTMLやCSSが少しわかる
- ぽんひろさんの表を使いたい人
向けの記事です。
タップできる目次
ぽんひろさんのカスタマイズ表を参考にする
まずはぽんひろさんのホームページを参考にしてCSSとfunction.phpのコードを自分のブログにコピペして準備をしてね。

- STEP1CSSにコピペstyle.CSSにコードをコピペ
- STEP2function.phpにコピペ
見出し(上) 1列見出し(上) 2列見出し(上) 3列見出し(上) 4列見出し(上) 5列見出し(上) 6列見出し(上) 1行見出し(左) 1行1列 1行2列 1行3列 1行4列 1行5列 1行6列 2行見出し(左) 2行1列 2行2列 2行3列 2行4列 2行5列 2行6列 3行見出し(左) 3行1列 3行2列 3行3列 3行4列 3行5列 3行6列 4行見出し(左) 4行1列 4行2列 4行3列 4行4列 4行5列 4行6列 5行見出し(左) 5行1列 5行2列 5行3列 5行4列 5行5列 5行6列 スクロールヒント「白い動く手」を使いたい人
- STEP3HTMLにコピペ投稿画面でHTMLにコードをコピペ
DiverのCSSやfunction.phpはどこにあるの?
- 外観
- テーマエディター
- Diver子テーマ
- CSSやfunction.phpをカスタマイズ

ここのカスタマイズ画面をクリックしてもCSS画面が一番下にでてきます。
Diverの子テーマのCSSと同じなので、どちらでカスタマイズしてもいいと思います。

- diver_childを選択する
- function.phpを選択する
- 赤線より下にコードをコピペ
- エラーが起きても、その追加したコードを消せば元にもどります

カスタマイズしたい場所をクリックして下にスクロールするとコードを入力する画面がでてきます。

子テーマをカスタマイズするんだよ。
●● childは子テーマのことです。

①CSSに下のコードをコピペ
/************************************ ** 横長テーブル ************************************/ .p-sticky-table{ white-space: nowrap; line-height:1.6; } .p-sticky-table table{ border:none; border: 1px solid #dedede; border-bottom: none; border-collapse: collapse; word-break: break-all; table-layout: fixed; display:block; overflow:scroll; max-height: 80vh; } .p-sticky-table thead th:first-child { position: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 3; } .p-sticky-table thead th { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; text-align:center; } .p-sticky-table tbody th:first-child{ position: -webkit-sticky; position: sticky; left: 0; z-index: 1; border:none; white-space: normal; min-width: 130px; } .p-sticky-table th, .p-sticky-table td { min-width: 50px; text-align: left; font-size: 16px !important; position: relative; padding: 13px !important; color: #333; border: none !important; z-index: 0; vertical-align:middle !important; background:#fff; } .p-sticky-table th{ background:#f0f9ff !important; letter-spacing: 1px; font-weight: 500 !important; color: #555 !important; } .p-sticky-table tr{ border-bottom:none !important; } .p-sticky-table img{ margin: 10px auto; display: block; padding: 0; max-width: 80% !important; } .p-sticky-table table th::before, .p-sticky-table table td::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; z-index: -1; } /* スマホ */ @media screen and (max-width: 560px) { .p-sticky-table table { max-height: 60vh; } .p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child { min-width: 25vw; } .p-sticky-table th, .p-sticky-table td { font-size: 12px !important; padding: 7px !important; } } /* 中央寄せ */ .pst-center td { text-align: center; }
②function.phpにコピペ
ここは間違えると真っ白になりますのでバックアップをお願いします。

私ここで真っ白になったよ。
消したらもどるよ。
function p_table_func() { echo <<< EOM <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script> <script> window.addEventListener('DOMContentLoaded', function(){ new ScrollHint('.js-scrollable', { remainingTime: 3000, i18n: { scrollable: 'スクロールできます' } }); }); </script> EOM; } add_action( 'wp_footer', 'p_table_func' );
HTMLはどこにあるの?
グーテンベルクはブロックごとにわかれているのでHTMLも修正しやすいです。

このマークをクリックすると

カスタムHTMLのことです

なので上のブロックのカスタムHTMLにコピペしてね。

コードだけで書きたい人は上のコードエディタをいうところをクリックするとコードだけで編集する場面がでてきます。
③このコードをHTMLにコピペする

カスタムHTMLにコピペする
●①最後は下のHTMLをコピペ
<div class="p-sticky-table"> <table class="js-scrollable"> <thead> <tr> <th>見出し(上)</th> <th>1列見出し(上)</th> <th>2列見出し(上)</th> <th>3列見出し(上)</th> <th>4列見出し(上)</th> <th>5列見出し(上)</th> <th>6列見出し(上)</th> </tr> </thead> <tbody> <tr> <th>1行見出し(左)</th> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td> <td>1行5列</td> <td>1行6列</td> </tr> <tr> <th>2行見出し(左)</th> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> <td>2行4列</td> <td>2行5列</td> <td>2行6列</td> </tr> <tr> <th>3行見出し(左)</th> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> <td>3行4列</td> <td>3行5列</td> <td>3行6列</td> </tr> <tr> <th>4行見出し(左)</th> <td>4行1列</td> <td>4行2列</td> <td>4行3列</td> <td>4行4列</td> <td>4行5列</td> <td>4行6列</td> </tr> <tr> <th>5行見出し(左)</th> <td>5行1列</td> <td>5行2列</td> <td>5行3列</td> <td>5行4列</td> <td>5行5列</td> <td>5行6列</td> </tr> </tbody> </table> </div>
●②再利用ブロックに追加

そんな人は再利用ブロックに追加するとすぐHTMLを呼び出せてすごく便利!

●③名前をつけて保存する

●④保存したHTMLを呼び出す

●⑤通常のブロックを変換すると編集できますが四角に変わってた

この下の四角のマークを押せば編集できる。私すごく悩んだの。令和3年3月にかわったと思う。

通常のブロックに変換しなければつかえません。
ぽんひろさんのカスタマイズがDiverで正常に反映されました
diverテーマでも、ぽんひろさんのカスタマイズがうまくいってホッとしましたよ。
見出し(上) | 1列見出し(上) | 2列見出し(上) | 3列見出し(上) | 4列見出し(上) | 5列見出し(上) | 6列見出し(上) |
---|---|---|---|---|---|---|
1行見出し(左) | 1行1列 | 1行2列 | 1行3列 | 1行4列 | 1行5列 | 1行6列 |
2行見出し(左) | 2行1列 | 2行2列 | 2行3列 | 2行4列 | 2行5列 | 2行6列 |
3行見出し(左) | 3行1列 | 3行2列 | 3行3列 | 3行4列 | 3行5列 | 3行6列 |
4行見出し(左) | 4行1列 | 4行2列 | 4行3列 | 4行4列 | 4行5列 | 4行6列 |
5行見出し(左) | 5行1列 | 5行2列 | 5行3列 | 5行4列 | 5行5列 | 5行6列 |
見出し(上) | 1列見出し(上) | 2列見出し(上) | 3列見出し(上) | 4列見出し(上) | 5列見出し(上) | 6列見出し(上) |
---|---|---|---|---|---|---|
1行見出し(左) | 1行1列 | 1行2列 | 1行3列 | 1行4列 | 1行5列 | 1行6列 |
2行見出し(左) | 2行1列 | 2行2列 | 2行3列 | 2行4列 | 2行5列 | 2行6列 |
3行見出し(左) | 3行1列 | 3行2列 | 3行3列 | 3行4列 | 3行5列 | 3行6列 |
4行見出し(左) | 4行1列 | 4行2列 | 4行3列 | 4行4列 | 4行5列 | 4行6列 |
5行見出し(左) | 5行1列 | 5行2列 | 5行3列 | 5行4列 | 5行5列 | 5行6列 |
見出し(上) | 1列見出し(上) | 2列見出し(上) | 3列見出し(上) | 4列見出し(上) | 5列見出し(上) | 6列見出し(上) |
---|---|---|---|---|---|---|
1行見出し(左) | 1行1列 | 1行2列 | 1行3列 | 1行4列 | 1行5列 | 1行6列 |
2行見出し(左) | 2行1列 | 2行2列 | 2行3列 | 2行4列 | 2行5列 | 2行6列 |
3行見出し(左) | 3行1列 | 3行2列 | 3行3列 | 3行4列 | 3行5列 | 3行6列 |
4行見出し(左) | 4行1列 | 4行2列 | 4行3列 | 4行4列 | 4行5列 | 4行6列 |
5行見出し(左) | 5行1列 | 5行2列 | 5行3列 | 5行4列 | 5行5列 | 5行6列 |
表の色をかえたい
変更したい色を決めたらCSSにコードを追加します。

DIVERはカスタマイズしやすい設定になっています。

ライトイエローの場合
/* ライトイエロー */ .pst-light-yellow thead th, .pst-light-yellow tbody th { background: #fffbf0 !important; }
そしてHTMLの一番上も変更します。
<div class="p-sticky-table pst-blue">
<table class="js-scrollable">
一番上のうしろ側のtableのあとにかえたい色を付け加えるだけです。
黄色にしたければ一番上のpst-blue
を下のpst-light-yellow
にかえます。
pst-light-yellow
見出し(上) | 1列見出し(上) | 2列見出し(上) | 3列見出し(上) | 4列見出し(上) | 5列見出し(上) | 6列見出し(上) |
---|---|---|---|---|---|---|
1行見出し(左) | 1行1列 | 1行2列 | 1行3列 | 1行4列 | 1行5列 | 1行6列 |
2行見出し(左) | 2行1列 | 2行2列 | 2行3列 | 2行4列 | 2行5列 | 2行6列 |
3行見出し(左) | 3行1列 | 3行2列 | 3行3列 | 3行4列 | 3行5列 | 3行6列 |
4行見出し(左) | 4行1列 | 4行2列 | 4行3列 | 4行4列 | 4行5列 | 4行6列 |
5行見出し(左) | 5行1列 | 5行2列 | 5行3列 | 5行4列 | 5行5列 | 5行6列 |
文字の改行がうまくできない場合は?
表の文字改行がうまくいかない場合は<br>要素を使うと解決しますよ。
(上) | あああああああ あああああ(上) | 2列見出し(上) | 3列見出し(上) | 4列見出し(上) | 5列見出し(上) | 6列見出し(上) |
---|---|---|---|---|---|---|
1行見出し(左) | 1行1列 | 1行2列 | 1行3列 | 1行4列 | 1行5列 | 1行6列 |
2行見出し(左) | 2行1列 | 2行2列 | 2行3列 | 2行4列 | 2行5列 | 2行6列 |
3行見出し(左) | 3行1列 | 3行2列 | 3行3列 | 3行4列 | 3行5列 | 3行6列 |
4行見出し(左) | 4行1列 | 4行2列 | 4行3列 | 4行4列 | 4行5列 | 4行6列 |
5行見出し(左) | 5行1列 | 5行2列 | 5行3列 | 5行4列 | 5行5列 | 5行6列 |


やっと最近コードのことが理解できるようになったんだよね。
とにかく改行したいところにbrをつけたら改行ができるよ!
<br>あああああああ
上のように改行したい文字の前にbrを付け加えます。
<div class="p-sticky-table">
<table class="js-scrollable">
<thead>
<tr>
<th>(上)</th>
<th>ああああああ<br>ああああああ</th>
<th>2列見出し(上)</th>
<th>3列見出し(上)</th>
<th>4列見出し(上)</th>
<th>5列見出し(上)</th>
<th>6列見出し(上)</th>
</tr>
</thead>
<tbody>
<tr>
<th>1行見出し(左)</th>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
<td>1行4列</td>
<td>1行5列</td>
<td>1行6列</td>
</tr>
<tr>
<th>2行見出し(左)</th>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
<td>2行4列</td>
<td>2行5列</td>
<td>2行6列</td>
</tr>
<tr>
<th>3行見出し(左)</th>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
<td>3行4列</td>
<td>3行5列</td>
<td>3行6列</td>
</tr>
<tr>
<th>4行見出し(左)</th>
<td>4行1列</td>
<td>4行2列</td>
<td>4行3列</td>
<td>4行4列</td>
<td>4行5列</td>
<td>4行6列</td>
</tr>
<tr>
<th>5行見出し(左)</th>
<td>5行1列</td>
<td>5行2列</td>
<td>5行3列</td>
<td>5行4列</td>
<td>5行5列</td>
<td>5行6列</td>
</tr>
</tbody>
</table>
</div>

(上) | ああああああ ああああああ |
2列見出し(上) | 3列見出し(上) | 4列見出し(上) | 5列見出し(上) | 6列見出し(上) |
---|---|---|---|---|---|---|
1行見出し(左) | 1行1列 | 1行2列 | 1行3列 | 1行4列 | 1行5列 | 1行6列 |
2行見出し(左) | 2行1列 | 2行2列 | 2行3列 | 2行4列 | 2行5列 | 2行6列 |
3行見出し(左) | 3行1列 | 3行2列 | 3行3列 | 3行4列 | 3行5列 | 3行6列 |
4行見出し(左) | 4行1列 | 4行2列 | 4行3列 | 4行4列 | 4行5列 | 4行6列 |
5行見出し(左) | 5行1列 | 5行2列 | 5行3列 | 5行4列 | 5行5列 | 5行6列 |
表は見やすくカスタマイズする

表は苦手でしたが、ぽんひろさんの表のカスタマイズを使うことによって解消されました。
スマホで表が見やすいほうがモバイルフレンドリーでいい感じ。

ブログを初めたころの文章がヘタすぎるのね!
支離滅裂だわさ。

これ私が書いたんやと思うと恥ずかしいです。
読んだ人ごめんなさいっ!
ボチボチなおしていきます。
Diverをお使いのあなたも表をカスタマイズしてみてね。
バックアップを忘れずに!
