ExcelをWordPressなどのwebページに表示させる方法5選

WordPressやブログに表示させる方法

 

OneDrive経由で表示する

埋め込みコードを使って表示したデータは下のようにOneDrive経由で表示例

                                                 ↓ ↓ ↓

OneDriveは携帯電話、タブレット、コンピューターを使えばどのデバイスからでもアクセスでき更新もできるのでとても便利です。

OneDriveはWordPressだけではなくhtml形式で記入できるblogなどのWeb Pageであれば表示可能です。

OneDriveの登録がない方は、OneDriveを無料で新規登録しましょう。

OneDriveにアクセスして「OneDriveに移動」します。

 

OneDriveにファイルをアップロードする

PCなどの各デバイスからアップロードする。

OneDriveからご自分がアップロードしたいフォルダをクリックして開きます。ここでは「ドキュメント」をクリックします。

 

次に、OneDriveからExcelのファイルをアップロードします。

画面上部にある「アップロード」をクリックし「ファイル」を選択します。

次にご自身がPCなどに保存している「フォルダ」から「ファイル」をクリックし表示されてる画面右下にある「開く」ボタンをクリックします。

その他にも下記の通りOneDriveにアップロードしたり、保存する方法もあります。

1.Excelを保存する時にExcelの「名前を付けて保存する」の画面からOneDriveに直接保存する。

2.お使いのデバイスにOneDriveアプリがある場合は直接OneDriveに保存する。

3.お使いのデバイスからOneDriveにドラッグする。

OneDriveから埋め込みコードを取得する

次にアップロードしたファイル右上にある「をクリック」すると◯の部分にチェックマークが入りますのでその後「</>埋め込み」をクリックします。

すると、下画像のように緑点線内に埋め込みを生成する画面が表示されますので「生成」ボタンをクリックします。

次に、埋め込み生成されたコードをクリックすると下画面のようにコードの背景色が青色に変わります。青色に変わったのを確認し、ショートコードの「Ctrl+C」を使ってコピーするか、埋め込みコードが書かれているところで右クリックし、表示されたメニューの中からコピーをクリックします。

WordPressやblogに埋め込みコードを貼り付ける

さぁ❢いよいよWordPressやblogに埋め込みコードを貼り付けます

WordPressの場合

新規で作成するなら「ダッシュボード」→「投稿」→「新規」

現在投稿及び編集しているページに追加する場合は「ダッシュボード」→投稿→「投稿一覧」の中から編集したいページの「編集」をクリックし投稿したいページを表示します。

WordPress投稿画面右上にある「テキスト」をクリックし「Ctrl+C」で貼り付けます。

高さを調整したい時は、 width=”500″ height=”400″ の数値の部分を好みの大きさになるように変更します。

 

blogなどのwebページの場合

投稿画面の「テキスト」や「html」のタブをクリックして埋め込みコードを貼り付ければOKです。←htmlが記入できるところ❢と覚えておくと良いでしょう。

OneDrive経由で表示する時のまとめ

1.OneDriveに表示したいファイルをアップロードするか保存する。

2.表示したいファイルの右上にある◯をクリックしチェックをONにする。

3.OneDrive上部にあるメニューバーから「</>埋め込み」をクリックし、「生成」ボタンをクリックし、コードをコピーする。

4.ブログやWebページのhtml形式ノページに貼り付ける。

どうでしたか?無事表示できましたか?

サーバーにアップロードする方法

 

今回は、Excelをhtml形式で保存したファイルを「ドメイン名/関数一覧表.html」というアドレスにアクセスしてExcelを表示させる方法をご紹介します。

実際の表示例

↓ ↓

 ←画像にリンクして表示 したり、

関数一覧表 ←文字にリンクをして表示ができます。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の2.Excelファイルをhtml形式にして保存するで説明していますのでご覧になってください。

それでき、まず・・・

Xサーバーのログインからファイルマネジャーをクリックします。

次にユーザー名とパスワードを入力しログインをクリックします。

するとドメインを登録しているファイルが一覧で表示されますので、アップロードするドメインのファイルをクリックします。

するとxsever WebFTP というページが開き、ドメインをとったファイル名が表示されます。

 

 

すると下の画像のようにファイルの中にpubric.htmlというファイルがあります。

これがWordPressがインストールされているファイルになりますので「pubric.html」をクリックします。

 

次に表示された画面の右上にパス名が「ドメイン名pubric_html」となっているのが確認できると思います。

次にファイル選択をクリックします。

 

