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

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

この記事は

向けの記事です。

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

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

ぽんひろさんのブログ

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

ここのカスタマイズ画面をクリックしてもCSS画面が一番下にでてきます。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をコピペ

<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>

何度か使うコードなどは再利用ブロックに追加したら楽チンです

ぽんひろさんのカスタマイズが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をお使いのあなたも表をカスタマイズしてみてね。

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

CSSがわからない人はシンプルブログデザインというプラグインがあるよ

私も使っているシンプルブログデザイン、表がきれいだし楽に作れちゃう。

美顔器	ONCE EMS care ワンスイーエムエスケア	ティレット	ララルーチェRF	. デンキバリブラシ2.0+ボディ	ドクターアーヴォ ゼウスⅡ
税込み価格	76,800円	107,800円	33,000円	217,800円	220,000円 レンタルあり
返金保証	不明	１カ月返金保証あり	未開封のもの	不明	１カ月無料お試し
付け替え	なし	あり	なし	あり	なし
防水	生活防水	生活防水	生活防水	生活防水	なし
操作	慣れが必要	慣れが必要	簡単	慣れが必要	慣れが必要
メインの波形	中周波	イオン導入	高周波	低周波	EMS×中/高周波同時出力
エレクトロポーレション	あり	あり	あり	なし	あり
バイブレーション	あり	あり	なし	なし	あり
頭皮ケア	あり	あり	なし	あり	なし
ローション	お手持ち	お手持ち	お手持ち	専用ローションのみ	専用ローション
保証期間	1年間	1年間	1年間	1年間	2年間
公式サイト	詳細を見る	詳細を見る	詳細を見る	詳細を見る	詳細を見る