サイト運営

Google スプレッドシートのワードプレスへの埋め込み、カスタマイズについて徹底解説

【徹底解説】google スプレッドシート埋め込み方法

はじめに

 当サイトは基本的には企業分析や、データを扱うネタを多く執筆していく予定なので基本はエクセルないしはGoogleスプレッドシート(以後スプシと呼ぶことにします)でデータをこねくり回してから記事を書くことが多いです。

 上記の場合、記事を書く際にすごく手間がかかるのが表の作成です。せっかくスプシでデータをまとめてもHTMLに起こすとスプシで作成した表とはかけ離れた表になってしまいます。(スプシの表を再現しようとしてもCSSだなんだでめちゃくちゃ時間がかかります。)

 こんな時に重宝しているのがスプシの埋め込みです。スプシ埋め込みのメリットとしては

 ・スプシで作成したまんまの表をページに埋め込める

 →CSS使って表の色変えたり・・なんてことはしなくていいです。

 ・スプシ上で情報を更新したらそれが記事上でも反映されて表示される

 →「あ、表の計算間違えてた。数字全部書き直しだ。。」といった場合もスプレッドシート上で修正すれば埋め込んだ記事側の内容も勝手に更新されます。

 ・勝手にレスポンシブ対応してくれてスクロールバーまでつけてくれる。

→スマホで表示した場合も勝手にスクロールバーがついてくれます。「スマホで読んだら記事から表はみ出して読めない」なんてことはありません。

といったような多大なメリットを享受することができます。(HTML関連に強い人には大したメリットではないと思いますが、)

 ただ、1点デメリットがあり、埋め込んだスプレッドシートの内容はSEOランク付けに使用されません。(SEOランクが落ちることはありませんが、上がることもありません。)表をHTMLでしっかり作った場合はSEO評価も上がるので、楽する分、SEO上での評価はされないことになります。

この長所・短所を理解した上で記事を読みすすめていただければと思います。

 それではGoogleスプレッドシートの埋め込み方法や、埋め込み時のデザイン設定方法、応用設定方法について解説していきます。

徹底活用して記事作成の効率を上げていきましょう!

スプシの埋め込み方法

 まずは基本のスプシの埋め込み方法について説明します。めっちゃ簡単です。5分で終わります。

今回埋め込む表はこんな表を埋め込んでみます。

スプシ側で設定埋め込みコードを生成する

 まずブログに埋め込みたいシートのあるスプシファイルを開きましょう。ファイルを開いたら
(1)”ファイル”タブをクリック

(2)”ウェブに公開”をクリック

手順1、2

(3)”ウェブに公開”ポップアップが出てくるので”埋め込み”タブを選択

(4)公開したいシートをプルダウンから選択(ファイルすべてを公開する場合は”ドキュメント全体”を選択)

(5)”公開”ボタンをクリック

手順3,4,5

(6)表示された埋め込みコードをコピーして、サイトに貼り付け(次セクションで説明)

手順6

上記の流れでファイルの埋め込みが完了します。

ワードプレスやサイトに埋め込みコードを貼り付ける

 次にワードプレスのぺージに先程生成したコードをコピペして表を埋め込む方法についてご説明します。まず投稿の新規追加画面に移動してください。(ビジュアルエディタ前提で話を進めます。)

新規投稿画面に移動したら、

(1)”︙”をクリックしてビジュアルエディターモードになっていることを確認

(2)ブロックをクリックして先程生成した埋め込みコードを貼り付け

(3)コードを貼り付けると”プレビュー”ボタンが出るのでクリック

(4)プレビュー画面で表示したい表が表示されていれば無事にスプシ表の埋め込み完了です。

手順1-4

表の埋め込みを行うと下記のような形式で表が表示されます。

スプシの基本設定あれこれ

 スプシの埋め込み方法を覚えたら次は埋め込んだシートのデザインを編集してみましょう。上記の方法で埋め込むだけだと表が枠から見切れていたり埋め込んだシートのシート名が表示されていたりして見栄えがイマイチだと思います。

 そこで簡単なCSSなどを追記して見栄えを自分好みにカスタマイズする方法を説明します。

枠サイズの編集、枠の削除方法

 まずは、枠サイズの編集と枠の削除方法を説明します。枠サイズの編集と削除をすることで下図のように見栄えをカスタマイズすることができます。

枠サイズの編集はSpreadsheetで生成した埋め込みコード

<iframe src=”埋め込み元リンク”></iframe>

にStyle要素

<iframe  style=”width:400px; height: 400px” src=”埋め込み元リンク”></iframe>

を追記するだけで編集可能です。

ここでwidthは横幅、heightは高さを調整でき、400pxの部分は好きな値を入れることができます。

