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を表示させる方法をご紹介します。

2018/5/22追記します。
Search Console モバイルフレンドリーテストでこのページはモバイル フレンドリーではありませんと怒られてしまったので、ファイルの横幅を短くし修正したものに変更しましたので現在のアドレスは「ドメイン名/excel1.html」になっています。

実際の表示例

↓ ↓

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

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

※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技術ブログへ

WPをXサーバーのmod_pagespeed設定とSSL化と.htaccessファイル編集で高速化した方法

最近サイトの表示速度がかなり遅いと思いPageSpeed Insightsで調べてみるとモバイルでは19点とかなり悲惨な結果が表示されました。

そこで、今回は2週間程色々試してみた結果プラグインを使わずXサーバーのmod_pagespeed設定&SSL化&.htaccessファイル編集で高速化を図りました。

現在の使用している環境は、

  • Xサーバー
  • WordPress4.7.4
  • テーマは Twenty Seventeen1.2を使用しています。

修正が必要とされる項目としては

  • 画像を最適化する
  • 圧縮を有効にする
  • ブラウザのキャッシュを活用する
  • サーバーの応答時間を短縮する

この4項目です。

1.Xサーバーでmod_pagespeed設定をする

 

1-1.mod_pagespeed設定とは

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能のことで以下の高速化が期待されます。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

 

1-2.mod_pagespeed設定方法

Xサーバーのmod_pagespeed設定にも記載がありますが、手順を記載しておきます。

  • Xサーバーのサーバーパネルにログイン
  • mod_pagespeed設定をクリック
  • mod_pagespeed設定を行う対象ドメインを選ぶと現在の設定が「OFF」表示されますので、ONにするをクリックしてください。

  • mod_pagespeed設定の変更が完了しましたのメッセージが表示されますので、戻るをクリックします。

  • 最後にmod_pagespeed設定が変更になっているか確認してください。

Xサーバーのmod_pagespeed設定はこれで終わりです。

参考の為、この設定で、モバイルの設定は19点→34点になりました。

次に、キャッシュ設定をします。

2.htaccess編集でキャッシュの設定をする

 

2-1.htaccess編集する前の注意事項

  • .htaccessのファイルのテキストエディタなどを使用し現在の.htaccessのバックアップを必ずとってください。参考の為に・・私がWordPressをmod_pagespeed設定をする前はこんな感じでした。
これは、WordPressのパーマリンク設定で利用しているmod_rewriteです。

2-1-1.WordPressのパーマリンク設定の mod_rewrite内容

これは利用環境でmod_rewriteが利用できるかどうかを確認しています。「もし、mod_rewriteが利用できる時は下記を実行してください。」
これはmod_rewriteの機能を有効化するという記述になります。
これはRewrite処理後にベースとなるURLの指定しています。

「%{REQUEST_FILENAME}」というものが、「!-f」という条件を満たしていれば真となります。
「!-f」の場合はファイル以外の場合は、真を返し、ファイルの場合は偽を返します。
また、先ほどと同じような記述がされていて、条件の部分のみ変更されています。
「-d」と記述されていますが、これはディレクトリかどうかの確認を行います。
これはURLが「.」であれば「/index.php」を参照するという命令です。

[L]という記述がありますが、これはLastという意味で「この記述以降の他のルールは適用しません。」という命令です。
これは最初に記途した<IfModule mod_rewrite.c>の最終を指定する記途で「ここまでですよ」と締めくくる記途になります。

ちなみにわかりやすく内容をまとめると、

  • mod_rewriteモジュールを使用出来る。
  • ファイルが存在しない。
  • ディレクトリが存在しない。

という上記にあるすべての条件に当てはまるリクエストは、すべて「/index.php」を参照して下さい。

という条件式の記途になります。

2-1-2.mod_pagespeed設定後の.htaccess

