【WordPress】表を横スクロールするためのコード【便利】

こんにちは😀広瀬ユキです。

今回は、「表を横スクロールするためのコード」ご紹介します。

パソコンでは、表が見られるけど、スマホで見ると表が見切れてしまうことってありますよね。

そんなときに便利なCSSのコードです。

表を横スクロールするためのコード
- Step.1 CSSにコードを追加する
- Step.2 functions.phpにコードを追加する
！注意点！
編集後記

表を横スクロールするためのコード

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にコードを追加してください。