初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法

WordPressで表を作る時間がもったいないと思ったことありませんか?

Excelからhtmlに出来ればできれば簡単なのでhtmlやcssの知識がなくても大丈夫!(^^)!

今回は、Excelの機能とWordPressの機能をそのまま使ってExcelでの表作成以外のほとんどがコピペだけでWordPressの投稿記事1記事』に適応させる方法をWordPress初心者でもExcel初心者でもわかりやすいように説明します。

初心者の方は、画像に沿って説明していますのでExcel2003の場合とExcel2016の場合をご覧になって下さい。

全バージョン共通では、ショートカットキーを含め文字のみでの説明にしています。

表示されている目次で理解できる方は目次を参照して下さい。

作成した環境:Excel2003=Windows7・Excel2016=Windows10で、WordPressはTwenty Seventeenです。

Excelの設定

1.Excelのワークシート内に含まれるふりがなを一括削除する

Excelにふりがなが表示されていない場合でもhtml側では、入力時にフリガナがExcel中に保存されていますのでふりがなを一括で削除します。

ふりがな付きOKの場合は、この項目は飛ばしてください。

 

Excel2003の場合

ワークシート内を全選択する

下画像の左上のの部分をクリックすると全選択できます

 

すると下の画像のようにワークシート内が全て選択されます

 

 

コピーする

ツールバーにある「コピー」ポタンをクリックします。

 

 

すると下の画像のようにコピーされます。

 

 

新しいワークシートに数式を貼り付ける

①「新しいワークシート」を選択します

②ツールバーの「貼り付け」アイコン右横にある「」をクリック

③「形式を選択して貼り付け」をクリック

すると下の画像のようにポップアップウインドウが表示されますので「数式を選択して「OK」ボタンをクリックします。

 

すると下の画像のように文字のみコピーされますが、書式がまだコピーされていませんので今度は書式をコピーします。

数式を貼り付けたワークシートに書式を貼り付ける

もう一度ツールバーにある貼り付けアイコン右側にある「」をクリックします。

次に「形式を選択して貼り付け」をクリックし、今度は「書式」を選択し「OK」ボタンを押します。

 

これで、元のデータと同じ表示になりましたね。

これでExcelのワークシート内に含まれるふりがなは削除されましたので、Excelhtml形式に変換した時にふりがなは記途されません。

ワークシートの削除と名前の変更

適応対象表はExcelの中にふりがなが存在するので「適応対象表の見出し右クリック」→「削除」で削除します。

Sheet3はデータが存在しないワークシートなので「sheet3の見出し右クリック」→「削除」で削除します。

sheet2はwebで使用するシートなので「sheet2の見出し右クリック」→「名前の変更」で見出しの名前を変更します。

 

次はExcelのデータをhtml形式に変換します。

 

Excel2016の場合

ワークシート内を全選択する。

下の画像のように全セル選択ボタンをクリックします。


すると下の画像のようにワークシート内が全て選択されます。

コピーする

・「ホーム」タブにあるコピーアイコン右横にある」ボタンをクリックし「コピー」をクリックします。

すると下の画像のように全てコピーされます。

 

新しいワークシートを追加する

シートを追加するには下の画像の、エクセル画面の下にある「+」の部分をクリックします。

 

すると新しいワークシート「sheet1」が下の画像のように追加されます。

 

新しいワークシートに数式を貼り付ける

ホーム」タブから「貼り付け」下にある「」をクリックして選択し、貼り付けの中にある「数式」ボタンをクリックします。

 

別の方法として、「ホーム」タブから「貼り付け」下にある「」をクリックして選択し、「形式を指定して貼り付け」をクリックします。

 

するとポップアップウインドウが表示されますので、そのメニューの中にある数式」ボタンをクリックして「OK」ボタンをクリックします。

 

すると下の画像のように数式が貼り付けられます。

これではまだ未完成なので次に書式を貼り付けます。

 

書式を貼り付ける

数式を貼り付けたワークシートにもう一度「ホーム」タブから「貼り付け」の「」をクリックして選択し、その他の貼り付けオプションの中にある「書式設定」ボタンをクリックします。

 

別の方法として、「ホーム」タブから「貼り付け」下にある「」をクリックして選択し、「形式を指定して貼り付け」をクリックします。

 

するとポップアップウインドウが表示されますので、そのメニューの中にある書式」ボタンをクリックして「OK」ボタンをクリックします。

 

すると下の画像のように書式が貼り付けられます。

これでExcelのワークシート内に含まれるふりがなは削除されましたので、Excelhtml形式に変換した時にふりがなは記途されません。

ワークシートの削除と名前の変更

適応対象表はExcelの中にふりがなが存在するので「適応対象表見出し右クリック→「削除」で削除します。