mod_pagespeed設定をした後は、ModPagespeed On が下記のように13行目に追加されていました。

  • Xサーバーでは、WordPressなどのプログラムによる記述が自動的に行われている場合がありますので、心当たりがない記述であっても不用意に削除なされないようにご注意して下さい。

    また、この機能を利用した場合は文字コードが「EUC-JP」として保存されますので.htaccessのファイルはXサーバーから直接編集することをおすすめします。

     

    2-2.Xサーバーで.htaccessを編集してキャッシュを有効にする

    .htaccessの基本的な使い方はXサーバーのマニュアルにございますのでここでは割愛します。

    .htaccessのファイルの中に記途する場所としては、

    # END WordPressのみがある場合は、その下に
    # BEGIN EWWWIOがある場合はその下に下記コードを記途します。

    注意:# BEGIN WordPress~# END WordPressの間はXサーバーで自動で書き換えられる領域になってます。

     

    3.htaccess編集でファイルを圧縮する

    下記のコードを.htaccessに記途します。

     

    ここまで進めても画像の最適化がでる場合は、

  • 保存した画像のファイル名を修正して再度アップロードしファイルを置き換える
  • グーグルマップを埋め込んでいれば、住所にリンクをつけるなどの対処をとりましょうそれでは、次にSSL設定です。

    4.XサーバーでSSLを導入したドメインをhttpsに正規化する

     

    4-1.XサーバーでSSLの申し込み

    主な手順としては、Xサーバーのサーバーパネルに「ログイン」→「SSL設定」をクリック→設定するドメインを選択し、「独自SSL設定を追加する(確定)」をクリックしてください。

    詳しい説明は、Xサーバーのマニュアルにございますので割愛します。

    4-2.待つこと約1時間

    Xサーバーに「ドメイン名」に独自SSL設定を追加しました。

    なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。

    と表示されると思います。設定が完了する前にアクセスしても以下のようなエラーメッセージが表示されます。

    4-3.WordPressの管理画面からURLを変更

    Word Psessの「ダッシユボード」の「設定」→「一般」をクリクします。次にWordPress アドレス(URL)とサイトアドレス(URL)を「http://~」 「https://~」に変更します。最後に「変更を保存」

     

    4-4.canonicalタグで「https~」を指定してURLの正規化

    URLの正規化で非常に重要な役割を果たすのが、canonicalです。

    httpsを優先してもらうため、このようにカノニカルタグでドメインを指定します。
    WordPressなどのテンプレートで指定している場合は、忘れなく変更しておきましょう。

    4-4-1.canonicalの記述方法

    canonicalはhead要素の上部で使います。body要素の中で使っても、Googleは無視して処理してくれないので注意してください。

    head要素の上部で使うことによりHTML構造をクローラーが解析する際に早い段階でクローラーがcanonicalを読んで処理してくれます。ので、下記のようにインデックスに登録させたいほうのURLを記途します。

    1.ドメイン名(○○○○○.com)を、置き換えて下さい

     

    4-5.「http://~」から「https://~」にリダイレクト設定をする

    独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されませんのでサイト内全てのページをhttpsページにリダイレクトさせる方法です。

    その場合.htaccessファイルの最上部に追記します。

    今回、SSLするに当たりon offで迷いましたのでメイビンラボさんの記事を参考に忘れないように記録しておきます。

    .htaccessだけの変更でSSL対応するにはoffにします。

     

    続いて、Xサーバーではwwwありを優先に設定されますので、wwwなしに統一します。

     

    4-6.URLのwwwありをwwwなしに統一

    1.ドメイン名(○○○○○.com)を、置き換えて下さい
    2.通常はバックスラッシュの箇所は「\」が正しいのですが
    環境の問題で「\」が「バックスラッシュ」バックスラッシュになっています。

     

    4-7..htaccessファイルをまとめるとこんな感じです。

    SSL設定後のSearch Console の設定方法

    4-8.内部リンクを修正する

    私は、自分で修正したのですが、テーター量が多いサイト等はプラグインを活用する方法もあります。その際は必ずバックアップをとっておくことを忘れずに!!

    4-8-1.内部リンクの調べ方

    ご自分のサイトの空白部分の上部で右クリックします。

    次に「ページのソースを表示」をクリックします。

    するとページソースが下の画像のように表示されますので「Ctrl+F」キーを押すと検索窓が表示されますので検索窓に修正したいURLを入力します。

    4-8-2.内部リンクを修正した場所

    • ウィジェットに記途しているアドレス
    • ダッシュボードの「外観」→「メニュー」メニュー構造の「ホーム」のカスタムリンク

    • メディアのファイル名は自動で「https://~」に変更されますが、「fancybox for wordpress」プラグインを利用してで拡大表示設定をしている画像をカスタムURLをドロップダウンメニューから選択して「更新」→メディアファイルに変更

     

  • 自分で内部リンク設定しているカスタムURL

上記の4項目を修正しました。

  • 最終結果はPC94点モバイル85点とまずまずの点数になりました