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

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

hide

hide

【GOLD BLOG(ゴールドブログ)】を買ったのはいいけど、テーブルがレスポンシブデザインではないと悩む人にコピペだけの解決方法を書いておきます。

ゴールドブログって実は使いづらいです。汗

なので他のワードプレステーマを検討してみるのも1つの方法です。

初心者向けに設計され、細かいところでかなり不具合が出てるので上級者にとってはこのワードプレステーマはどうなんだ?という感想を持つ方も多いでしょう。

今回はその不具合の問題の1つ「テーブル」を1分くらいでコピペしてレスポンシブ化するコードを紹介しておきます。

コピペだけ。ゴールドブログのテーブルをモバイルで横スライドするコード

手順はたった2つです。ソースコード画面右上にコピペボタンがあるので、そこをクリックしてください。

STEP1
外観 > カスタマイズ > 追加CSSに以下のコードを貼り付ける

/* ============================================
   ゴールドブログ テーブルカスタマイズコード
   モバイルでテーブルをスライド表示にする
   ============================================ */
@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;
    }
}
/* ========== テーブルカスタマイズ ここまで ========== */
STEP2
外観 > テーマファイルエディター > functions.php(子テーマを使用している場合は子テーマのfunctions.php)の一番下に以下を追加

/* ============================================
   ゴールドブログ テーブルカスタマイズコード
   モバイルでテーブルをスライド表示にする
   ============================================ */
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に入れてあれば影響を受けません。

注意点はゴールドブログにレスポンシブ対応のテーブルが追加された時

デザインばかりが先行し、こういった細かいところまでおそらく制作側は気づいてないと思いますが、万が一ゴールドブログ側で同じ機能が実装された場合はここのコードを削除した方が無難でしょう。

一応、同じ機能がダブっても独自に動くので問題はないですが、追加実装された方が好ましいならここのコードを削除した方が無難です。

このページを見てテーブルをカスタマイズしようとする人はアップデートの内容を確認してから必ずアップデートするようにしましょう。

この記事を書いた人 Wrote this article

hide

hide

技術選や検定の点数分析からスキー上達のコツをテキスト、イラスト、写真、動画を使って解説。トップページにレベル別のトレーニングがあるのでブックマークしておくと便利です。

TOP
error: Content is protected !!