saimonblog

【最新版】はてなブログの表(テーブル)と図をサクッと作成・挿入する方法を解説!

f:id:retirerich:20220410164930j:plain

f:id:retirerich:20210125222531j:plain

はてなブログに図や表を挿入する方法って分かりますか?円グラフやレーダーチャートなどの比較表を使って、記事サイトを見やすくしたいので詳しく教えてほしいです。できれば、2,3分ぐらいのペースでサクッと作成する方法や使うポイントとかも教えてもらえると助かります。
こういった悩みや疑問を分かりやすく解決していきます。

 

 

この記事を読むメリット

 

はてなブログの表(テーブル)作成と挿入方法が分かる!

はてなブログの図(グラフ)作成と挿入方法が分かる!

・表についてよくある質問と答えが分かる!

・表や図(グラフ)の使い方が分かる!

 

はてなブログを3年程使っているので、色々とアドバイスできるかなと思います。

というわけで、本題について見ていきましょう。

 
 

 

はてなブログの表(テーブル)と図の作成&挿入方法!サクッとできるよ!

f:id:retirerich:20211211103105j:plain

はてなブログに表と図を作成&挿入する方法について解説していきます。5分ぐらいで読めます。

20210620142719
表や図(グラフ)を使って、文章にリズムを持たせよう!流れができてより一層読みやすくなるよ!

 

表(テーブル)作成・挿入方法

まずは、表(テーブル)をサクッっと作成する方法からお話ししていきます。

使い方をマスターできれば2分、3分で作れるようになるでしょう。是非熟読して学んでいってください。

はじめに、Google 検索などでテーブルタグ作成ツールと検索して、テーブル作成ツール-無料ツール.net というサイトを開きます。

f:id:retirerich:20211211121522j:plain

f:id:retirerich:20211211111357j:plain

開きましたら、赤枠の表(テーブル)を使ってこまかく作成していきます。

f:id:retirerich:20211211113945p:plain

f:id:retirerich:20211211111357j:plain

まずは、表の大きさからでしょう。行 の個数は緑枠列 の個数を青枠をダブルクリックして調整していきます。

f:id:retirerich:20211211114415j:plain

f:id:retirerich:20211211111357j:plain

行と列の設定が終わったら、赤枠の鉛筆アイコンをクリックして文字の入力をしていきます。表のサンプルも作成しておきました!

f:id:retirerich:20211211124612j:plain

f:id:retirerich:20211211111357j:plain

最後に、画面下部にあるテーブルタグを丸ごとコピーして、はてなブログHTML 編集にペーストすれば挿入することができます。お疲れ様でした!

f:id:retirerich:20211211125913j:plain

20210620142719
サクッと表(テーブル)作成するならこの方法でしょう。見栄えもシンプルなので使い勝手も抜群群!

 

図(グラフ)の作成・挿入方法

図(グラフ)の作成はすこし難しめでかつ時間を要するので、非常に面倒くさい作業と言えるでしょう。

しかし、文章のリズムを整えるには図(グラフ)の活用が最適でして、使わないのは勿体無いことなのです。

なので、はてなブログでも有効な図作成&挿入可能な方法についてお話ししていきます。是非習得して活用していってください。

まずは、Google 検索で Google スプレッドシート ログインと検索して、空白をクリックします。

f:id:retirerich:20211211150208j:plain

f:id:retirerich:20211211111357j:plain

赤枠のように数値を入力して、数値の範囲を指定したら青枠のグラフの挿入アイコンをクリックします。

f:id:retirerich:20211211152757j:plain

f:id:retirerich:20211211111357j:plain

図が自動で生成されますので、このみの図を赤枠から選択しなおします。僕の場合は縦棒グラフを選択しました!

f:id:retirerich:20211211154855j:plain

f:id:retirerich:20211211111357j:plain

画像右上の ・・・ から PNG 画像をダウンロードして、はてなブログの記事サイトに貼り付ければ挿入完了です。お疲れ様でした!

f:id:retirerich:20211211155009j:plain

20210620142719
円グラフや折れ線グラフ、レーダーチャートなども無料で作成することができるよ!グーグルに感謝ですね!

 

表と図の見栄え

最後に、表(テーブル)と図(グラフ)がどう表示されていて、どんな見栄えになっているのか見ていきましょう。

まずは、図(グラフ)を携帯端末とパソコン端末で見たときの見栄えから確認していきます。

f:id:retirerich:20211211211210j:plain

両方とも綺麗に写っていますね。この画像のサイズは【縦】300px【横】600px にしていますので、参考にしてみてください。

では、表(テーブル)の見栄えのほうも確認していきましょう。

f:id:retirerich:20211211214323j:plain

表(テーブル)も綺麗ですね。この表(テーブル)は画像ではなく、コードでできているので自動でサイズ調整されますよ!

20210620142719
どうでしたでしょうか?表(テーブル)と図の作成・挿入はマスターできたでしょうか?このあとは表と図に関するこまかな悩み(疑問)について回答していきますので、是非見てみてください。

 

はてなブログの表(テーブル)と図によくある質問と回答!重要事項より必ず読むべし!

f:id:retirerich:20211211161235j:plain

はてなブログの表と図についてよくある質問と回答について解説していきます。5分ぐらいで読めます

20210620142719
ここもすごく重要なので、しっかり熟読して理解を深めておきましょう。

 

表や図があるとどんなメリットとデメリットがあるの?

さてさて、表(テーブル)と図のメリット・デメリットついてお話ししていきますよ!熟読して理解を深めていきましょう。

はじめに、表(テーブル)と図のメリットから話しします。メリットは下記の図のとおりです。

  メリット
表(テーブル) ・文章の読みやすさが上がる
・データの比較がしやすい
・見栄えが整う
図(グラフ) ・大きさの違いが一目で分かる
・変化の仕方が一目で分かる
・見栄えが整う

この結果から、見栄えがととのうということが共通点だと理解できるかなと思います。

見栄えというのはブログサイトの読みやすさに直結しますので、綺麗に整えておきたいポイントの【1つ】です!

では、デメリットは一体何なのか?この質問についてもサクッとお話ししていきます。

  デメリット
表(テーブル) ・文字サイズの調整が難しい
・デザインの調整が難しい
・タグの管理が面倒
図(グラフ) ・グラフ作成するにはスキルが必要
・画像のサイズ調整が必要

つまり、デザイン作成・グラフ作成のスキルが少なからず求められるということでしょう。

デメリットは正直にいってこれだけです。でも、ノースキルの僕でも今ではサクサク扱えているので、あんまり問題ないかなと思います。

2,3ヶ月ほどあればマスターできるレベルだと思うので、時間の問題でコンプリートできるはずです。バシバシ使って、サクッと覚えてしまいましょう。

 

サイトの読み込み速度に影響あるの?

図(グラフ)や表(テーブル)を使うとブログサイトの読み込み速度に悪影響があるのではないか?と気になってしまう方もいるでしょう。

そこで、どんな影響が起こるのかについて調査してきました。下記の図を見てみてください。

  読み込み速度への影響 改善策
読み込み速度:低下 タグの圧縮
読み込み速度:低下 画像の圧縮

この結果から、タグである表(テーブル)・画像である図(グラフ)を使うと読み込み速度が低下することが分かるかなと思います。

なので、表(テーブル)と図(グラフ)を使いすぎには注意するようにしましょう。表と図は必要なときに必要な数だけ用意すればおけ!

いやいや、気にせず沢山使いたいという方もいるでしょう。そんな方には、表と図の圧縮という方法をおすすめします。

圧縮して読み込み速度を向上させるという方法でして、表は「 CSS Minify 」図は「 TinyPNG 」にて圧縮することができるので是非試してみてください。

20210620142719
CSS Minify と TinyPNG というサイトは無料で使うことができるので、ブロガー界隈に愛用されています!

 

表や図はどんなときに使えばいいの?

最後に、表(テーブル)と図(グラフ)の使うポイントについてお話ししていきます。

サイト訪問者を引き付けるためのポイントは下記のとおりです。是非意識してみてください。

・大きさを伝えたいとき

・サイトの見栄えを整えたいとき

・商品のデーターを比べたいとき

・メリットとデメリットを伝えたいとき

とくに、記事サイトの見栄えを綺麗に整えたいとき使うことが多いです。

メリットとデメリットを一目で伝えたいときにも表(テーブル)を使うことが多いです。使い方は多岐にわたる!

なので、先ほどの【4つ】のポイントに当てはまったときは、表(テーブル)や図を使って訪問者の心を掴み取っていきましょう。

20210620142719
ここまで読んでくれて有難うございました。今日学んだことをしっかりメモして、今後のブログ育成に役立てていってください。

 

まとめ

f:id:retirerich:20210407195649j:plain

最後に!簡単まとめ。

まとめ

・ブログの表(テーブル)と図(グラフ)を作成&挿入する方法は簡単!10分で理解できる!

・グーグルスプレッドシートは万能だからマスターしておこう

・画像はなるべく圧縮して使おう

…ですね! 

表(テーブル)と図(グラフ)はサイトの読みやすさを向上させて、訪問者の離脱率を低下させる効果があるので必ず取り入れるようにしましょう。


ということで、今回は以上です。お役に立てると嬉しいです。

f:id:retirerich:20210725224046j:plain