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

こいドラ

この記事では、Excelの表をWordpressの下書きに貼り付けたら、やたら縦長なってしまったから、スクロールさせてでもきれいな表を作りたい！という方のための対策を書いています。

こんにちわ！こいドラです。

今回は、、、

EXCELで表をキレイに作って、wordpressにコピペしてプレビューしたら、めっちゃ縦長になっとるやん！！

とお困りの方に向けた対策記事を書きたいと思います。

かくいう私も、同じトラブルに見舞われました。色々と検索してプラグインを入れてトライしてもうまく行かず、土日の2日をまるまる潰し、結果やる気が無くなり放置していました。

・・・が、やっぱり必要だ！！ってことで再トライし、やっと表のスクロールに成功しました。

ググってもイマイチピンとくるものが見つからず、以下ページを参考にしながら、なんとか手探りでスクロールの適用することに成功しました！

スマートフォン表示で、はみ出したtableを横スクロールさせるためのCSS

ってことで、今回は、「Excelで作った表をWordpressにコピペすると縦長になってしまう場合」の対策を、JINテーマで解説していきたいと思います。

この作業にはCSSが出てきますが、ただコピペするだけなので安心してください。

・・・ん～CSS使わない方法を探してみようと思ったあなた。

私もCSSとかHTMLとか書けないため同じことを思い、TinyMCE Advancedがダメなのかと思い、Tablepressなどの表専用プラグインを入れて試してみました。

が、全然うまく行かず、結局この方法にたどり着きました。

まずは、この方法を試してみることをオススメします。

WordPressで表をスクロールさせる「概要」

ってことで、先に対策の大枠をまとめておきますね。

STEP1

CSSをテーマに追加

追加CSSをテーマに追加する。
STEP2

表を挿入

表をWordpressに張り付ける。
STEP3

<div>で囲む

「<div class=”scroll”></div>」で表を囲む（テキストモード）。

STEP4

簡単に挿入する設定

AddQuicktagでクイックタグを設定する。

[/ptimeline]

概要だけ見れればよいという方は、ここから先は見る必要はありません。

ここからは、詳細に手順を解説していきたいと思います。

WordPressで表をスクロールさせる「詳細」

プラグイン「TinyMCE Advanced」をインストール

→定番プラグインなので、恐らく皆さんインストール済みだと思いますが、もしまだでしたらインストールしてください。

外観→カスタマイズ→追加CSSに移動する。

以下の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)*/

追加CSSに貼り付け、公開をクリック。

ここまでできたら、次は投稿の記事編集に戻ってください。

ビジュアルモードで、表を貼り付けたい場所に記号を入力しておく。

無くてもいい作業ですが、後でテキストモードで探し易いように準備する作業です。■や★など黒塗りの記号が探しやすくオススメ。

ビジュアルモードからテキストモードに切り替える。

■を文字検索する。

検索のショートカットキーやブラウザのページ内検索で検索してみてください。

<参考>検索のショートカットキー

Windows： ctrl+F
Mac：⌘(command) + F

一見、この解説が不要に思えますが、1000文字を超えた辺りから、テキストモードはカオスになっているので、探すこと自体が途端に大変になるので解説しています。

■を以下のHTMLに置き換える。

<div class="scroll">
★
</div>

置き換えた後の画面はこんな感じ。

テキストモードからビジュアルモードに切り替える。

切り替えた後は、こんな画面になって居ればOK。

★をExcelでコピーした表に置き換えます。

以上で終了となります。

WordPressで表をスクロールさせる「対策前(before)と対策後(After)の比較」

ビフォーアフターで見ていきましょう！

対策前（Before）

何もせずに貼り付けるとこんな感じです。

PCで見ると枠内には収まっているものの勝手に改行されてしまっています。

また、スマホだと見切れてしまいます。

	波長パターン	意味	参考
1	青	使徒	新世紀エヴァンゲリオン9話
2	オレンジ	対象物詳細不明	新世紀エヴァンゲリオン16話、18話、23話
3	セピア	デストルドー反応（死の誘惑にかられた状態）	新世紀エヴァンゲリオン20話
4	グリーン	リビドー反応	新世紀エヴァンゲリオン14話
5	レッド	ATフィールド微弱	新世紀エヴァンゲリオン劇場版「まごころを、君に」

これを対策すると、、、

対策後（After）

文字が折り返しされずにキレイな表を作成することができました。

	波長パターン	意味	参考
1	青	使徒	新世紀エヴァンゲリオン9話
2	オレンジ	対象物詳細不明	新世紀エヴァンゲリオン16話、18話、23話
3	セピア	デストルドー反応（死の誘惑にかられた状態）	新世紀エヴァンゲリオン20話
4	グリーン	リビドー反応	新世紀エヴァンゲリオン14話
5	レッド	ATフィールド微弱	新世紀エヴァンゲリオン劇場版「まごころを、君に」

こんな感じできれいにスクロールすることができました。

横にらみをしたい人には必見です！

おそらく、最もシンプルな方法だと思いますので、ぜひトライしてみてくださいね！

追記：細かいチューニング方法

①スクロールバーの太さを変更する。

上記CSSのままだとスクロールバーが細すぎると感じたため、5px→19pxに変更して使っています（最初から数値調整しといてよ！というツッコミはさておいて、、、）。

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

②スクロールバーの角を丸める方法

スクロールバーの角がカクカクしてて、若干の違和感を感じたので丸くしてみましたのでシェアしておきます。

以下の赤字箇所を追加するだけです（コピペでもイイですが、追加CSSに2重で書かないようにして下さいね）。

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