こんにちは😀広瀬ユキです。
今回は、「表を横スクロールするためのコード」ご紹介します。
パソコンでは、表が見られるけど、スマホで見ると表が見切れてしまうことってありますよね。
そんなときに便利なCSSのコードです。

表を横スクロールするためのコード
Step.1 CSSにコードを追加する
では、表を横スクロールするためのコードをCSSに追加してみましょう。
CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。
CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。【追加CSS】...
【コード】
/*---表を横スクロールする---*/
.scroll-box {
overflow: auto;/*スクロール*/
margin-bottom:10px;/*余白(外側下部)*/
white-space: nowrap;/*折り返ししない*/
}
.scroll-box::-webkit-scrollbar {
height: 5px;/*高さ*/
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;/*角の丸み*/
background: #F3F3F3;/*スクロールバーの背景色*/
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;/*角の丸み*/
background: #CCCCCC;/*スクロールバーの色*/
}
@media only screen and (min-width: 768px)/* 横幅が768px以上であれば横スクロールしない */ {
.scroll-box {
white-space: normal;/*自動で折り返す*/
}
}
/*---表を横スクロールする---*/
/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
.scroll-box {
overflow: auto;
margin-bottom:10px;
white-space: nowrap;
}
.scroll-box::-webkit-scrollbar {
height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;
background: #F3F3F3;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #CCCCCC;
}
@media only screen and (min-width: 768px) {
.scroll-box {
white-space: normal;
}
}
Step.2 functions.phpにコードを追加する
functions.phpに下記のコードを追加しましょう。
//表を横スクロールする//
function table_scroll_func($content)
{
$search = array('<table', '</table>');
$replace = array('<div class="scroll-box"><table', '</table></div>');
return str_replace($search, $replace, $content);
}
add_filter('the_content', 'table_scroll_func');
//表を横スクロールする//
// // で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
function table_scroll_func($content)
{
$search = array('<table', '</table>');
$replace = array('<div class="scroll-box"><table', '</table></div>');
return str_replace($search, $replace, $content);
}
add_filter('the_content', 'table_scroll_func');
WordPress有料テーマ【JIN】を使っている方は、CSSにコードを追加した要領で、functions.phpにコードを追加してください。
- WordPressの編集画面から、「外観」→「テーマエディター」を開きます。
- 画面右側の「編集するテーマを選択」で「jin-child」を選択します。
※子テーマを使わない方は「JIN」を選択。非推奨 - テーマファイルは「テーマのための関数(functions.php)」を開きます。
- 「テーマのための関数(functions.php)」に上記のコードを入力します。
- 最後に、画面下部の「ファイルを更新」をクリックします。
子テーマ「jin-child」のfunctions.phpにコードを追加することをオススメします!
!注意点!
- CSSとfunctions.php、両方とも追加しないと動作しません。
- テーマエディターに追加するので、コードを間違えるとテーマが真っ白になる場合があります。バックアップを取ってから自己責任で行ってください。
編集後記
便利なコードです。当ブログも表が見切れていましたが、これで解決できました。

【WordPress】【JIN】サイトアイコン(ファビコン)を設定する方法とGoogleの変更点【WordPress】有料テーマ【JIN】サイトアイコン(ファビコン)を設定する方法の解説と2019年5月22日にGoogleが公式発表した変更点について書きました。...

【WordPress】プラグイン「BJ Lazy Load」の設定方法【ブログを高速化しよう!】【WordPress】プラグイン「BJ Lazy Load」の設定方法について書きました。ブログカードの表示やGoogle botの対策についても書いています。...

【WordPress】プラグイン「PS Auto Sitemap」表示順序を並び替える方法【図解】【WordPress】プラグイン「PS Auto Sitemap」表示順序を並び替える方法【図解】を書きました。図もつけて解説しています。...