Rosso Laboratory

Rosso Laboratory

主に鉄道模型シミュレーター(VRM)などの仮想鉄道アプリを扱うブログです。またHDR写真の記事も書いています。

ブログに表やリストを記載する方法

私はあまり使うことがないので正解が分からないのですが、表やリストをブログで使う方法を書いてみます。

まずリストですが、これは背景が黒くてプログラミング言語などを書く時に見やすい表示です。

  1. こちらをコピペしてみては如何?
  2. Ctrl + C & Ctrl + V

これを選択してコピーし「編集見たまま」にペーストすると使えるのですが、余計なHTMLも入ってしまいます。ですので、

  1. <ol style="list-style: decimal-leading-zero; padding-left: 24px; background-color: #000; color: #fff; font-size: 12px;">
  2. <li>こちらをコピペしてみては如何?</li>
  3. <li>Ctrl + C & Ctrl + V</li>
  4. </ol>

これを「HTML編集」にぶち込んでもらった方がスッキリすることでしょう。

 

次に表ですが、これはエクセルなどの表計算ソフトからコピペすると即出来ます。ただ

  見出し1 見出し2
項目1 データ1-1 データ1-2
項目2 データ2-1 データ2-2

こんな感じでカッコ悪いので、綺麗に作りたい人はやはりHTMLを弄った方が良いでしょうね。

  見出し1 見出し2
項目1 データ1-1 データ1-2
項目2 データ2-1 データ2-2

この表だと、

  1. <table border="2" width="450">
  2. <tbody>
  3. <tr bgcolor="gold">
  4. <td width="40%"> </td>
  5. <td width="30%">見出し1</td>
  6. <td width="30%">見出し2</td>
  7. </tr>
  8. <tr>
  9. <td bgcolor="lightyellow">項目1</td>
  10. <td>データ1-1</td>
  11. <td>データ1-2</td>
  12. </tr>
  13. <tr>
  14. <td bgcolor="lightyellow">項目2</td>
  15. <td>データ2-1</td>
  16. <td>データ2-2</td>
  17. </tr>
  18. </tbody>
  19. </table>

こんな感じですので、これを「HTML編集」にぶち込みましょう。色は「原色大辞典」が参考になります。またこれらの作業をする時にはキーボードショートカットを使うと便利ですので

Ctrl + C : 選んだ内容をクリップボードにコピーする
Ctrl + V : クリップボードの内容をペーストする
Ctrl + Y : 変更をやり直す
Ctrl + Z : 変更を元に戻す

この4つぐらいは覚えておきましょう。