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

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

チコちゃん
Diverでもうまく反映されるのかな?
めちゃ不安!
にゃあこ
心配したけどうまく反映されたよ。
function.phpをさわった後エラーが起きたら追加下コードを消してね。
真っ白になっちゃうよん!

この記事は

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

向けの記事です。

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

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

にゃあこ
手順はこんな感じです。
  • STEP1
    CSSにコピペ
    style.CSSにコードをコピペ
  • STEP2
    function.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列

    スクロールヒント「白い動く手」を使いたい人

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

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

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

ここのカスタマイズ画面をクリックしてもCSS画面が一番下にでてきます。

Diverの子テーマのCSSと同じなので、どちらでカスタマイズしてもいいと思います。

にゃあこ
function.phpを見てみよう!
  1. diver_childを選択する
  2. function.phpを選択する
  3. 赤線より下にコードをコピペ
  4. エラーが起きても、その追加したコードを消せば元にもどります
 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を呼び出す

⑤通常のブロックを変換すると編集できます

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

ぽんひろさんのカスタマイズが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にコードをお試しで追加できますね。
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>あああああああ

上のように改行したい文字の前に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をお使いのあなたも表をカスタマイズしてみてね。

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

Twitterでフォローしよう