wordpress

【簡単!】WordPressにエクセルの表をレスポンシブ対応で貼る方法!

エクセルでまとめた表をWordPressで紹介したいなんて思ったことはありませんか?

WordPressでエクセルの表を扱うためにプラグインを利用したり、コピペをしたり色々な方法があります。

そこで今日は見栄えよく、レスポンシブ対応させてエクセルの表をWordPressに貼る方法を紹介していきたいと思います。

レスポンシブ対応とは何か?

今、最もWeb業界で主流なWebデザインの手法でモバイル端末だけでなく、PC表示両方に対応したWebページのことです。

同じソースを使っているので1度更新するだけで、モバイルからもPCからもそれぞれ見た目が補正させるように出来ています。

今ではスマートフォンの普及によって、Webページをモバイルにも対応させることは必須といっても過言ではありません。

WordPressにエクセルの表をレスポンシブ対応して貼り付ける方法

エクセルで作った表をそのままWordPressに貼ることは皆さんご存知かと思います。
しかし、誰が見ても綺麗なエクセルの表になっていますか?

おさらいを含めて、エクセルの表をWordPressにレスポンシブ対応させて貼り付ける方法を紹介していきたいと思います。

WordPress上でも簡単に今では表を作ることができるようになりしたが、やはり表を作る際にはエクセルで作ってからそれをWordPressに貼り付けた方が便利ですよね。

そんな場面いもってこいの簡単な手順を紹介します。

1. エクセルでWordPressに掲載したい表を作る

まずエクセルで自分がWordPressに掲載したい表を作りましょう。

2. エクセルの表をコピー(Ctrl+C)をする

エクセルで作成した表を表示させたい範囲をコピーしましょう。(Ctrl+C)

3WordPressのビジュアルエディターへペーストする

このようにエクセルで作った表を記事投稿する画面の「ビジュアル」より、貼り付けると以下のように表示されます。

4. 見出しセルでもっと表を見やすくさせよう

エクセルの表を無事にWordPressにレスポンシブ対応させた状態で貼ることができたけど、見出しなどがハッキリしていなくて表が見づらいかと思います。

そんな時はWordPressを使ってるほとんどのユーザーがインストールしているであろう、プラグインを使います。

4.5. ビジュアル拡張をしてくれるプラグインをインストール

そんな時はTinyMCE Advancedというプラグインをインストールすると手軽に見出しをつけることができます。

 

まず、WordPress画面>プラグイン>新規追加よりTinyMCE Advanced」と検索して下さい。

 

そしてインストールし終わったら、有効化して下さい。「TinyMCE Advanced」が有効化されると…

WordPress画面>投稿>新規追加より投稿する画面のビジュアルエディタを見てみると、機能が拡張していることがわかります。

この状態より、エクセルからコピーペーストしたテーブル表を編集していきましょう。

 まずは目立たせたい箇所をマウスを動かし列の見出し(A社、B社、C社の部分)を選択しましょう。

その状態で、下の段の右から2番目の「テーブル」より「セルのプロパティ」を開きましょう。

「セルの種類」のところで、「ヘッダーセル」を選択しましょう。

続いて、列のセルも「ヘッダーセル」を選択して同じく目立たせましょう。

知っている人は知っているかもしれませんが…

行・・・横のエクセルマスのことを言います。

列・・・縦のエクセルマスのことを言います。

これでしっかりと「列」にも「行」にも見出しがつきましたね。

5. 表をレスポンシブ対応させる方法

このエクセルの表がモバイルで見た時に見切れてしまったりしませんか

 

こ、これは何とも悲しい…

そんな見切れている時にこそ、レスポンシブ対応させる必要があります。

 

実は、先程紹介した「TinyMCE Advanced」をインストールしていればとってもその方法は簡単です。

 

1. 全てのマスを選択して下さい。

2. その状態でテーブルを開き「表のプロパティ」を選択

表のプロパティのところから、幅を100%にするだけでモバイル表示も問題なく表示することができます。

どうしてもWordPressでエクセル表が見切れてしまう場合の対処法
【Wordpress初心者向け】表・テーブルが見切れてしまう時の対処法!Wordrpressでテーブルをご使用の皆さんこんにちわ! こんな経験したことはありませんか? PCは基本的には大丈夫何...

 

エクセル表もモバイル対応が重要に!

自分のWebサイトの解析などを見てみると、6割以上がモバイルユーザーです。

つまり、エクセルの表などもレスポンシブル対応させていなかった場合は6割のユーザーにはその表は見られないと言うことにも繋がります。

なので、モバイルユーザーに対する親切なWebページ作りはWordPressだけに限らず全てのWebページに置いて大切になってきます。

最後に:WordPressで表を使うと見やすいブログができる

やっぱり何か比較したりするサイトをWordPressで作成する際は、絶対にエクセルの表は欠かせないと言ってもよいでしょう。

表があるのと、無いのとでは、見やすさがかなり違います。

今日紹介した方法さえ身につければ、WordPressでエクセル表を扱うのも怖く無いと思うので是非これからはWordPressでガンガン表を使って見て下さい。

 

ABOUT ME
山田 裕太(やまちゃん)
現在、東京とセブを行き来する大学4年生のwebデザイナー。高校時代に情報科に所属していたことから、困っている人をwebの力で助けたいと思いながら、大学2年次セブ島へ留学したり、大学4年時ではスタディツアーを大学生向けに運営したり、かき氷店の出店を見据えたかき氷販売などをセブ島にてする。20代の若者達に新しい生き方に挑戦できるロールモデルとして「Yamalog.online」を運営。
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus