読者です 読者をやめる 読者になる 読者になる

あ、ねこさとろぐ(別館です)

彩の國の理学療法士。常々思っていること、お気に入りの物だけを広めていきたい。ガジェットやロードバイク好き、カメラはSONYのα6000 ilce-6000Yを使っています

【はてなブログ】ブログで簡単に表を挿入する方法

スポンサーリンク
 あとで読む

f:id:ptskunx:20161009162451j:plain

ブログで、オススメの物を紹介するときに、記事内に比較の表とか挿入したいなって思うときってあるんですよね。

 

他の方のブログを読んでいると、記事内に比較の表とかも入っていて、すごく見やすいなって感じてました。

 

 アレってどうやって入れているんだろうと思い調べてみた。

調べてみると、写真や画像を入れているわけではないことが分かった!

自分でも作れるんですね!

 

もちろん写真でもいいんだけど、見た目的に違うなって…笑

 

表を挿入するには、いくつか方法があるので紹介してみたいと思います。

 

「はてな記法」で表を挿入してみる

はてなブログって便利なもので、「はてな記法」というモードで表を挿入することができます。

       f:id:ptskunx:20161009111918p:plain

まずは、はてなブログで【記事を書く】を選択し、左上にある【編集】の横にある小さい矢印をクリックし【はてな記法】を選択します。

上記の写真の赤枠赤線ですね。

 

この「はてな記法」モードは注意があって、文章の作成中にモードを切り替えると、編集中の本文は削除されます。

はてな記法モードで書き始めたら、記事を書き終わるまで切り替えることは出来ないので注意が必要です。

 

実際に表の挿入するための文字入力をしていきます。

|*名前|*色|*個数|
|りんご|赤|1|
|みかん|だいだい|2|

こんな感じで入力します。

半角の縦棒「|」(キーボードの「¥」とShiftキー同時押し)で区切ることで、記事の文章中で簡単にテーブルを記述できます。頭に「*」をつけた文字列は項目名となります。

*(アスタリスク)は「け」の部分になります。

 

プレビューで確認すると、ちゃんと表が表示されました!

       f:id:ptskunx:20161009113032p:plain

ちゃんと表示されるけど、このやり方ちょっとめんどくさいんですよね。

 

ぼくは、記事作成するときはいつも「見たまま」モードで作成しているので、慣れないいのもあるのか、めんどくさいっす!

慣れたら、記号や文字を駆使して、魔術師の如く自由に表を作成できるのだが…

 

慣れる時間がもったいないかな。笑

エクセルで表を挿入してみる!

個人的にはこれが、しっくりきました!

 

だいたいのパソコンには、エクセルは搭載しているし、またはOnlineのOfficeでも使えるのでこれは便利です。

この場合は、【見たまま】モードでも可能です。

 

まずは、「エクセル」を立ち上げます。

      

    f:id:ptskunx:20161009115903p:plain

表に入れたい文字や枠組み、罫線などを入れます。

そして、表にしたい部分を選択し右クリックで赤枠の【コピー】を選択します。

 

次は、はてなブログの記事を書いているところで、右クリックし【貼り付け】をクリックするだけです。

そうすると、こんな感じで表が挿入されます。

         f:id:ptskunx:20161009114959p:plain

 

もちろん色付きでも挿入可能です。

         f:id:ptskunx:20161009115115p:plain

 

背景や色もエクセルで作成された、そのまんま挿入できるので便利です!

 

ソースコードを取得して表を挿入してみる! 

ここでは、無料ツール.netの「テーブルタグ作成ツール」を使用します。

テーブルタグ作成ツール - 無料ツール.net

 

f:id:ptskunx:20161009123353p:plain

サイトに飛ぶとこんな画面が出てきます!

列や行の追加は左上にある赤枠のところで自由に追加ができます。

あとは自由に表に入れたい文字や数字を入れます。

 

 f:id:ptskunx:20161009123940p:plain

文字を入れ終わったら、「htmlコード」を勝手に自動で作成してくれるので、それをコピーするだけです。

 

そして表を入れたい場所に【HTML編集】モードで貼り付けます。

名前 個数
りんご 1
みかん だいたい

こんな感じで表が挿入できます!

やはり、HTMLで入れるとキレイに挿入ができます!

 

メリットとしては、

エクセルがパソコンに入っていなくても、ネットにさえ繋がっていれば簡単に作成出来るところがいいですね!

さいごに

エクセルでの表の挿入もいいけど、結局は「画像」になってしまうんですよねぇ。

それならHTMLでソースコードを出して、挿入する方がスマートなのかもしれない。

 

オンラインであれば、パソコンにエクセルがなくても使用できるし、これはこれで便利!

 

エクセルで表を作るメリットとしては、色が簡単に入れられることですね。

HTMLだとカラーコードを探して入力しないといけないので一手間ですが…

この場合はケースバイケースで使っていけたらなって思います。

自由度が高いのは「エクセル」ですね。

 

表の挿入のやり方が分かったので、これからはちょっとはキレイに見せることができるかな。