ゴールドブログでテーブル(表)をモバイルでスライドさせる方法(コピペだけ)


【GOLD BLOG(ゴールドブログ)】を買ったのはいいけど、テーブルがレスポンシブデザインではないと悩む人にコピペだけの解決方法を書いておきます。
ゴールドブログって実は使いづらいです。汗
なので他のワードプレステーマを検討してみるのも1つの方法です。
初心者向けに設計され、細かいところでかなり不具合が出てるので上級者にとってはこのワードプレステーマはどうなんだ?という感想を持つ方も多いでしょう。
今回はその不具合の問題の1つ「テーブル」を1分くらいでコピペしてレスポンシブ化するコードを紹介しておきます。
コピペだけ。ゴールドブログのテーブルをモバイルで横スライドするコード

手順はたった2つです。ソースコード画面右上にコピペボタンがあるので、そこをクリックしてください。
/* ============================================
ゴールドブログ テーブルカスタマイズコード
モバイルでテーブルをスライド表示にする
============================================ */
@media screen and (max-width: 768px) {
/* テーブルの親要素をスクロール可能に */
.entry-content > table,
.post-content > table,
article table {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* テーブル本体の最小幅を設定 */
.entry-content > table tbody,
.post-content > table tbody,
article table tbody {
display: table !important;
min-width: 600px !important;
width: 100% !important;
}
}
/* ========== テーブルカスタマイズ ここまで ========== *//* ============================================
ゴールドブログ テーブルカスタマイズコード
モバイルでテーブルをスライド表示にする
============================================ */
function add_table_scroll_support() {
?>
<style>
.table-scroll-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1.5em;
}
@media screen and (max-width: 768px) {
.table-scroll-wrapper {
border: 1px solid #ddd;
}
.table-scroll-wrapper table {
min-width: 600px;
margin-bottom: 0;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var tables = document.querySelectorAll('table');
tables.forEach(function(table) {
if (!table.parentElement.classList.contains('table-scroll-wrapper')) {
var wrapper = document.createElement('div');
wrapper.className = 'table-scroll-wrapper';
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
}
});
});
</script>
<?php
}
add_action('wp_footer', 'add_table_scroll_support');
/* ========== テーブルカスタマイズ ここまで ========== */これでブログ上にある全てのテーブルがレスポンシブに自動的に切り替わります。
ゴールドブログにはない機能を、このコードで追加したという形になります。テーマのアップデートがあっても、子テーマのfunctions.phpに入れてあれば影響を受けません。
注意点はゴールドブログにレスポンシブ対応のテーブルが追加された時
デザインばかりが先行し、こういった細かいところまでおそらく制作側は気づいてないと思いますが、万が一ゴールドブログ側で同じ機能が実装された場合はここのコードを削除した方が無難でしょう。
一応、同じ機能がダブっても独自に動くので問題はないですが、追加実装された方が好ましいならここのコードを削除した方が無難です。
このページを見てテーブルをカスタマイズしようとする人はアップデートの内容を確認してから必ずアップデートするようにしましょう。
最新情報は
Xで受け取れます。
この記事を書いた人 Wrote this article
hide
技術選や検定の点数分析からスキー上達のコツをテキスト、イラスト、写真、動画を使って解説。トップページにレベル別のトレーニングがあるのでブックマークしておくと便利です。