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

本ページはアフィリエイトプログラムによる収益を得ています。

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

Diverでもうまく反映されるのかな?
めちゃ不安!

この記事は

  • グーテンベルクで記事を書いている
  • Diverテーマを使っている
  • HTMLやCSSが少しわかる
  • ぽんひろさんの表をDIVERで使いたい人

向けの記事です。

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

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

ぽんひろさんのブログ

手順はこんな感じです

CSSにコードをコピペ

function.phpにコピペ

投稿画面でHTMLにコードをコピペ

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

  1. 外観
  2. テーマエディター
  3. Diver子テーマ
  4. CSSやfunction.phpをクリックしてカスタマイズ

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

function.phpにコードをコピペの手順

function.phpを見てみよう!

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

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

下の四角のマークを押すと編集できます

ぽんひろさんのカスタマイズが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を使っている人だったら、このページの下のCSSにコードをお試しで追加できます。
それで問題なかったら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
見出し(上) 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>

先ほどのながーい「ああああ」は<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列

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

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

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

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

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

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

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

美顔器

ONCE EMS care
ワンスイーエムエスケア

ティレット


ララルーチェRF
.
デンキバリブラシ2.0+ボディ

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

表が簡単!きれい

インストール

Twitterでフォローしよう

おすすめの記事