はてなブログで簡単に表（テーブル）を載せる方法３つ！と注意点。工夫次第でブログはもっと良くなる

どもどもー！ブログ初心者の味方、すばるです(^^)/
最近何度か言っていますが、ブログを書くときにPV数を増やしたい。と思う方はSEOを意識して書く必要があります。


SEOとは検索エンジン最適化の事であり、いかにGoogleなどの検索エンジンでの上位表示を目指すか？の方法です。
はてなブログでブログ運営を行っていれば、同じはてなブログ運営者が記事を読んでくれる事もありますが、これだけではPV数がどんどん上がる可能性はかなり低いです。


そこで、SEO対策を行う事で検索エンジンからの読者を引っ張りPV数を増やす必要があります。
SEO対策の中には『タイトルキーワードの選定』『文字数の確保』『記事の質の向上』などが挙げられますが、今回は記事の質の向上に関わる事をお話していきます。

記事の質が悪く、読みにくく、見づらい状態だとせっかく来てくれた読者さんも読むのが辛く途中でページから離脱してしまう事があります。
そこで記事を見やすく、読みやすくする為に色々な工夫が必要になります。

文章を書くのが上手な人であれば、文字だけで面白く読みやすい組み立てが出来るのかもしれませんが、私は上手ではありませんし私と同じ人もいると思います。


そんな人はどんな工夫が出来るか？
と考えたら『記号』『文字の装飾』『グラブ』『囲い』などを使うのが手っ取り早く効果的です。

以前には…

www.subablobike.jp

 ▲囲いの付け方を書いたページと

www.subablobike.jp

 ▲文字の装飾などをスピーディに行う事が出来るショートカットキーを紹介しました。


両方とも記事を書く上では役に立つ事なので、気になったら一緒に読んでみてください。

そして今回紹介するのは『表（テーブル）』を記事中に載せる方法です。
色々なデータを比較する時や整理して表示するのに便利な表ですが、色々な方法があるようなので、私が調べた結果の３つの方法を紹介していきます。

 はてなブログでの表の書き方

はてなブログでの表の書き方は「書き方のモードによって違う書き方」「外部の力を借りる書き方」とあります。


今回は両方紹介するので自分の書きやすい方法や、スピーディな方法、自分に合っている方法を選んで使ってみてください。


中にはあなたの使用しているテーマデザインでは上手くいかない場合のものもあるので、そこは注意点として書いていきますので、注意点を飛ばさないように読んで下さい。

はてな表記モードでの表の書き方

はてなブログではブログ記事の書き方が『みたままモード』『はてな表記モード』『Marldownモード』の３つの書き方を設定する事が出来ます。


記事を書く前からこの表記を設定しておく必要があり、記事作成中に他のモードに変更すると書いていた途中の文は全て消去されてしまうので、最初から設定しておきましょう。

---

▼まず書き方の例がコチラになります

|*題目を|*つける|*ところ|
|はてな|ブログ|表づくり|
|簡単に|できる|３つの方法|

---

はてな表記モードでこの様に書くと…

▲こんな表が出来上がります。


ポイントとしては「｜」←この縦棒が左右の仕切りとなります。
出来上がった表を見てもらって分かる通り「｜」←この縦棒の通りに仕切られていますね。


もう一つのポイントとしては「題目を｜つける｜ところ」のそれぞれの頭に「*」小さいマークが付いていると思います。赤色の記号ですが、赤色は見やすくする為に付けた色なので打ち込んだままの黒色で大丈夫です。
これを付ける事により、題目として認識してもらえて背景色や文字の太さが変わった部分になります。

空白部分を作りたい場合

表無いに文字を入れない「空白部分」を作りたい場合は…

---

▼このようにしたらOK

|*題目を|*つける|*ところ|
|はてな|ブログ|表づくり|
|簡単に||３つの方法|

※そのままコピペして使用可能です

---

「｜」←縦棒と縦棒の間に文字を入れなければ…

▲文字の無い空白の部分が出来上がります。

はてな表記モードでの注意点

私はPC画面用のブログデザインテーマに『まてりあるぽっぷ』というテーマを使っています。
このテーマの場合、プレビュー画面で表が出来ているかを確認した所、表無いの仕切り線が消えた状態で表示されていました。


スマホ用はスマホ用のデザインを使用しているので、その影響は無くちゃんと仕切り線の付いた表が出来上がりました。


使用しているデザインテーマによっては上手く表が表示されない場合があるので、表を載せる場合はしっかりとプレビュー画面で確認するようにしてください。

HTML編集画面での書き方

