芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします.

はてなブログ(マークダウン記法)での表の挿入について参考サイトまとめ

はてなブログもといマークダウン記法での表が上手くいかず,色々試してようやく...
なので,その時に参考にしたサイトをまとめておこうかと.

参考サイト

  1. はてなブログで表を載せる方法(デザイン編) - 雪ん子’s report
  2. はてなブログで表(テーブル)を載せる方法 - 雪ん子’s report
  3. 文字サイズと行の高さを変更 - 雪ん子’s report
  4. なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー) - 主に言語とシステム開発に関して
  5. HTMLで表をつくりたい。table を作ってみる。 - CSS HTML 初心者 勉強中。
  6. ブログにtable(表)を挿入する簡単な方法 Excel→HTML変換ツールの活用 - Minimal Green
  7. markdown 表 幅 変えたい - ばいばいバイオ
  8. HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ - あなたのスイッチを押すブログ
  9. HTMLで半角・全角スペース(空白文字[ 等])を活用するための豆知識|SEOラボ
  10. a hrefダグ/リンクの挿入 - HTMLタグ早見表

以上から

[1]~[4]から, CSSデザイン例を有難~くそのままコピペさせてもらい,自身のはてなブログに適用させてもらいました. その手順として,

  1. はてなブログの管理画面の左メニューから”デザイン”を左クリックで選択
  2. スパナの形のアイコンの”カスタマイズ”を左クリック
  3. 一番下の”{}デザインCSS”を左クリック
  4. 表示された文字入力するところを左クリック
  5. すでに書いてあるものの下にコピペ
  6. 上にある”変更を保存する”をクリックでデザインが適用される

コピペとはいえ,[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>タイトル</caption>
<thead>
<tr>
<th>&nbsp;</th>
<th>時期&nbsp;&nbsp;&nbsp;</th>
<th>メイン(ヴォーカル)&nbsp;&nbsp;</th>
<th>ベース&emsp;&emsp;&emsp;</th>
<th>キーボード&emsp;</th>
<th>ドラム&emsp;&emsp;&emsp;</th>
<th>曲例1&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</th>
<th>曲例2&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</th>
</tr>
</thead>
<tbody>
<th>解凍P</th>
<td>1991~93</td>
<td><a href="https://www.youtube.com/user/hirasawasusumu" target="_blank">平沢進</a></td>
<td>秋山勝彦</td>
<td>ことぶき光</td>
<td>藤井ヤスチカ</td>
<td>speed tube</td>
<td>2D OR NOT 2D</td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow \Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow \Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow \Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow こんな感じ

タイトル
  時期    メイン(ヴォーカル)   ベース    キーボード  ドラム    曲例1        曲例2       
解凍P 1991~93 平沢進 秋山勝彦 ことぶき光 藤井ヤスチカ speed tube 2D OR NOT 2D

以上において,<table>タグ内に

  • <thread>:表のヘッダー部分
    • <tr>:行
      • <th>:セル(色付き?)
  • <tbody>:表の中身
    • <tr>:行
      • <th>:セル(色付き?)
      • <td>:セル
        • colspan="n":水平方向のセルの連結
        • rowspan="n":垂直方向のセルの連結
        • bgcolor="":セルの背景色を指定

を指定して,表を作成するって訳っスね~.
また,<div>タグでcssを指定してるわけですね~
詳しくは [5]を参考に.

www.tagindex.com