StackEditの表をBloggerできれいに表示

Bloggerに記事をアップしてからいろいろネットで情報を探していたら、StackEditとBloggerにはそれぞれ癖があって、書き方に注意しないといけないことがわかってきました。ちょっとずつまとめていきます。

今回は表。表がある記事をさっきアップしたんですが、これがなんか表に見えないんですね。
だもんで、Blogger標準でどんな表がかけるのかなって、Bloggerのエディタ画面をみてみたんですけど、表を作るアイコンがない! えええ、みんなどうやって表かいてるのー? とおもってぐぐったら、htmlモードで編集するんだそうな。大変だなぁ… なんでだろう? 簡単に表の中に表をかけないようにしてるのかな…

というわけで、表のスタイルをきれいにして表っぽく見えるようにカスタマイズしてみます。

やってみる

やりたいのはStackEditでさくっと書いた表をBloggerできれいに見せたいだけなので、今回はtableに対するCSSを追記する方法を取ってみたいと思います。

調査: Bloggerではtableタグは使われている?

まずBloggerでtableタグが使われているか、確認してみます。例によって行数はカスタマイズ状況によって変わるため目安です。

1503行目: クラス reaction-buttons配下のtable

      <span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>

1949行目: bodyタグ外

      <table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + data:col.num'>
      <tbody>
      <tr>
        <td class='first columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
        </td>

        <td class='columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
        </td>

        <macro:if cond='data:col.num &gt;= 3'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num &gt;= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
          </td>
        </macro:if>
      </tr>
      </tbody>
      </table>

上記2ヶ所でtableタグが使われていることがわかりました。

調査: どうやって記事で使うtalbeタグを特定する?

すでにBloggerでtableタグが使われているので、CSSで単純にtableタグに対するスタイル指定をすると、デザインが崩れてしまいそうです。なので記事中のtalbeタグを指定して、スタイルを定義したいです。記事を表示しようとしているところは次のところのようです。

1461行目: ここが記事表示場所

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

クラスpost-bodyとクラスentry-contentが指定されているdivタグに<data:post.body/>があります。ちょっとpost-bodyにスタイルを定義してみて、この判断が正しいか確認してみます。

テンプレートのHTMLの編集で次のCSSを追記してみます。

.post-body {
 font-size: 0.5em;
}

そして画面を見てみると…

はい、ちゃんと記事の字だけが小さくなりました。この判断は正しいようです。先程のCSSは削除しておきます。でないといつまでも字がちっちゃいまま…

実践: 記事の表用のスタイルを定義する

今まで調べたことからクラスpost-bodyのtableタグのスタイルを定義する事になります。素敵なデザインがいいなと思ってぐぐったら、CSS3を使って美しく装飾されたテーブルの作り方 - WebparkでCSSのコードとサンプルが提供されていましたので、ありがたく使わせていただきます。

自分好みのカスタマイズ、ということで次のようなカスタマイズをしています。

表全体のセンタリング
行の高さを低く
セルのパディング調整
tdの文字配置はStackEditまかせ

以下、追加したCSSです。

.post-body table {
  width: auto;
  border-spacing: 0;
  font-size:14px;
  margin-left: auto;
  margin-right: auto;
}
.post-body table th {
  color: #fff;
  padding: 4px 10px;
  background: #258;
  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
  font-weight: bold;
  border-left:1px solid #258;
  border-top:1px solid #258;
  border-bottom:1px solid #258;
  line-height: 110%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(34,85,136,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.post-body table th:first-child {
  border-radius: 5px 0 0 0; 
}
.post-body table th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #258;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
.post-body table tr td {
  padding: 0px 10px 0px 10px;
  border-bottom: 1px solid #84b2e0;
  border-left: 1px solid #84b2e0;
}
.post-body table tr td:last-child {
  border-right: 1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.post-body table tr {
  background: #fff;
}
.post-body table tr:nth-child(2n+1) {
  background: #f1f6fc;
}
.post-body table tr:last-child td {
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.post-body table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
.post-body table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
.post-body table tr:hover {
  background: #bbd4ee;
  cursor:pointer;
}

確かめてみる

実際に表を書いてみて確認します。

順位	タイトル	価格
1	ＴＶアニメ「ノーゲームノーライフ」ＥＤテーマ「オラシオン」	￥1,200
2	Trident ラストフルアルバム『BLUE』	￥4,500
3	EGOIST 好きと言われた日	￥250

できた～!! StackEditでは、列名はその列のアラインメントになるんだけど、Blogger用ということで列名はセンタリングにしておきます。

どうだった?

意外と簡単にできて、嬉しかったです! 青を基調にしたデザインにしたかったので、色は参考サイトのままできて、本当によかったです。実はアート系デザイン、超苦手なんです… だれかたすけて～

参考サイト

BLOGGER に表 (テーブル) を載せる方法) (2012-12-31)
Google Driveで表を作ってBloggerに貼る方法の説明。
Blogger で表を書く方法 (2006-11-17)
Bloggerのhtmlモードから作成モードに変更して表を作成する方法の説明。今やってみたらHTMLタグを理解して足りないタグを補完してくれるけど、作成モードで表をマウスで編集することはできませんでした。残念。
CSS3を使って美しく装飾されたテーブルの作り方 (2012-07-18)
ほんとに綺麗なデザインを公開されていました。カスタマイズして使っていい、とまで言ってくれています。ありがたく使わせていただきました。感謝です!