すると一覧で表示されるのでアップロードするファイルをクリッします。今回アップロードするのは「関数一覧表」ですので「 関数一覧表.html」をクリックします。

 

すると下の画像のようにファイルを選択の横に関数一覧.htmlと表示されているのが分かると思います。

次に、このファイルを保存した時文字コードを「UTF-8」で保存していますので文字コードを「UTF-8」にします。その後「アップロード」のボタンをクリックします。

これでサーバーにアップロードが完了できました。

後は、WordPressなどの投稿記事に画像や文字を入力しリンクを「ドメイン名/ファイル名」に設定すればOKです。

 

もし、下の画像のようにExcelをwebページとして保存した時にfilesのフォルダーとhtmlのファイルが同時にできた場合は、xサーバーのpubric_htmlの中に(pubric_htmlを開いた状態で)

1.「Excelデータベース関数・・・・files」の名前のファルダを作ります。

2.作ったfileフォルダの中にpcなどのデバイスからフォルダの中身を全てアップロードします。

3.htmlファイルは、pubric_htmlを開いた状態でアップロードします。

4.関連付けるリンクは「ドメイン名.com/Excel・・・・.html」ファイル名にします。

参考例・・・私のドメインはhttps://暮らしのハンドノート.comですので、下の画像をそままアップロードした場合は、「https://暮らしのハンドノート.com/Excelデータベース関数バージョン適用対象表.html」となりこれをリンク先に設定します。

 

補足:Excelを「.xls」や「.xlsx」のファイル形式のままアップロードするには、XサーバーでMINE設定をする必要があります。

Windows Server 2003 Service Pack 2 (SP2) 以降のバージョンでは自動的に登録されますがXサーバーはLinuxの為xサーバーのMINE設定が必要になります。

MIne設定をすることによりサーバー側で新しいファイル形式が認識されるようになります。

MINE設定とは、インターネットで使用される拡張子とファイルの種類を関連づけるもので、サーバーとファイルを関連付ける役目を果たします。

MINEタイプを設定する場合はご参考に❢

↓  ↓  ↓

MINEタイプ 拡張子 アプリケーション
application/msword .doc Microsoft Word2003以前
application/vnd.ms-excel .xls Microsoft Excel2003以前
application/vnd.ms-powerpoint .ppt Microsoft Powerpoint2003以前
application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx Microsoft Word2007以降
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx Microsoft Excel2007以降
application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx Microsoft Powerpoint2007以降

 

WordPressの投稿記事に表示させる方法

WordPressのメディアにアップロードする方法

表示方法は、サーバーにアップロードした時と同じになりますが、これはかなり簡単です。

出来上がりの表示はこんな感じです。

↓ ↓ ↓

 ←エクセルの画像をupし画像にリンク先を設定しています

データベース関数適応対象表 ←文字を入力しリンク先を設定しています。

 

まず、wordPressの「ダッシュボード」→「メディア」→「新規追加」の順にクリックすると「ドロップするかファイルを選択する」ようになってますので今回は複数のファイルをまとめてアップロードしたいので、「ドロップ」します。

アップロードするファイルは、filesのフォルダの中の3つのファイルと   アイコンの付いたhtmlファイル1つです。

まずフォルダをダブルクリックして、開きます。

すると下のようなファイルがありますので「.xml」以外のファイルを全て選択し、WordPressにアップロードします。

次に アイコンが付いたhtmlのファイルもアップロードします。

これで必要なファイルはアップロードできましたので

WordPressのダッシュボードに戻り「メディアファイル」→「ライブラリ」の順にクリックすると最後にアップロードした  アイコンのファイルが変わり<>表示されていますので「編集」をクリックします。

すると、アップロードしたファィルのURLが下の画像のように表示されますので、このURLをコピーし投稿記事のリンク先に設定します。

 

どうでしたか?案外簡単でしょ(*^^*)

 

WordPressの1記事にcssを適応させ記途する方法2選

投稿記事のみに全てのソースコードをコピペして投稿する

この記事を使った場合は下の表のようになりますがCSSを<style>~</style>で囲ってhtmlの中に入力しているので、どうやら非推進のようです。
↓↓↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE
DCOUNT
DCOUNTA
DGET
DMAX
DMIN
DPRODUCT
DSTDEV
DSTDEVP
DSUM
DVAR
DVARP
GETPIVOTDATA

この表示方法は前回投稿していますのでご覧になってください。

↓ ↓ ↓

 

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

 

