スプレッドシートをブログに埋め込む方法！

商品の比較のブログや、
計算結果を掲載するブログを運営していると、

・ワードプレスだといい感じの表が作れなくて困っている。
・セルの結合などがうまくいかん。。
・Excelみたいな表がそのままひぱってこれたらいいのに。。

と一度は思ったことがあると思います。

そこで今回は、その希望を叶えるべく、
スプレッドシートをワードプレスにそのまま埋め込む方法を説明していきたいと思います！

他のブログにも、埋め込む方法は、書いてあると思いますが、
大きさの変更、枠線の変更方法なども説明していきたいと思いますので、
ぜひ参考にして、

読んでくれた人が少しでも理解しやすい記事が書けるようになってくださいね！！

今回できるようになるのはこんなこと！

まずは、今回できるようになることを紹介していきたいと思います。
※ゴールが違うと思った方は、すみません。コメント欄で質問していただけると助かります。。

今回できるようになることは、自分で作成したスプレッドシート(グーグルのExcel)を、
下記のような形でブログに埋め込めるようになります。

スクロールも可能ですし、
タブを切り替えることも可能です。

表示個所はA1セルからになりますので、
埋め込みたいスプレッドシートは、左上に詰めて作成するといいと思います！

それではやり方を見ていきましょう！

まずは、スプレッドシートの埋め込み方から！

まずは、スプレッドシートの埋め込み方から説明していきたいと思います！

埋め込む方法は非常に簡単で、

①ファイル→②ウェブに公開を選択。

③埋め込むを選んで、④htmlをコピー

⑤ワードプレスのブロックから、カスタムHTMLを選んで張り付け。

以上！！

たったこれだけです。

しかし、このままだと埋め込めたはいいものの、
↓こんなサイズになってしまうと思います。。。

これでは使い物にならないと思いますので、
サイズを変更していきましょう！

サイズを変更

サイズを変更するためには、CSSでスタイルをいじくる必要があります。

CSSを記載する方法はいろいろとありますが、
記事の投稿の最下段にある、カスタムCSSにスタイルを記載していきます。

今回使用した、CSSは下記の通りとなります。

iframe{
　width: 99%;
 height: 1000px;
　border: 6px solid #C0C0C0;
 border-radius: 10px 10px 10px 10px;
}

ひとまずは、そのまま張ってもらったらいい感じのものができると思いますが、
ザクッと説明していきます。

・スプレッドシートの読み込みは、iframeという機能を使っていますので、
　iframeのスタイルを変える宣言をします。

・widthで横幅を99％の大きさに設定します。

・heightで縦の大きさを指定します。500pxとしていますが、
　必要に応じて変更してください。

・borderで枠線を作成しています。太さは6pxで指定。色は、「＃C0C0C0」で灰色を指定します。

・border-radius　で丸みをつけています。左上から4つ指定しています。

以上です。
表の大きさなどに応じていろいろと値を変更していってください。

まとめ

たったこれだけで、簡単にスプレッドシートをブログに張り付けることができます。

使い方によっては
非常に見やすい表を張り付けることができると思います。

スプレッドシートで更新した内容が随時アップデートできることも一つの魅力ですので、
一度使ってみてはいかがでしょうか？

ワードプレスで表の行間を狭める方法！追加css設定方法｜COCOON,Gutenberg

ブログ初心者が、ワードプレスのGutenbergでブログを書いていく過程で、
特に一番扱いにくいのが

・表の作成

です。

セルの結合ができなかったり、背景色が決めにくかったり、様々な問題がありますが、今回はその中でも、

「行間が広く間のびして、非常に見づらい」問題について解決策を解説していこうと思います。

作業は簡単で、2ステップで解決することができるので、ぜひこの記事を読んで、行間の狭い見やすい表を作れるようになってください！

行間の設定は文字のCSSに依存する。

行間の設定は、段落などのCSSに依存しいているようで、本文の行間を広めると表の行間も広がってしまうようです。

ですので、対象の表のCSSをいじくってあげる必要があります。

そのためには、

①追加CSSに表の行間を狭くするスタイルを記載。
②対象の表の高度な設定→追加CSSクラススタイルを設定。

していく必要があります。

それでは、①から見ていきましょう。

①追加CSSを設定

まずは追加CSSを設定する必要があります。

ダッシュ-ボード→「外観」→「カスタマイズ」を選ぶと下記のような画面になり、
サイドバーの一番下に、追加CSSという欄が出てくると思います。

追加CSSをおすとCSSを記述する欄が出てくると思いますので、そこに、下記コードを打ち込んでください。

/*表の行間を狭く*/

.SEMAKU td{ 
	padding-top: 0px!important;
	padding-bottom: 0px!important;
}

/*狭く終了*/

これで事前準備終了です。

②対象の表に追加CSSを設定

次は、このCSSを実際に表に設定する必要があります。

記事の投稿に進んで、対象の表を選択→サイドバー「ブロック」の最下段「高度な設定」の追加CSSに先ほど作成した「SEMAKU」と打ち込みます。

すると、下記の通り行間の広い表が、、

行間が狭くなった表に早変わりします。これでかなり見やすくなったのではないでしょうか？

また、今回は上下ともに行間を狭くしましたが、pxを変えることで自在に操ることができますので、自由に変更ください。

/*表の行間を狭く*/

.SEMAKU td{ 
	padding-top: 5px!important;
	padding-bottom: 5px!important;
}

/*狭く終了*/

いちいち高度な設定→追加CSSに入れたくない人は、
下のコードをSEMAKUの代わりに記載していただければ、すべての表の行間が詰まりますのでお試しください。

/*表の行間を狭く*/

td{ 
	padding-top: 5px!important;
	padding-bottom: 5px!important;
}

/*狭く終了*/

まとめ

間延びした表は非常に見づらいですので、ぜひ一度設定していただけたらと思います。

また、追加CSSを利用することで、フォーマットを自由自在に変えることができますので、いろいろと試してみるといいかもしれませんね！

見出しH2

見出しH2

見出しH4

普通の文章はPになります。①

普通の文章はPになります。②

普通の文章はPになります。③

インプット

ボタン

表を読み取る

画像を読み取る