はてなブログもといマークダウン記法での表が上手くいかず,色々試してようやく...
なので,その時に参考にしたサイトをまとめておこうかと.
参考サイト
- はてなブログで表を載せる方法(デザイン編) - 雪ん子’s report
- はてなブログで表(テーブル)を載せる方法 - 雪ん子’s report
- 文字サイズと行の高さを変更 - 雪ん子’s report
- なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー) - 主に言語とシステム開発に関して
- HTMLで表をつくりたい。table を作ってみる。 - CSS HTML 初心者 勉強中。
- ブログにtable(表)を挿入する簡単な方法 Excel→HTML変換ツールの活用 - Minimal Green
- markdown 表 幅 変えたい - ばいばいバイオ
- HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ - あなたのスイッチを押すブログ
- 空白文字とは?適切な使い方など徹底解説!|SEOラボ
- https://beginners-hp.com/html-tag/a-href.html
以上から
[1]~[4]から, CSSデザイン例を有難~くそのままコピペさせてもらい,自身のはてなブログに適用させてもらいました. その手順として,
- はてなブログの管理画面の左メニューから”デザイン”を左クリックで選択
- スパナの形のアイコンの”カスタマイズ”を左クリック
- 一番下の”{}デザインCSS”を左クリック
- 表示された文字入力するところを左クリック
- すでに書いてあるものの下にコピペ
- 上にある”変更を保存する”をクリックでデザインが適用される
コピペとはいえ,[4]に書いてあることをつけ足したり, [1]に書いてある 上手くいかなかったとき用の変更をしてあるんで,一応自身の例として以下にCSS例を載せておきます.
/* 表 */ div.wrapper { /* 中身のテーブルがこのフレームの幅を超えて横にはみ出たらスクロールする */ overflow-x : scroll; width : 200px; } .entry-content table { width : auto; /* 文字に合わせて大きさを自動に */ } .entry-content table caption{ /* タイトル */ font-size : 17px; /* 文字の大きさ */ padding : 0.5px; /* 文字周りの余白 */ } .entry-content table th { /* 見出しセル */ border : 1px solid #000000; /* 線の太さ・種類・色コード */ /*background: #B0DFFF; 背景色 */ text-align : center; /* 中央揃え */ padding : 0.5em; /* 文字周りの余白 */ white-space : nowrap; /* 見出しセルの内容は改行しない */ } .entry-content table td { /* 普通のセル */ border : 1px solid #000000; /* 線の太さ・種類・色コード */ padding : 0.5em; /* 文字周りの余白 */ word-break : break-all; /* 列幅は見出しセルに合わせ,列幅に合わせて改行 */ } /* 表ここまで */ /* スクロール */ #sc01 { box-sizing: border-box; /* スクロール用の箱 */ overflow-x: scroll; /* 横スクロール */ -webkit-overflow-scrolling: touch; border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */ } /* スクロールここまで */
ほぼコピペ.なので,ブログに載っけないほうがいいかと思いましたが,まぁ多少の改変ありますし,私の場合はこうでしたよ~という
報告という体で載せることにしまんで,お願いします.
以上のCSSは,表の列幅全て,見出し行の列幅と同じになる設定なので,見出し行の列幅をあらかじめ大きく取っておく必要があり,実際には表示しない文字が欲しくなります.
そこで
を多用することに.
とはいえ,半角スペース一文字分なので,日本語一文字分埋めるには
2つ必要ってことになる.
と思いきや,どうやら[9]によると全角スペースはキーボード打ちでもいいようですね.
もしくは 
を使うか,ですね.
また,セル中にリンクを張る場合は[10]にあるように,
はてなブログのマークダウンでの書き方 [リンク先名](URL) ↓ HTMLテーブルでの書き方 <a href="URL" target="_blank">リンク先名</a>
というようにセル内(tdタグ内)に書きましょう.
これで解決かな~
HTML形式の表の書き方例)
以上で環境は整ったケド,じゃあ,どうやって表を挿入するの?っていうのを書いてませんでしたね...
なんで,書きます.以下が例です.
ちなみに,<div>
は置いといて,<table>
での表の作成は,Jupyter notebookのMarkdownでも使えたので,
Markdown環境ならどれでも使えそうですね~
<div id=sc01> <table> <caption>ポプテピピック リメイク版CV</caption> <thead> <tr> <th> </th> <th>ポプ子(Aパート)</th> <th>ピピ美(Aパート) </th> <th>ポプ子(Bパート)   </th> <th>ピピ美(Bパート) </th> </tr> </thead> <tbody> <tr> <th>12話</th> <td>こおろぎさとみ</td> <td>矢島晶子</td> <td>江原正士</td> <td>大塚芳忠</td> </tr> <tr> <th></th> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div>
こんな感じ
以上において,<table>
タグ内に
<thread>
:表のヘッダー部分<tr>
:行<th>
:セル(色付き?)
<tbody>
:表の中身<tr>
:行<th>
:セル(色付き?)<td>
:セル- colspan="n":水平方向のセルの連結
- rowspan="n":垂直方向のセルの連結
- bgcolor="":セルの背景色を指定
を指定して,表を作成するって訳っスね~.
また,<div>
タグでcssを指定してるわけですね~
詳しくは
[5]を参考に.