【はてな記法】簡単に表を作る方法と、表を使って画像を並列にする方法

いつも【はてな記法】でブログを書いている
║ε:)＜yunicoです、こんにちは🍀

はてなブログの記事編集モードの1つ、はてな記法で使える便利な小ワザを紹介します✎
　

超簡単な表の書き方
表を使った画像の並列方法

超簡単に表を入力する方法
- 表のデザインを変更するCSS
  - 表を使った小ワザ：画像の並列
  - 画像並列に関する補足

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

・エクセルで作った表をコピペする
・テーブルタグに変換して貼り付ける
など何種類か方法があるのですが。

ゴチャついて分かりづらいっ！(個人的に)

そんな時はバーティカルバーを使います。
バーティカルバーとは、|👈この記号のこと。

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

これを記入すると

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

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

文字の前に*(アスタリスク)をつけた部分が
自動的に太字で表示され、見出しになります。

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

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

見出しを横1列にすることも可能◎

当ブログでは
レシピの材料を書くのに多用しています。

表のデザインを変更するCSS

CSSコードの貼り付け方はこちらを見てね。
デフォルトでも分かりやすく表示されますが
見出しの背景色などを変えることも可能です。
ブログデザインに併せて変えてみるのも◎

/* 記事内の表 */
.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;
   }

これをコピペして使うと
当ブログとお揃いデザインになります🧸♡