WordPressのカスタムフィールドを使用し投稿する方法

以前プラグインのSimple Custom CSSを使用していて、cssの反映が上手くできなかったこともあり、Excelのcssを反映させるたびに追加cssなどを使っても・・と思い個別にcssが設定できないか検索してたところNaifixさんの「WordPressで記事ごとに個別のCSSを設定する方法3選」という記事に出会いました。

その記事の中からプラグインを使わずカスタムフィールドを利用する方法をそのまま使わさせて頂きました。Naifixさんありがとうございます\(^o^)/

header.php に追記する

header.php に書かれている <head> ~ </head> に以下のコードを追記します。

コードの意味は、「記事ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものだそうです。

カスタムフィールドを表示する

WordPressの「投稿」画面上に表示されている「表示オプション」をクリックし、「カスタムフィールド」にチェックをいれます。

すると投稿画面下にカスタムフィールドが使用できるようになっていますので「新規追加」をクリックします。

次に名前の欄に「article_css」と入力し、値の欄にCSSを入力する準備ができましたので次はCSSをこの値の欄に入れる為の準備をします。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の2.Excelファイルをhtml形式にして保存するで説明していますのでご覧になってください。

 

cssとhtmlの整理をする

まず、webページしとて保存したfilesフォルダを開くと4つのファイルができています。今から使うのは「sheet001.html」と「stylesheet.css」のファイルです。

sheet001.html』のファイルをダブルクリックで開くとwebページが開きますのでwebページ上で「右クリック」し、「フレームのソースを表示」をクリックします。

下の画像のようにこのフレームのソースが表示されますのでショートカットキーの「Ctrl+A」で全て選択し「Ctrl+C」でコピーします。

このソースをWordPressの画面に戻り投稿記事の「テキスト」に全て貼り付けます。

※TeraPadやメモ帳などに貼り付けて必要なソースだけをWordPressに貼り付けてもいいでしょう。

次に、少し下の方にいくと、</style>があります。その直前に「-->」がありましたらこの前にカーソルをあわせて不足しているCSSのコードを貼れる準備をします。

</style>はCSSコードの終わを示します。

 

次に、filesフォルダの中にある「stylesheet.css」のファイルをダブルクリックで開きます。

するとメモ帳などで開かれますので、これもショートカットキーの「Ctrl+A」で全て選択し「Ctrl+C」でコピーします。

次にWordPressの投稿画面に戻り下画面の位置「-->」の直前にカーソルをあわせた状態でCSSをショートコードの「Ctrl+V」で貼り付けます。

 

Excelのcssをカスタムフィールドにコピペする

CSSとして必要なのは<style>~</style>の間です。

先程wordpressの投稿記事に貼り付けた中からこの部分を切り取りカスタムフィールドに貼り付けます。

現在wordpressの投稿記事にあるのは下記コードですね。

CSSとして必要なのは、このコードの中で14~274行目になります。

では、必要なコードをコピーし、切り取りしカスタムフィールドに貼り付けしてみましょう。

スカタムフィードに貼り付けるのは上記コードの中から<table~</table>までのコードなので、下記コードですね。

カスタムフィールドの「」の欄に貼り付けが終わりましたら、「カスタムフィールドを追加ボタンをクリックします。

これでCSSの入力は完了です。

WordPressの投稿記事に残っているコード内で不要なコードを削除する

それでは不要なコードを削除していきましょう。

Excelの表を記載するので、htmlとして必要なのは、基本的に<table>~</table>までなのですが、その中でも不要なコードがあります。

から始まっているコードで「サポートされていない場合は次の処理をしなさい!という条件式」です。

調べてみたところJavaScriptを使用したdisplayのコードでhtmlには不要なコードなので下記条件式のコードは削除します。

次に不要なコードは、一番上の

から始まり

で終わる間までの下記コードですので、このコードも削除します。

残りは、一番最後の</body>と</html>ですのでこのコードも削除します。

※<html と<body で始まるソースは削除してますので終わりの</html></body>不用です。

後残ったコードは<table ~</table>までの下記コードですね。

 

すると下表のように表示されます。

↓ ↓ ↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE
DCOUNT
DCOUNTA
DGET
DMAX
DMIN
DPRODUCT
DSTDEV
DSTDEVP
DSUM
DVAR
DVARP
GETPIVOTDATA

どうでしたか?カスタムフィールドからCSSが設定できれば、個別に記事のスカタマイズもできるので便利ですね。

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

初心者でも簡単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」でコピーします。