私の様に『みたままモード』で記事を書いている人は記事編集ページタブに「編集見たまま」「HTML編集」「プレビュー」の３つのタブがあると思います。
その中のHTML編集の所で書く方法を紹介します。

---

▼まず書き方がこちらになります

<table>
<caption>はてなブログ表の書き方</caption>
<tr>
<th>題目を</th>
<th>つける</th>
<th>ところ</th>
</tr>
<tr>
<td>はてな</td>
<td><div align="right">ブログ</div></td>
<td ><div align="right">表づくり</div></td>
</tr>
<tr>
<td>簡単に</td>
<td><div align="right">できる</div></td>
<td ><div align="right">３つの方法</div></td>
</tr>
</table>

※そのままコピペして使用可能です

---

色を付けたコードを説明していくと…

• <table></table>
  このコードに間にある部分が表になります。
• <caption></caption>
  このコードに挟まれた部分が表のタイトルになります。
  これを省いてタイトル無しの表作成も可能です。
• <tr></tr>
  このコードの間にある文字が1行で表示されます。
• <th></th>
  このコードの間にある文字が見出しになります。
• <td></td>
  このコードの間にある文字が普通のセルになります。
• <div align="right"></div>
  このコードの間にある文字は右詰めになります。

▼出来た表がコチラ

 空白の部分の作り方は、文字を入れないだけでOKです。

HTML編集画面での注意点

はてな表記モードで説明した注意点と同じです。

使用しているデザインテーマによっては上手く表が表示されない場合があるので、表を載せる場合はしっかりとプレビュー画面で確認するようにしてください。

テーブルタグ作成ツールを使う（★おすすめ★）

無料で使えるテーブルタグ作成ツールページに飛びます。

→《ここをクリック》←※お気に入り登録推奨

すると…

▲かなり見にくいですが、こんなページに飛びます。（赤枠は私が付けました）
赤枠内に表に入れたい文字を入れていきましょう。

▲文字を入れたら下にスクロールしましょう。

▲青い囲いが完成状態の表のプレビュー
赤い枠が貼り付ける為に生成されたHTMLコードになります。
HTML編集画面に赤枠内のコードを張り付ければ、表作成完了です。

▼これが完成した表になります。

題目を	付ける	ところ
はてな	ブログ	表づくり
簡単に	出来る	３つの方法

テーブルタグ作成ツールは、ツールサイトに飛んでもらってお試し操作をしてもらうだけでも分かる通り、操作がとても簡単です。


そして私自身にとって一番助かった事は、PC画面プレビューをしても、スマホ画面プレビューをしてもしっかりと仕切り線が存在して表になっていた事です。

テーマデザインによっては仕切り線が消えてしまう場合でも、テーブルタグ作成ツールを使用して作った表は問題なかったんです。

私の一押しはテーブルタグ作成ツール

テーブルタグ作成ツールはとても操作がとても簡単で、ほとんど表内に入れたい文字を打ち込むだけの様な簡単操作です。

• 速い
• 簡単
• 綺麗

この３つのメリットを持ったツールです。
『はてな表記モード』や『HTML編集画面』は表のセルが増えれば増える程、大変度合いが激増していきますが、テーブルタグ作成ツールは量が増えても速く、簡単で、綺麗に作る事が出来ます。

私自身テーブルタグ作成ツールを発見するまではHTML編集画面で「PCで読んでくれている人…仕切り線無くてごめんなさい」と思いながら表を作成していました。


でもこのツールを見つけてからはこれ以外ありえんわｗなんて思いました。
とてもおすすめのツールなので、是非使ってみてください。

おわりに（まとめ）

ブログの記事を書く際には、色々な「あったらいいな…」があると思います。

• ブログを速くかける為の方法
• ブログを綺麗に見せる為の方法
• 使いやすいツール
• ネタ発掘に便利なもの

私がよく思う「あったらいいな…」は

• ブログにあてる時間
• ネタ排出装置
• ブログを書くのに便利な機械
  
  

の３点なのですが、後者２つは未来道具的な感覚で考えていた事なのでどうでも良いとしてｗ
1番目の「時間」が本当に死活問題で、いかに速くブログを書くかというのが重視されています。
メインの仕事がサラリーマンなので、次の日の仕事に響いてしまう時間まで起きてられないし…かと言って書き出したら終わるまでは一瞬というわけでも無いので、便利なツールなどがあると便利なんですね(;´∀｀)


ブログには色々な編集方法や記述方法がありますが、自分に合う物を取捨選択するのも大切な事です。
自分のブログ運営がより快適になるように、方法やツールはしっかりと取捨選択していきましょう。

++++このブログはシェアフリーです++++

↓よかったらポチっとお願いします( *´艸｀)

にほんブログ村