Bloggerの記事をAtom/Markdownで作成するための準備（表、コード記述編）

(2017.05.28にコードブロックにSyntax Highlighterを適用する場合について更新)

この記事のまとめ

• Bloggerで使用する表とコード記述用のCSSを作成する
• BloggerにCSSを追加する

背景

ここで述べた通り、Bloggerの記事はAtomを使い、Markdown形式で書いて、プレビュー画面からHTMLとしてコピーして、Bloggerに貼り付けて作っております。 しかし、これの方法で記事を作っても、見栄えがAtomのプレビューのように思うようにうまくいかないことがありますので、自分好みの見栄えになるようにしたいと思います。 今回は表とコード記述についてまとめました。

表のCSSを作成

表をMarkdown形式で記述すると下記の通りです。

| 項目1 | 項目2 |
| ----- | ----- |
| 要素1 | 要素2 |

これをAtomでHTML出力すると下記のようになります。

<table>
  <thead>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>要素1</td>
      <td>要素2</td>
    </tr>
  </tbody>
</table>

見ての通り、何の飾りっ気もないHTMLです。したがって、CSSで<table>タグごとスタイルを変更することを考えます。

CSSを作るに当たってどんな表の見栄えにしようか考えていると”表（テーブル）は罫線が少ないほど美しい‽”なんて記事がありました。 「これはたしかに」と思い、これを参考に横の罫線のみの表のスタイルにしようかと思います。

これをもとに作成したCSSは下記の通りです。

table {
   border-collapse: collapse;
   /* border: 2px solid gray; /* 外側の枠線   */
   padding 15px;              /* セル端の余白 */
}
table td {
   border-width: 1px 0px;  /* 上下だけ引く   */
   border-color: gray;     /* 線色：灰色     */
   border-style: solid;    /* 線種：実線     */
   padding: 5px;           /* セル内側の余白 */
}

表のイメージはこんな感じです。

header 1	header 2
element 1	element 2

外側の枠線くらいあってもいいかと思いましたが、よりシンプルにすべくそれも消しています（コメントアウトだけしていつでも変えられるようにしています）。

コード記述用のCSSを作成

次にコード記述について考えますが、コードブロックとして記述する方法とインラインにコードを記述する方法があります。

コードブロック挿入

コードブロック挿入をMarkdown形式で記述すると下記のとおりです。

```　
コードブロックはバッククオートを3つ並べて挟みます
```　

これをAtomでHTML出力すると下記のようになります。

<pre class="editor-colors lang-text">
  <div class="line">
    <span class="text plain">
      <span class="meta paragraph text">
        <span>
          コード行はこうなります
        </span>
      </span>
    </span>
  </div>
</pre>

Atomでのコードブロックの記述は、さまざまなclassが用いられているようです。すべてBloggerには定義されていないclassのため、いずれかのclassを定義して、スタイルを作ってやります。今回コードブロック用に用意したCSSは下記のとおりです。

.lang-text {
    display: inline-block; /* 改行を伴わないようにinline要素にする */
    padding: .25em .5em;
    background-color: rgba(0, 0, 0, 0.07);
    color: #555;
    font-weight: normal;
    font-size: 0.8em;
    line-height: 1.2;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, "Osaka−等幅","ＭＳ ゴシック", monospace;
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;    /* 横スクロールバーを必要に応じて表示 */
    overflow-y: hidden;
}

コードブロック部にSyntax Highlighterを適用したい場合は、別の記事を書いておりますのでこちらをご参照ください。

インライン挿入

インラインでのコード記述をMarkdown形式で記述すると下記のとおりです。

インラインの`コード記述`はシングルバッククオートで囲みます

これをAtomでHTML出力すると下記のようになります。

<p>
  インラインの<code>コード記述</code>はシングルバッククオートで囲みます
</p>

インラインのコード記述は、<code>タグで囲まれます。そのため、<code>タグ用に用意したCSSは下記のとおりです。

code {
    background-color: rgba(0, 0, 0, 0.07);
    color: #555;
    font-weight: bold;
    font-size: 1.0em;
    line-height: 1.2;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, "Osaka−等幅","ＭＳ ゴシック", monospace;
}

BloggerにCSSを追加する

BloggerにCSSを追加する方法は、Bloggerの管理画面からテンプレート→カスタマイズ→上級者向け→CSSを追加で追加できます。そこに上記のCSSを記入します。

これであとはAtomでMarkdownから生成したHTMLをBloggerに貼り付ければ思い通りの見栄えになっているはずです。

表とコード記述に関しては以上です。次は数式について記事を書きます。
最後まで読んでいただきありがとうございます。

　← 気に入っていただければ応援ポチをお願いします！