WordPress

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

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

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

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

そんなときに便利な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にコードを追加してください。

  1. WordPressの編集画面から、「外観」→「テーマエディター」を開きます。
  2. 画面右側の「編集するテーマを選択」で「jin-child」を選択します。
    ※子テーマを使わない方は「JIN」を選択。非推奨
  3. テーマファイルは「テーマのための関数(functions.php)」を開きます。
  4. 「テーマのための関数(functions.php)」に上記のコードを入力します。
  5. 最後に、画面下部の「ファイルを更新」をクリックします。

子テーマ「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」表示順序を並び替える方法【図解】を書きました。図もつけて解説しています。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