WordPressテーマ『JIN』で簡単に表を横スクロールさせる方法

ブログ

2021.02.12

WordPressで横長の表をスクロールさせる方法。

※自分のための備忘録です。

[jin-iconbox01]『JIN』の場合[/jin-iconbox01]

[jin-fusen3 text=”作業前”]

あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ
あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ

[jin-fusen3 text=”作業後”]

あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ
あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ	あああああああ

以下の記事を参考にさせてもらいました。

WordPressにコピペしたエクセルの表を綺麗にスクロールさせる方法を解説！縦長の表でお困りの方やJINテーマユーザーは必見！ | Koidora.com

こんにちわ！こいドラです。今回は、、、 EXCELで表をキレイに作って、wordpressにコピペしてプレビューしたら、めっちゃ縦長になっとるやん！！とお困りの方に向けた対策記事を書きたい

【手順①】追加CSSの編集
【手順②】表を<div>タグで囲む
補足

【手順①】追加CSSの編集

追加CSSに以下を追記する。

/*表スクロール設定(START)*/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space: nowrap;
}
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}
/*表スクロール設定(END)*/

/*表スクロール設定(START)*/

table{

width:100%;

}

.scroll{

overflow: auto;

white-space: nowrap;

}

.scroll::-webkit-scrollbar{

height: 5px;

}

.scroll::-webkit-scrollbar-track{

background: #F1F1F1;

}

.scroll::-webkit-scrollbar-thumb {

background: #BCBCBC;

}

/*表スクロール設定(END)*/

サーバのWAFをOFFにして保存する。

※2021年2月12日時点ではWAFをOFFにしないと保存できない。

【手順②】表を<div>タグで囲む

あとはスクロールさせたい表を<div>タグで囲むだけ。

<div class="scroll">

</div>

</div>

補足

ネットで調べているとfunctions.phpも編集する手順もあるが、危険だし手間も増えるのでこちらの方が楽。

あとコードを追記する時は開始箇所と終了箇所にコメントを入れておくと便利。

開始箇所にはいつも何のコードかを入れていたが終了箇所には入れておらず、次のコードが続いているとどこからどこまでが1つのコードなのかがわかりにくい。