mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

MENU

はてなブログのスプレッドシートが表示されない件

ウチの場合の話ねこれ。

表を手っ取り早く記事の中で使いたいと思いまして、はてなブログで|と*を使った表の作り方があるじゃないですか。

|*テスト1|*テスト2| な感じで打ち込んでいくと表になるアレ。


こんな感じに。

テスト テスト2

それも面倒になったので、エクセル使おうかと思ったのですが、そういえばGoogleに似たようなのがあったことを思い出して今日初めて使ってみました。




スプレッドシートを記事中に


Google スプレッドシート

テストとして小さい表っぽいものを作りました。昔はブログの記事に表示させる時は、これをコピーして別の所で変換して…とかいくつか手順があったようなのですが、今はそのまま記事に貼りつけると表示されるようです。

表テスト


さっそく表示されない

そのまま貼りつけた場では見えます。結構嬉しかった。

表貼りつけ


しかし、プレビュー画面だと見えない。言葉おかしいけど、ちゃんと見えない。

プレビュー画面


ブログの中を色々いじっているせいなのかと思い、別アカウントでテストしても同じ。


テーマを変えてチャレンジ

そこで今度はテーマの何かが干渉でもしているのかと思い、適当にテーマを変えてプレビュー。

テーマ変更


今度は表示された。なぜだ。この時点でようやくCSSを覗こうとする(遅い




とりあえずCSSを覗く

その前に一度Googleにてブログで表が表示されない等で検索をかけてみると「表はdisplay:blockじゃダメだ。display:list-itemだ」なんて言われている記事が出てきて、そこで「ああ…displayか…」なんて気付くのですが…下の画像。

CSS


table-cell

まあ、この意味を調べるのは後にして、とりあえず今プレビューで表示されているのはdisplay:list-itemではなくdisplay:table-cellだってことは分かった。


表示されないテーマ

最初に表示されなかったテーマに戻して確認してみると、表示されたテーマと少し様子が違う。

こっちはdisplay: tableの上にdisplay:blockが入り込んでいた。試しにこのdisplay:blockを外すとプレビュー上で表が表示された。

CSS


記事の中にCSSを追加・編集

HTML編集の中を見ると<style>が既に使われている状態だったので、僕はそこに display: tableを入れた。これで表示しなかった表もプレビューではきちんと表示される。

HTML編集


まとめ

display: tableの件は下記のサイトが分かりやすいと思います。

on-ze.com

最後の所でdisplay: tableを入れましたが、display:table-cellにすると画面の幅に表が合わせてくれます。


cellの違い

ただし、display: tableの仕組みがあるので、お時間があればdisplay: tableについて説明しているサイトをご覧ください。