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 という名前のカスタムフィールドに書かれた値を出力しますよ」というものだそうです。

2021.1.23追記します。
header.phpの上記コードに修正点がありました。
コードは以下のコードを参照してください。

詳しくはこちらで説明しています
↓     ↓

WordPressで「Warning: Use of undefined constant article_css – assumed ‘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へ

初心者でも簡単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技術ブログへ

Microsoft Excel Version別関数適応対象一覧表をExcelのファイルでWordPressに表示してみました!

当ページでは、下記バージョンを抜粋してMicrosoft社のサポートページ及びExcel2003を参照し関数の適用対象表を作成しております。

Windows版・・・ Excle2016,Excel2013,Excel2010,Excel2007,Excel2003

Macintosh版・・・ Excel 2016 for Mac,Excel for Mac 2011

Excel Online

Excel for iPad

Excel for iPhone

Excel for Android タブレット

Excel for Android フォン

Excel Mobile

Excel Starter 2010

 

尚、Excel for Android タブレット,Excel for Android フォンは全て適用が一緒でしたのでExcelのBook内ではAndroid のみで表示しております。

名前が変更された統計関数以外は、Excelで作ったデータを表示しておりますのでBook内はExcelと同等にカーソルを移動させてご覧になってください。

名前が変更された統計関数は、Excelのcssとhtmlで表示してます。

 

Excel関数適用対象表(機能別)

 

データベース関数

 

日付と時刻の関数

 

エンジニアリング関数

 

財務関数

 

情報関数

 

論理関数

 

検索/行列関数

数学/三角関数

 

統計関数

関数名が赤文字で表示されている関数はExcel2010以降名前が変更された関数名で青文字で表示されている関数はExcel2016以降に名前が変更された関数名です。
詳細は、名前が変更された統計関数で(旧)→(新)一覧で表示していますので参考にしてください。

文字列操作関数

 

キュープ関数適用対象一覧

 

Web関数適用対象一覧

 

Excel関数適用対象表(アルファベット順)

 

関数一覧

全ての関数一覧を見るには下のエクセルアイコンをクリックして下さい。

5/22追記します。

モバイルでは、表示できない為、「.xls」形式でのダウンロードに変更させていただきました。

 

名前が変更された統計関数

 

互換性のある関数名(旧) 変更された関数名() 新Ver.
BETADIST  BETA.DIST  2010
BETAINV  BETA.INV  2010
BINOMDIST  BINOM.DIST  2010
CHIDIST  CHISQ.DIST.RT  2010
CHIINV  CHISQ.INV.RT  2010
CHITEST  CHISQ.TEST  2010
CONFIDENCE  CONFIDENCE.NORM  2010
COVAR  COVARIANCE.P  2010
CRITBINOM  BINOM.INV  2010
EXPONDIST  EXPON.DIST  2010
FDIST  F.DIST.RT  2010
FINV  F.INV.RT  2010
FORECAST FORECAST.LINEAR 2016
FTEST  F.TEST  2010
GAMMADIST  GAMMA.DIST  2010
GAMMAINV  GAMMA.INV  2010
HYPGEOMDIST  HYPGEOM.DIST  2010
LOGINV  LOGNORM.INV  2010
LOGNORMDIST  LOGNORM.DIST  2010
MODE  MODE.SNGL  2010
NEGBINOMDIST  NEGBINOM.DIST  2010
NORMDIST  NORM.DIST  2010
NORMINV  NORM.INV  2010
NORMSDIST  NORM.S.DIST  2010
NORMSINV  NORM.S.INV  2010
PERCENTILE  PERCENTILE.INC  2010
PERCENTRANK  PERCENTRANK.INC  2010
POISSON  POISSON.DIST  2010
QUARTILE  QUARTILE.INC  2010
RANK  RANK.EQ  2010
STDEV  STDEV.S  2010
STDEVP  STDEV.P  2010
TDIST  T.DIST.2T  2010
TDIST  T.DIST.RT  2010
TINV  T.INV.2T  2010
TTEST  T.TEST  2010
VAR  VAR.S  2010
VARP  VAR.P  2010
WEIBULL  WEIBULL.DIST  2010
ZTEST  Z.TEST  2010

 

今回の感想と次回の記事

どうですか?どちらの表が見やすいですかね?