すると下の画像のように「このシートは完全に削除されます。続けますか?」と確認のメッセージが表示されますので「削除」をクリックします。


次にsheet1はwebで使用するシートなので「sheet1見出し右クリック→「名前の変更」で必要に応じて見出しの名前を変更します。


次はExcelのデータをhtml形式にします。

 

全バージョン共通

ワークシート全体を選択します。

ふりがなを削除したいワークシートを選択し

Ctrl+Aを押すとアクティブ セル領域が選択されます。

もう一度Ctrl+Aを押すとワークシート全体が選択されます。

 

コピーする

次に、ワークシートをコピーします。

ショートカットキーのCtrl+Cを押します。

 

新しいワークシートを追加する

選択したシート見出しをマウスの右ボタンでクリックして、[挿入] をクリックします。次に、[標準] タブの [ワークシート] をクリックし、[OK] をクリックします。

※始めから何も入力のないワークシートがある場合は追加の必要はありません)Sheet2などの未入力のワークシートを使います。

数式を貼り付ける

新しいワークシート(セルがA1に選択されている状態)でマウスの右ボタンでクリックして「形式を指定して貼り付け」→「数式」を選択し「OK」を押します。

これで文字データのみコピーされました書式がまだ貼り付けられてませんので今度は、書式を貼り付けます。

書式を貼り付ける

数式を貼り付けたワークシート(セルがA1に選択されている状態)でもう一度、マウスの右ボタンでクリックして「形式を指定して貼り付け」→Excel2003=「書式」Excel2007以降「書式設定」を選択し「OK」を押します。

これで入力したデータと同じように表示されます。

ワークシートの削除と名前の変更
  • 必要のないワークシートは、「見出しを右クリック」→「削除」で削除します。
  • Webに使用するワークシートは「見出しを右クリック」→「名前の変更」で必要に応じて名前を変更します。

 

Excelのふりがなを一括で削除する時のまとめ

1.ふりがなを削除したいワークシート全体をコピーし新しいワークシートに「数式」を貼り付けし、「書式」もしくは「書式設定」のいずれか表示される方を貼り付ける。
2.必要のないワークシート削除し、Webで使用する新しく作成したワークシートは必要に応じて名前の変更をする。

 

2.Excelファイルをhtml形式にして保存する

Excelの機能として従来からあった「webページとして保存」の機能を使用します。

Excel2003の場合

ブラウザでプレビュー

Excel2003ではブラウザでプレビューする機能がありますのでメニューバーの「ファイル」をクリックし「ブラウザでプレビュー」をクリックします。

ブラウザでどのように表示されるのか、プレビュー機能を使用して確認しておきます。この段階で修正がある場合は、修正しておきます。

修正する箇所としては、主にExcelの全体の記事の幅がWordPressの投稿記事幅になるように設定します。

Excelの幅が大きすぎてWordPressの投稿記事に入らない場合は、セルの書式設定などを利用して、Excelの列幅を小さくし全体を表示できるように調整します。

セルの書式設定方法

まず、調整したい列をクリックします。ここではA列を調整しますので「A列」をクリックします。

次にマウスの右ボタンをクリック(右クリック)し、次に「セルの書式設定」をクリックします。

 

すると下の画像のようにダイヤログボックスが表示されますので「配置」のタブから「折り返して全体を表示する」をクリックして「OK」ボタンをクリックします。

その他の方法として、文字を小さくしたり、字体を変更するのも一つの方法です。
Webページとして保存する

いよいよExcelファイルをWebページとして保存します。

メニューバーの「ファイル」をクリックし「Webページとして保存」をクリックします。

すると下の画像のような画面が表示されますので画面右上にあるツールの「」ボタンをクリックし「Webオプション」をクリックします。

すると下の画像のようにWebオプションが表示されますので、「エンコード」タブをクリックし「このドキュメント保存する形式」の「」をクリックし表示されるエンコードの中から「Unicode(UTF-8)」を選択し「OKボタンをクリックします。

次に、①保存先のフォルダを「」から選択します。

ちなみに、私はExcelMyStyleと名前を付けてフォルダを作成し保存しています。

上書き保存を「ブック全体」を選択します。

③ファイル名の拡張子に「~.html

④ファイルの種類を「」から「webページ(*htm *html)」を選択し

⑤「保存をクリックします。

すると保存したフォルダの中に下の画像のようにChromeのアイコンができます。

さぁ❢いよいよWordPressに投稿です。

もう少し頑張って~(*^^*)

Excel2016の場合

WEBページとして保存する

ファイル」タブをクリックします。

 

次に「名前を付けて保存」をクリックし、保存するフォルダを指定します。

 

 

次に、画面下にある「ツール」の「」から「webオプション」を選択します。

