ブログに表を入れる方法 - ハイエース4人家族で車中泊〜ナローボディでも快適なバンライフを〜

ナローボディのハイエースをいろいろ工夫して、家族4人で車中泊やバンライフを楽しんでいます。

今回は、ブログの管理について少し話してみたいと思います。ブログの中に「表」を挿入する方法についてのお話しです。

表の挿入って結構難しい。。。

最初から結論を書いてしまっては身も蓋もないのですが、ブログに表を入れるのって結構難易度が高いかもしれません。
私自身、ブログを書き始めて2年ちょっと経ちますが、表の挿入にチャレンジしたのは今回が初めてでした。

ブログでは、言葉で説明するだけだとちょっと話しがこんがらがるような場合に、表があるとスムーズに説明できることがあります。読者の方にとっても、表にまとまっている方がわかりやすいこともあるので、できればブログに表を入れられたらいいなと思うことが時々あるのですが、いざブログに表を挿入しようと思うと、多少なりともHTML構文を扱わなければならないので、一気に敷居が高くなってしまうのです。

私はHTML言語はほとんど分かりません。
いつも、いろいろなサイトを見て、参考になる内容をもとに自分でいろいろ試行錯誤しながら少しずつやっているところです。
ブログに表を入れるためのHTMLはいくつかの方法があるようなのですが、ようやく私でも何とかやれそうなパターンを一つだけ使うことができるようになりました。

以下に参考として記載しておきますので、ブログに表を入れたいと思う方は、以下のHTMLをコピーして、一度自分のブログに貼り付けて、プレビューしてみてください。そうすれば、どんな表ができるのかイメージできると思います。
そうしてから、表の中の、どの文字列がどこのセルに来るのか？どこを触ればどこに反映するのか？少しずつ自分で試していくと、だんだん表の作り方が見えてくると思います。

表を挿入するためのHTML

まずは、以下のHTMLをコピー＆ペーストしてみてください。
<div class="scroll">
<table>
<thead>
<tr>
<td></td>
<th scope="col">横の項目1</th>
<th scope="col">横の項目2</th>
</tr>
</thead>
<tbody>
<tr>
<th>縦の項目1</th>
<td data-label="横の項目1" class="txt"><span>表の内容1-1</span></td>
<td data-label="横の項目2" class="price">表の内容1-2</td>
</tr>
<tr>
<th>縦の項目2</th>
<td data-label="横の項目1" class="txt">表の内容2-1</td>
<td data-label="横の項目2"class="price">表の内容2-2</td>
</tr>
<tr>
<th>縦の項目3</th>
<td data-label="横の項目1" class="txt">表の内容3-1</td>
<td data-label="横の項目2"class="price">表の内容3-2</td>
</tr>
</tbody>
</table>

</div>

これを自分の記事に貼り付けて、プレビューしてみると、以下のような感じになると思います。

	横の項目1	横の項目2
縦の項目1	表の内容1-1	表の内容1-2
縦の項目2	表の内容2-1	表の内容2-2
縦の項目3	表の内容3-1	表の内容3-2

これが第一段階です。
この表では横方向に２項目、縦方向に３項目となっていますが、これを横方向に項目を増やしたい場合は、HTMLの７行目の下に同じ構文をもう１行コピーしてやれば横方向に３項目目が作られますし、縦方向に項目を増やしたい場合は、14行目,19行目,24行目の下に同じ構文を1行追加してやれば4項目目を増やすことができます。

CSSデザインへの追加

続いて、表のデザインに関する設定のための構文を、ブログの管理画面上で設定する作業です。
私ははてなブログですから、はてなの場合を例にしますので、はてなブログの方は以下を参考にしてみてください。

はてなの管理画面、「デザイン」→「カスタマイズ（スパナのマーク）」をクリックして、「デザインCSS」を開きます。そして、下部の「CSSを記述する」の欄に以下の構文をそのままコピーして貼り付けてください。

/* 表 */
.entry-content table {
width:100%; /* 大きさはデバイスの横幅いっぱい */
}
.entry-content table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.entry-content table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: #87CEFA; /* 背景色 */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
.entry-content table td { /* 普通のセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}

/* スクロールバー */
/* 該当箇所を

で挟む */
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #87CEFA;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}

これは、前半部分が表の外見を整え、表の背景色を変えたりする構文で、後半部分は「スマホでブログを見たときに、表がレイアウトからはみ出してしまう場合、自動的に横方向にスクロールできるスクロールバーを挿入するための構文です。
これをCSS欄に記載して保存してやれば、表をブログに挿入すると自動的にそのデザインが表に適用されるようになります。
具体的なイメージとしては以下の表のような感じです。
文字列が横に長くなってしまったときは、自動的に横方向へスクロールしてくれるようになります。

	横の項目1	横の項目2
縦の項目1	表の内容1-1が横に伸びてしまった場合	表の内容1-2が横に伸びてしまった場合
縦の項目2	表の内容2-1が横に伸びてしまった場合	表の内容2-2が横に伸びてしまった場合
縦の項目3	表の内容3-1が横に伸びてしまった場合	表の内容3-2が横に伸びてしまった場合

表の中で改行する方法

横方向に文字数が増えてしまった場合、先ほどのように表をスクロールさせて表示することもできますが、もう一つ、行の途中で文字列を改行して表示するやり方もあります。
場合によっては、その方が見やすくなる場合もあると思います。
そのやり方は、それほど難しいことはなくて、改行したい文字列のところに
<br>
と挿入するだけ。
たったこれだけで文字列が途中で改行されます。
もし、<br><br>という風に<br>を２つ並べて挿入した場合には、空白行が1行挿入されて、トータル3行分使って文字列が表現されるようになります。
これも案外よく使うワザですので、覚えておいて損はないと思います。

もう一つの方法～エクセルとペイントで～

さて、こうしてHTMLを使ってブログに表を入れる方法を書いてきましたが、実はもう一つ簡単に表を挿入するやり方があります。
それはエクセルで表を作り、それをペイントソフトを使って画像に変換するやり方です。
エクセルで好きな形に表を作ったら、その範囲を選択してコピーします。
次にWindowsパソコンに標準で入っているペイントソフトを開き、先ほどコピーしたエクセルを「貼り付け」します。
あとは、ペイントソフトでこの表をjpegやpngなどの画像ファイルとして保存し、その画像をブログに写真データとして貼り付けるのです。

上の表が、そうやってエクセルとペイントを使って挿入したものです。
表の形をしていますが、ブログ上は「写真データ」になります。
こちらの場合は、パソコンで見ても、スマホで見ても自動的にサイズが画面の大きさに合わせて変動しますから、あまり細かい文字を表に入れてしまうと、スマホで見たときに文字がとても小さく見づらくなってしまうのがやや難点ですが、挿入の簡単さではこちらが断然楽です。

今回は、ブログに表を挿入するための方法について、自分自身の備忘録もかねてまとめてみました。
これからも少しでも読みやすいブログ作りを目指して励んでいきたいと思います。
どうぞよろしくお願いいたします。

最後まで読んでいただきありがとうございます。

車中泊の旅ランキングに参加しています。励みになりますので、よければクリックしていただけると嬉しい限りです。
また、皆さまがいずれかの広告を1回クリックしていただけると今後のブログ維持につながります。
ご協力ありがとうございます！

にほんブログ村

下のバナー、ken&sho...は子どもたちの名前から取っています。バナーをクリックしていただけるととてもうれしいです。

車中泊ランキング
人気ブログランキングへ