Excelの関数をまとめるのに約半月もかかってしまいました(^^ゞ←全く何してるんだか・・・って感じですよね(笑)

当初はプラグインを使って編集したりしてたのですが・・長くなればなるほどプラグインを使っても大変ですし、Excelだとデータを並べ替えも一行ごとに色付けするのもMOD関数などを利用したら後で行追加も書式が崩れることなくきちんと色づけされますので便利ですよね。

そこで、ExcelファイルをWordPsessで表示できないか?と試行錯誤してやっとできました!(^^)!

次回は、今回ExcelファイルをWordPressに表示した方法を2通り説明したいと思います!!

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

WPにhtmlで文字に蛍光ペンみたいなマーカーを引く方法

WordPressの標準機能ではない蛍光ペンみたいなマーカーを投稿記事のhtmlに記途するだけで引けますので色々試してみてくださいね。

太さを変えたいときは%を変更して、色はhtmlでお好きな色に変更してみてください。

線の太さ3種類と色は9色用意してみました!

マーカーの高さを変えたパターン

文字全部にピンクのマーカー

 

上半分薄くなったピンクのマーカー

 

文字半分にピンクのマーカー

 

文字の下にピンクのマーカー

マーカーの色を変えたパターン

赤のマーカー

 

紫のマーカー

 

水色のマーカー

 

青のマーカー

 

黄色のマーカー

 

オレンジのマーカー

 

緑のマーカー

 

茶のマーカー

初心者でも簡単!Twenty Seventeenで画像の上下に文字を重ねて表示する方法をわかり易く説明してみた。No.2

前回の引き続きで今回はCSSのタグなどの使い方を説明したいと思います。

 

前回のHTMLのおさらいから

 

HTMLのおさらい

 

最初に指定している<div>から最後の</div>までの間をひとつのかたまりとして表してましたね。

それで、CSSで読み込むクラス名を

  1. .msample  (クラス名)
  2. .msample1 (クラス名)
  3. .msample2   (クラス名)
  4. .msmple img (クラス名msampleの中にあるimg要素に適用されます。)

 クラス名の前には「.」を入れる。 クラス名と要素の間は半角スペースを入れる

下記画像を合わせて参考にしてください。

 

このように指定しスタイリストシートで読み込み可能なようにしてました。

それでは、今回の本題のCSSの記途の仕方について説明します。

最初に指定した.msamplはcssで読み込みを可能にするクラス名でしたね。

 

CSSの基本

 

.msample { ←この括弧は ” { ” 開始を宣言するもので、こから.mampleに対しては、次のプロパティ(値)を適用しますよ!と宣言しており、最後にプロパティ(値)を宣言し終えた後にはここで終わりですよ!!と ” } “で宣言します。

下記画像を合わせて参考にして下さい。↓

.msample

.msampleはクラス名でしたね最初のおおもととなるクラス名とプロパティ(値)を宣言するために指定します。「.mampleにはこの値を適用すると宣言をします。」

 

float:none;

 

float:none;は、floatを指定しない。ときに使います。

float:プロパティは、指定された要素を左または右に寄せて配置する際に使用し、 後に続く内容は、その反対側に回り込みを設定するプロパティです。

今回は配置を指定しないのでfloat:none;で指定しています。

 

clear:both;

 

左寄せ・右寄せされた全ての要素に対する回り込みを解除するときに使います。

何故この設定が必要か?といいますと、画像や文字などを使って、CSSなどの読み込みに設定していたりすると、必然と回り込んだりしているときがあるので、設定をする前にこの設定をすることで、新たに、CSSの適用がスムーズにできるよう設定しています。

 

position:relative;

 

ポジションを指定することにより画像などの開始位置が指定できるプロパティで、相対位置指定で、基準が「現在の位置」が基準となります。

これに対し、absoluteは絶対的な位置指定です。そのため他の要素があろうと表示位置は親要素にぴったりくっき重なって表示されます。

この特性を生かして親要素をrelativeを設定しています。

width& height:

これは、説明するまでもなく、widthは、幅320px でheightは240pxで表示するように設定しました。

この幅と高さは、単純に4:3の比率で設定しているだけで私のサイドバーの幅に合うように設定していますので、お好みに合わせて設定してください。

次に.msample1のクラス名の内容を説明します。

.msample1

この.msample1は「観光スポット」を表示するためのクラス名です。

position:absolute;

まずは、この「観光スポット」の文字をpositionプロパティを使って親要素の「relative」にぴったりとくっつけて表示するために「absolute」を使って絶対位置を指定します。「top:0px;」「left:0px;」

内容は、親要素の一番上の一番左を基点として表示するように指定しています。

「posisition」と「top」・「left」はセットで使用します。

 

display:inline-block;

ここでなぜ「display:inline-block;」を指定するのかといいますと、

横に並ぶ要素。

幅や高さの指定ができる。

marginやpaddingを指定できる。

上記3点から選びました。

続いて、文字の色の指定をします。

 

color:fff;

文字の背景をブルー系の色で表示していますので、文字の色を白で表示するように「color:#fff;」を指定しています。

 

 line-height:

line-heightプロパティは、通常、行の高さを指定する際に使用しますが、今回は、文字の上下に適度な余白が欲しかったのでt設定しています。
「1.5em」=「150%」=「1.5」です。
この数値は、「font-size: 15px」 に対して適用されます。

 

padding:

padding: 0 5px 0 5px;」は文字を表示する開始位置と終わりの左右に5pxの余白を指定しています。
「上」「右」「下」「左」の順になります。
ここで指定したpaddigの詳細は下記画像を参照してください。
paddigを指定しない場合は下の画像のようになります。

 

background:

「background: rgba(66, 133, 244, 0.9);」は、文字の背景をブルー系の色に指定し、透明度を0.9で指定しています。

 

.msample2

この.msample2は「つつじ寺」を表示するためのクラス名です。
ここでも.msample1と同様に「position:absolute;」を指定しますが今回は、一番下の左に合わせて表示しますので「bottom:1.7em」と「left:0px;」と指定しています。
ここで「bottom:1.7em」になるのか?といいますとp要素とp要素の間にできる空白行の調整部分になります。
以下は、実際に上記を指定して表示しているのですが、p要素とp要素の間には空白ができてますね。↓

ちなみに、relativeはline-heightを1.5emで指定し、 absoluteは2.5emで指定しているので行間の高さの違いもはっきりわかると思います。

実際の表示

これはrelativeのp要素です

これはabsoluteのp要素です

 

 

bottomを指定しない場合の表示は、下の画像のようにp要素の空白行が挿入されで位置がずれ文字の部分画像の下よりはみ出してしまいます。

次につつじ寺の背景には、幅320pxを適用することにより画像の横幅とぴったりなのがわかると思います。

 

text-align:center

これは文字を中央に表示するときに使うタグです。

つつじ寺の文字が中央に表示されてますね。

つつじ寺の文字の背景に対しては文字間を2.5で表示しフォントサイズも少し大きめの18pxで指定しています。

それから、最後にimgの幅の設定をします。

 

.msample img

「.msample img」にwidth(幅)をmsampleと同じ320pxで指定します。