読者です 読者をやめる 読者になる 読者になる

アサイヒロタダの垂れ流し

好奇心旺盛な20代サラリーマンが日常を垂れ流します。ライフハックとか言いたい。

はてなブログで複雑な表を作成するまでにHTML初心者の私が色々試行錯誤したこと

スポンサーリンク

こんにちわ。アサイヒロタダです。

 

私はブログを「はてなブログ」を「見たまま」編集モードで書いているような、超初心者ユーザになりますが、ある記事に表を追加しようとしたときに以下のようなことに気づきました。

 

あ、はてなブログって「見たまま」モードだとエディタに表を作成するオプションないんだ・・・・

 

大人しくTable使えという話なんですが、簡単な表ならまだしもExcelで書いたような複雑な表を作成したい場合はどうすればいいのかと悩みました。ちなみに、今回書きたかったのは下のような表。。。。

f:id:asai_hirotada:20151231191845j:plain

セルが結合していたり、一つのセルに複数の行があるような表です。

HTMLで書けばたしかに出来るとは思いますが、できれば直感的に「見たまま」作成したいものです!

 

今回は、そんな私のようにHTMLがうまく使いこなせないけど、複雑な表を作成したいという方向けの記事になります。

ほとんどの方には不要だと思いますが、私のような人が他にもいるかも!と思い、メモ代わりに書いてみました。

 

上の図のように画像にて掲載しようかなとも思いましたが、やっぱり表を作成したいと思いました。もうHTMLをしっかりと勉強するしかないのかーと諦めていたところ、下記のようなエントリを発見。

moneyreport.hatenablog.com

 

はてな記法を使うと表が簡単に作成できる!?

これを使えばTableタグとか覚えなくて良いかもーーーー!

と期待。

 

しかし、試しにやってみると、セルの結合が出来そうにない。

改めて調べてみましたが、セルの結合をする方法が見つけられない。

表組みをつくる(表組み記法) - はてなダイアリーのヘルプ

 

いやーこれはどうしましょう。お手上げかもと思いましたが、あることを思いつきました。

 

Excelで作成した表をHTMLで保存してからブラウザで表示してソースを表示すれば、それをコピペして簡単に表を掲載できるのでは!!!!!

 

試しにやってみた。(私はOpenOfficeを利用しています

f:id:asai_hirotada:20151231194254j:plain

 

作成した表をHTML形式で保存すると、ウェブブラウザで表示できるようになりますので、保存したHTMLファイルをIEFirefoxで開き、表が表示されたら右クリックをしてソースを表示させます。

 

f:id:asai_hirotada:20151231195035j:plain

するとソースが表示されますので、

f:id:asai_hirotada:20151231195411j:plain

<TABLE 〇〇〇〇〇〇〇〇>から</TABLE>までをコピーします。

コピーが完了したら「はてなブログ」エディタのHTML編集タブに移動し、表を表示したい位置にペーストしましょう。

f:id:asai_hirotada:20151231200045j:plain

 するとプレビューにて下記のような表が表示できます。

  A B C
W WA WB WC
X
Y1
Y2
Y3
Y1A
Y2A
Y3A
Y1B
Y2B
Y3B
Y1C
Y2C
Y3C
Z1
Z2
Z1A
Z2A
Z1B
Z2B
Z1C
Z2C

 

ここで、<TABLE>タグの内部が下記のようになっている場合には

<TABLE FRAME=VOID CELLSPACING=0 COLS=4 RULES=NONE BORDER=0>

このように外枠が表示されませんので、FRAME=BOXと変更して下さい。

<TABLE FRAME=BOX CELLSPACING=0 COLS=4 RULES=NONE BORDER=0>

 

  A B C
W WA WB WC
X
Y1
Y2
Y3
Y1A
Y2A
Y3A
Y1B
Y2B
Y3B
Y1C
Y2C
Y3C
Z1
Z2
Z1A
Z2A
Z1B
Z2B
Z1C
Z2C

無事、目的の表を作成することができました。

 

一度上記のような表のHTMLを生成できてしまえば、はてなブログの「見たまま」編集モードから、表内部の文字サイズや色などを編集できるので大変便利でした!!

 

以上です!

 

いかがでしょうか??

こっちの方が少し面倒くさいかもしれませんが。。。。

私のようにHTMLタグがうまく使いこなせない方に少しでもお役に立てれば幸いです!!!

 

ちゃんと今後はHTMLとかも勉強したいと思います笑