WordPress

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

 

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

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

 

今回は、、、

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

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

 

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

 

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

 

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

 

 

ってことで、今回は、「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)*/

     

    追記2 AddQuicktagでもっと簡単な挿入の設定。

     

    最近もっと楽な方法を見つけたのでシェアします。

    それはAddQuicktagというプラグインでショートカットのようなものを設定するもの。

    以下に手順書いておきます。

    • STEP1
      AddQuicktagインストール
    • STEP2
      タグを設定する
    • STEP3
      タグを呼び出す
      プルダウンで呼びます。
    • STEP4
      表を挿入する
      ★をExcelでコピーした表に置き換えます。

    AddQuicktagインストール。

     

    タグを設定する。

     

    設定→AddQuicktagをクリックし赤枠の箇所を入力する。

     

    ボタン名:好きな名前を付ける。

    開始タグ:先ほど貼り付けた以下のコードを貼り付け。

    ✔:クリックしておけばおk

    ↓開始タグにコピペ

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

     

     

    変更を保存を押す。

     

    タグを呼び出す

    投稿画面に戻って、先ほどの「ボタン名」に入れた名称が以下のプルダウンで出てきたらクリックする。

    そうすると★マークがでてくる。

     

     

    表を挿入する。

     

    ★←ここを表に差し替え

     

     

    これで、今後はもっと楽に表を横スクロールさせることができます。

     

    POSTED COMMENT

    1. つばさ より:

      横スクロールのやり方が分からず、いくつかのサイトでやってみてもうまくできなかってのですが、あなた様のサイト通りにやってみるといきなりできました。
      ありがとうございます。

      • admin より:

        >つばささん
        上手くいったようでとてもうれしいです!
        横スクロールのページは難解なものが多くて、私もかなり苦戦したので、
        このページが役に立ったようでよかったです!

    COMMENT

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA