ブログ記事を書いていくと表をつかった内容の記事を作る機会もできると思います。
私自身がそうなのでしたが、コードやHTMLなどが全くわからなかったいろんなことが初心者でした。
どうも、さんらいずです。
Googleで調べたことを実践してみても、表のサイズがはみ出る、なんか変なコードが記事内に出てきてそれを修正したら、記事が表示されなくなるなど全然思うようにできませんでした。
もっと直感的にできる方法ないのかなと自分なりに考えていたところ、良い感じのやり方に出会ったのでまとめていきたいと思います。
今回は、はてなブログでの表（テーブル）の簡単な貼り方をCanvaを使っって直感的にする方法を紹介します。
＊Canvaを使った方法は後半に書いてありますので、ピンポイントで見たい方は目次から「【自己流】直感的にできる！Canvaを使った簡単な表の貼り方」に飛んでください。
スポンサードリンク
いろんな貼り方はあるけれども初心者には難しいことも、、
ブログを書くにあたり色んなことを学びながら書いていくわけですが、私の場合はタイピング自体も初心者でして、普通に打つことも学びながらしていました。
で、最近になってブログで表を使って表現したいなと思って色々調べてみたんですね。
はてなブログでは、表（テーブル）を挿入する方法を簡単にまとめてみました。
他にも親切に解説されているブロガーさんの記事もあり、少し高度なのもありましたが簡単のものではこのような感じになります。
この方法では一般的には、すごいメジャーで「ブログ 表」で検索すればいっぱい情報が出てきます。
ということで、次に実際に作ってみた感想を書いてみますね。
実際に利用してみた、いろいろな表の作り方
まずは「はてな記法」です。
表を作成する方法ですが、正直、慣れないとかなり時間かかるなと感じました。
注意点としては、「はてな記法」でブログを書かなければならないということです。
次にエクセルですが私はエクセル使えないし、 Mac使っているのでオフィスを使っていません。
なので代用できるGoogleの「スプレットシート 」を使ってみます。
「プレビュー」画面でこのようなな感じで表示されますが、もしかしたら縦の幅が狭いかもしれません。
その場合は下の方法で調整できますので参考にしてみてください。
ここで使用するコードはこちらになります。
width="300" height="200
参考にさせていただきましたサイトはこちらになります。
こちらの方法も便利ではありますし、スクロールされて表示されるので枠のはみ出しを気にする必要がありません。
なんかコピペして貼る方法もあるらしくこちらの方が綺麗に貼れる感じなのですが、うまくできませんでした。
続いてever noteで表を作成して貼り付ける方法です。
無料でも結構使えて（有料版もあります）使いやすいのでおすすめのテキストツールです。
こちらの方法は簡単になのですが、表の横幅が大きいを貼り付けた時にはみ出てしまいます。
それを調整するためにコードを貼り付ける必要があります。
コードの貼り付け方法はこちらに詳しく書いてある記事を載せていきますので参考にしてみてください。
はじめはこの方法で貼り付けていましたが、調整がうまくいかずに見づらくなってしまいました。
【自己流】直感的にできる！Canvaを使った簡単な表の貼り方
そこで簡単に時間かからずに貼る方法を探していて見つけた方法がありましたので書いてきたいと思います。
方法は「evernoteで作った表」を「スクショ」して「Canva」で加工して貼り付けるというものです。
それぞれ見ていきますね。
evernoteで表を作成する
まずは「evernote」を使い、上記のような方法で表を作成してます。
特に注意点はないので、思う存分、表にしてください。
スクショする
それぞれのPC方法でスクショしてください。
この時、横に長い表になった場合はなるべく正方形に近い感じにスクショの範囲を決めるとCanvaで編集しやすくなります。
ちなみにMacだと、 【シフト（↑）】＋【コマンド（⌘）】＋【５のキー】です。
PCに取り込む時も Macの場合はデスクトップ上のスクショがある状態で、【ファインダー】を表示させてそこの保存したいところにドラッグ＆ドロップすれば完了です。
この時、デスクトップからスクショが消えますがファインダーの保存されているので問題ないです。
Canvaで編集する
Canvaって？
無料でも利用できる画像編集サイトです（有料版もあり）。
細かい説明は省きますので気になるからはこちらのサイトに詳しく紹介されていますので参考にしてみてください。
今回はPC版で操作で説明します。
はじめにログインしてから、作業場面に行くまでです。
１、Canvaブラウザからログイン→【デザインを作成】→【＋カスタマイズ】
２、幅→７６０、高さ→４２８、pvはそのまま→デザインを作成
この工程で編集画面までいきますので、そこからは下のようにやっていきます。
これで編集とデバイスへのアップロードが完了しました。
かなり細かく説明してますが実際にかかる時間は慣れれば1〜２分くらいでできます。
はてな記事に貼る
後はいつもの画像を記事に貼り付けるのと同じ作業です。
１、記事編集画面のサイドバーから一番上の「写真を投稿」をクリック
２、【＋写真を投稿】→画像を選んでアップロード
３、編集画面右にあるアップロード画像をクリックして貼り付け
これで貼り付けられました。
実際に貼り付けるとこのようになります。
これだとわかりづらいかもなので、他の記事で利用していたのも貼ります。
こんな感じですね。
若干、小さくで見づらいかもしれませんがバランスは良いかと、、。
このように貼り付けることで、はみ出る問題、コードの問題が改善されました。
改善というより、画像として扱うので見出し画像を入れる感じですけど、、。
ちなみに、これは画像なので、余白に文章やイラストを加工することもできます。
こんな感じで少し可愛い感じにもできちゃいます。
見やすいく加工したい時は便利ですよね。
時間効率を考えてみたよ
体感的な作業効率は普段からツールを使用していればかなり早いと感じます。
というより私みたいなコードが苦手でエクセル使えなくて、搭載している機能での作業が精一杯なタイプはこのような直感的な方法が合ってる感じです（もっとPCをうまく使いこなしたい、、。）
この方法はサイトというかツールを２つ使うので、正直なれてないと作業効率は悪いかもしれません。
ですが、やはりツールを複数使うことを考えると普通にブログかける人はそのままエクセルやスプレットシートでの挿入が早いかもです。
まとめ
今回は表（テーブル）をはてなブログに直感的に貼り付ける簡単な方法をご紹介しました。
すこし手間がかかりますが、コードや調整が苦手な方は直感的にできるので、良いのかなと思います。
こだわり次第で画像や文字を簡単に加工できますから楽しいですよ。
他にも色んな方法がありますので、自分に合った方法を見つけるのもありだと思います。
evernoteとCanvaを利用している方やコードやエクセルが苦手な方は簡単に直感的に記事に貼り付けられるので試してみてください。
最後まで読んでいただきありがとうございます。
この記事が良いと思ったらポチッ！をしていだだけると嬉しいです！
↓
にほんブログ村