yunico's fluffy life

横着主婦の暮らしの詰め合わせ

はてな記法で超簡単に表を作る方法とデザインカスタム(コピペOK!)¦表を使った小ワザも。

記事内に商品プロモーションを含む場合があります。

私はいつも『はてな記法』でブログを書いています。今回ははてな記法で超簡単に表を作る方法をご説明します。

 

 

 

超簡単に表を入力する方法

まずはじめに、はてなブログで表を作る方法は


  • エクセルで作った表をコピペする。
  • テーブルタグに変換して書き込む。
  • バーティカルバーを使用する。

と、何種類か方法があります。

エクセルで表を作ってから作業したり、テーブルタグ(HTML)を作るのは手間に感じる人も多いのではないでしょうか。

そんな時は『バーティカルバー』を使いましょう!
めっちゃ簡単に表を作ることができます。
バーティカルバーとは、『 | 』👈この記号のことです。

|*見出し1|あああ|
|*見出し2|いいい|
|*見出し3|ううう|

見出し1 あああ
見出し2 いいい
見出し3 ううう

 

|*見出し1|*見出し2|*見出し3|
|あああ|かかか|さささ|
|いいい|ききき|ししし|

見出し1 見出し2 見出し3
あああ かかか さささ
いいい ききき ししし

 

  • 文字の前に*(アスタリスク)をつけた部分が自動で見出しとして表示されます。
  • 作りたい表をそのまま文字にするように記入できるので、表作りの手順がわかりやすいです。

 

 

デザインを変更する

CSSコードの使い方

  1. はてなブログのトップページから【デザイン】へアクセスする。
  2. 上記画像の順番に選択し、③にコードを貼り付ける。
  3. 最後に【変更を保存する】を押して完了。

デフォルトのデザインはシンプルでそのままでも十分使いやすいですが、お好みで背景色などのデザインを変えることが可能です。

/* 記事内の表 */
.entry-content table { /* 表全体 */
   font-size:14px;/* 文字サイズ */
   }
   
.entry-content table th { /* 見出し */
    text-align: center; /* 中央揃え */
    padding: 0.5em; /* 文字周りの余白 */
    border: 1px solid #555555; /* 線の太さ・種類・色コード */
    background: #FFF9F5; /* 背景色 */
    width: auto;
    }
    
.entry-content table td { /* 通常セル */
   border: 1px solid #555555; /* 線の太さ・種類・色コード */
   padding: 0.5em; /* 文字周りの余白 */
   width: auto;
   }

これをコピペして使うと以下のデザインになります。

デフォルト カスタマイズ

自由に編集して使ってみてくださいね。

 

バーティカルバーの出し方

記事の編集画面に『 | 』👈これを挿入するボタンなどがないので、手作業で書いていく必要があります。

使っているキーボードによって変わりますが「たてせん」と変換するとバーティカルバーが出てくることが多いです。キーボードの辞書登録をしておくと使いやすいですよ。

 

 

表を使った小ワザ(画像の並列)

通常、はてなブログで複数の画像を貼ると

このように表示されます。

2枚の画像の間に改行は入れていませんが、自動的に上下に分かれて表示されます。

画像をバーティカルバーで囲めば画像を並列させることが可能です。

自動的にサイズ調整されるので表を作る時同様、ただ囲むだけでOKです。

ちなみに

やろうと思えばいくらでもできます。笑

 

補足:枠線に関して

CSSコードで『表の枠色や太さ』を指定しているので画像の周りに必ず枠線が表示されます。

画像に多用する場合や、枠線が不要な場合は
【border: ~~】と書いてある2箇所を
border-style: none;に変えることで
枠線が消えますのでお試しください。


 
エクセルやHTMLを使わずに、記事の編集画面でサクッと作業できる表の作り方についてご紹介しました。

今日はそんな感じ!
それではまたね。