ゲームとペットと、時々エーフィ

エーフィの人と呼ばれたい人がゲームやらペットやらの話をします。またブログに関する記事も初心者に分かりやすいように書いています。

はてなブログにExcelなしで表を挿入する方法

f:id:tuntyo:20200312200246j:plain


 

はてなブログ見やすい表を作りたいときのやり方をまとめました。

 

Excelが自分のPCに入っていなくてもGoogleスプレッドシートを使えば表を簡単に作ることができます。

 

目次

 

Googleスプレッドシートで表を作る

まずはGoogleのトップページの右上のアプリからスプレッドシートを選びます。

f:id:tuntyo:20200312200321p:plain

 

そうしたら自分の作りたい表をつくります。

f:id:tuntyo:20200312200341p:plain



 

こんな感じで作れたらそれをコピペして記事に貼り付けるだけで

 

名前 タイプ
エーフィ エスパー
ブラッキー

 

もう表の完成です。

 

ね、簡単でしょ?

 

埋め込みもできる

 

さらにGoogleスプレッドシート作成しているものを埋め込んで表示することもできます。

 

こちらは後々編集を加えたりするものに使うといいと思います。

 

こんな感じ↓

 

これのやり方はファイル>ウェブに公開>埋め込む公開を選んだら出てきたコードを記事にHTML編集で張り付けるだけです。

 

f:id:tuntyo:20200312200449p:plain

これを記事のHTML編集で張り付けるだけ

 

めちゃめちゃ簡単ですね。

 

スマホでも表示を崩れさせない方法

この記事に貼っているような小さな表ならスマホでもそのまま表示できますが、大きな表を作ったときは表示が崩れてしまう場合があります。

 

そんなときは、HTML編集で

 

<table dir="ltr" style="table-layout: fixed;~

 

 

<table dir="ltr" style="table-layout: auto;~

 

に変えておきましょう。

 

そうすれば自動的にスマホ用のページに合わせた表示になってくれます。

 

表を使って記事を読みやすく

 

なにか比較する記事やまとめを作る記事を書くときに表は必須になると思うのでこのやり方で記事を見やすくしましょう。

 

 

他のはてなブログの記事を見やすくする方法はこちら↓

 

tuntyo.hatenablog.com