また、枠サイズの削除については、

style=”width:400px; height: 400px”

の部分に

style=”border:0; width:400px; height: 400px”

と追記すればOKです。

 実際に枠サイズを編集してみましょう。下記の”EDIT ON CODEPEN”をクリックすると実際にHTMLコードを編集できるページにジャンプしますのでそのページで数字をいじったり枠の削除をしてみてください。

See the Pen how to change embed spreadsheet frame size by umiji (@umiji) on CodePen.

Tips:おすすめ設定値

○横幅

横幅は width:100%とするのがおすすめです。

これは簡単に言うと画面の幅いっぱいに表示するという設定になり、PCでもスマートフォンでも画面幅にフィットしたレスポンシブ表示ができるようになります。

○縦幅

 縦幅は height: calc(計算式)の設定がおすすめです。

 意味するところとしてはcalc(計算式)というエクセル関数のようなもので、例えば height:calc(5*21px)は 5 × 21px =105px分だけ縦幅を指定してくれます。

 表のサイズによって縦幅を変更するのは意外と面倒で、勘が働くようになるまでは数値を変更してはプレビューして、、という作業を繰り返すことになります。

 Spreadsheetのセル高さはデフォルトで21pxとなっており、表の行数と21pxをかけたものを指定すれば枠の高さが表サイズにピッタリ合うことになります。

むやみに高さを編集するよりも、ある程度アタリをつけて高さを設定できるのでおすすめです。

タイトル、シート名の削除

 次にタイトルとシート名を削除します。ここまで変更を加えるとサイト上で違和感なく表が表示されると思います。タイトル・シート名の削除は

<iframe src=”リンク部分;single=true&amp;widget=true&amp;headers=false”></iframe>

のwidget=true部分をchrome=falseに書き換えるだけでOKです。

URLの後ろについているこれらのコードをURLパラメータと呼びまます。各パラメ-タの役割は以下の通りです。

gid=: シート IDです。シートごとに設定されています。

range=: ウェブに公開されている行と列を表します。A1:B14 などです。このパラメータを追記すれば埋め込む範囲を指定できます。

widget=: true または false。true の場合、シートタブが下部に表示されます。

headers=: true または false。true の場合、行番号と列文字が表示されます。

chrome=: true または false。true の場合、タイトルとフッターが表示されます。

引用:Google ドキュメント、スプレッドシート、スライド、フォームを公開する – パソコン – ドキュメント エディタ ヘルプ

スプシの応用設定あれこれ

 次にスプシ埋め込み時の応用設定について説明します。あるシートのうち特定の範囲だけ埋め込みたい時、貼り付けた表のページ上での位置を中央寄せにしたい時など細かいカスタマイズ方法を説明します。

カスタマイズ後のイメージとしては下記のようになります。

See the Pen advanced setting by umiji (@umiji) on CodePen.

セル範囲を指定して埋め込む

 埋め込むシートの中のある範囲だけを表示させたい場合は先程説明したURLパラメータの

range を追記して範囲を指定します。

範囲指定の方法は、例えばシートのA1:B3範囲を表示したい場合、range=a1:b3 と追記すればOKです。 

実際にコードへ入力する場合は下記の様になります。

<iframe src=”リンク部分;single=true&amp;widget=true&amp;headers=false&amp;range=a1:b3 “></iframe>

 ちなみにrangeの前に記入されている&ampはカンマのような役割、パラメータのあとにまだパラメータを記入する場合に書きます。なのでコードの最後に書かれているパラメータの後ろには&ampは記入しなくてもOKです。

埋め込んだスプシを記事の中央に寄せる

 埋め込んだスプシは左寄せで埋め込まれます。見栄え上、埋め込んだ表を中央寄せしたい場合はのカスタマイズ方法を説明します。設定後のイメージは下記のようになります。

See the Pen advanced setting2 by umiji (@umiji) on CodePen.

設定方法は簡単で、下記のようにdiv要素でiframe要素を囲うことで実装できます。

<div style=”text-align: center;”>

<iframe 要素></iframe>

</div>

なお、text-align: centerのcenterの部分が中央寄せを指定する値になりますが、その他の指定方法も適用可能です。text-alignに適用できる値は下記リンク参照ください。

スタイルシートリファレンス

まとめ

 以上が、Googleスプレッドシートの埋め込み方法とカスタマイズ方法の説明になります。

 HTML上で表を作るのが面倒な方、きれいな表を簡単に表示したい方はぜひスプシの埋め込みを活用してみてください。

 その他にもおすすめの活用術があるよ!という方はぜひコメント欄にて教えていただけると嬉しいです。