Diverテーマ表をカスタマイズ!グーテンベルクでblogを書こう

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

この記事は

向けの記事です。

ぽんひろさんのカスタマイズ表を参考にする

まずはぽんひろさんのホームページを参考にしてCSSとfunction.phpのコードを自分のブログにコピペして準備をしてね。

DiverのCSSやfunction.phpはどこにあるの?

①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をコピペ

<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を呼び出す

●

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

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

通常のブロックに変換しなければつかえません。

ぽんひろさんのカスタマイズがDiverで正常に反映されました

diverテーマでも、ぽんひろさんのカスタマイズがうまくいってホッとしましたよ。

表の色をかえたい

変更したい色を決めたらCSSにコードを追加します。

ライトイエローの場合

/* ライトイエロー */
.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

文字の改行がうまくできない場合は？

表の文字改行がうまくいかない場合は<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>

表は見やすくカスタマイズする

表は苦手でしたが、ぽんひろさんの表のカスタマイズを使うことによって解消されました。

スマホで表が見やすいほうがモバイルフレンドリーでいい感じ。

Diverをお使いのあなたも表をカスタマイズしてみてね。

バックアップを忘れずに!