すると下の画像のようにWebオプションが表示されますので、「エンコード」タブをクリックし「このドキュメント保存する形式」の「」をクリックし表示されるエンコードの中から「Unicode(UTF-8)を選択し「OKボタンをクリックします。

 

ファイルの種類の「」から「webページ」を選択します。


次に、ファイル名の語尾に拡張子の「.html」を入力し、「ブック全体」を選択し「保存」をクリックします。


すると下の画像のように「Webぺージとして保存する場合、ブックの一部の機能が失われる可能性があります。この形式でブックを保存しますか?」とメッセージが表示されますので「はい」をクリックします。


すると「ファイル名.files」というフォルダとフォルダの下にHTMLファイルができます。


保存した時にフォルダが作成されずにGoogleのアイコンの付いたファイル「ファイル名.html」が1つだけ表示された場合はWordPressの投稿はExcel2003の場合を参照してください。

さぁ❢いよいよWordPressに投稿します。もう少しですよ(*^^*)

WordPressに投稿

Excel2003の場合(Google Chromeのアイコンが表示されたファイルのみの時)

先程できたChromeのアイコン をダブルクリックします。
すると下の画像のようにWebとして表示ができます。


次にこのwebページ上で右クリックし「ページのソースを表示」をクリックします。※ショートカットキーの「Ctrl+U」でもOKです。


すると下の画像のようにソースが表示されます。

上の画像と下のソースでは色は異なりますが全てのソースを下に表示しています。

表示されたソースを「Ctrl+A」で全て選択し、「Ctrl+C」でコピーします。

 

次にWordPressの「ダッシュボード」→「投稿」→「新規追加」の順にクリックします

 

投稿記事のテキストに「Ctrl+V」で貼り付けます。

 

 

これからWordPressでちょっとおまじないをします。

先程「テキスト」モードに貼り付けましたね。これを一旦「ビジュアル」モードにすると不要な文字が表示されます。でも、この不要な部分を今から削除するので大丈夫です。

 

 

それでは、もう一度「テキスト」モードしてください。

すると下のコードのように1行目~12行目が削除され、cssコードが一行にまとめられているのがわかると思います。

これで少しはいらないソースがなくなりましたね。

後2箇所不要なコードがありますので削除します。

 

削除する行としては、下のコードでは

1行目~21行目

27行目~86行目

になります。

必要となるのは、

23行目<style>~25行目</style>までがcssの部分で必要となる部分。

87行目の<table style~334行目の</table>までがhtmlで必要となるコードです。

これでWordPressの投稿を一旦保存し、プレビューしてみてください。

どうでしたか?無事成功しましたか?

Excel2016の場合(フォルダとhtmlのファイルが構成された時)

先程webページとして保存したフォルダの「.files」が付いたフォルダをダブルクリックします。

 

すると次の「filelist」「sheet001」「stylesheet」「tabstrip」という名前のファイルが4つあります。

この中でWordPressに使用するのは「sheet001」と「stylesheet」です。

まずは、「sheet001を右クリックし、表示されたメニーの中から「プログラムから開く」の「」にポンイターを当て「Google Chrome」をクリックします。

するとExcelで作成したファイルがwebで表示されのすので、表示されたwebで右クリックし「フレームのソースを表示」をクリックします。

すると下のようなソースが表示されます。

この時表示されたソースを「Ctrl+A」で全て選択し、「Ctrl+C」でコピーします。

次にWordPressの「ダッシュボード」→「投稿」→「新規追加」をクリックします。

次に「テキストモード」にし投稿記事に「Ctrl+V」で貼り付けします。

次に、一度Excelのフォルダに戻り今度は「stylesheet.css」をタブルクリックします。

すると下記のようなcssコードがメモ帳で開きます。開いたファイルを「Ctrl+A」で全て選択し先程WordPressの投稿記事に貼り付けた画面に戻ります。

WordPressに貼り付ける場所としては、下の画像のように –> の直前になりますので「display:none;}」の後で改行し空白行を追加した後、ショートカットキーの「Ctrl+V」で貼り付けます。

 

次にWordPressの投稿記事を一旦「ビジュアル」モードにします。

 

次に「テキストモードにして先程表示されてた不要な部分を削除します。

</style>~<table までがWordPressでは不要な部分になります。

これでWordPressの投稿を一旦保存し、プレビューしてみてください。

どうでしたか?無事成功しましたか?

 

WordPreesに投稿する時のまとめ

<style>~</style>=css ※フォルダで作成されたら–>の直前にcssを貼り付ける 

<table>~</table>=Excelで作った表のhtml   と覚えておくと良いでしょう。

 

長くなりましたので、OneDriveで表示する方法は次回にさせて頂きます。ご了承くださいm(_ _)m

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