ブログ作成の備忘録

他のブログなどを参考にしながら、ぼちぼちとブログ作成していて引っかかったところなど

1. HTMLでブログを書くのがつらい

他のブログサービスだとMarkdownで書けるのに、Bloggerは、Markdownに対応していない。
HTMLを直接書くのは大変なので、なんとかMarkdownで書きたい。
調べてみるとどうも、StackEditなるものがあるらしい。
StackEditを採用

参考：Bloggerの記事をMarkdownで執筆する

2. StackEditの表示とBloggerの表示

StackEditだと綺麗に表示するのに、Bloggerだとなんだか間隔などに違和感を感じるものに。どうも、cssの設定ができていなかっただけっだた。なので、下記のようにStackEditのCSSをテンプレートに直接書いてみたら、Bloggerの表示が崩れる結果になってしまった。

StackEditのCSS<link href='https://stackedit.io/res-min/themes/base.css' rel='stylesheet'/>

どうも、いじってほしくない部分までスタイルが変更されてしまったもようなので、下記のようにcssを自作することに。

自作css.post-outer h2 {
  border-left: 15px solid black;

  padding: 7px;
}
h3 {
  font-size: 1.7em;
  border-bottom: 2px solid black;
  padding: 7px;
}
h4 {
  font-size: 1.25em;
  border-bottom: 1px solid black;
  padding: 3px;
}
h5 {
  font-size: 1em;
  border-bottom: 1px dotted black;
  padding: 1px;
}
h6 {
  font-size: .85em;
}
h3,h4,h5,h6 {
  margin: 1.5em 0;
  text-align: start;
}
.post-outer table th, .post-outer table td {
  vertical-align: top;
}

参考：CSS でカッコいい見出しをつくろう

3. ソースコードを貼り付けたい

貼り付けるソースコードに求めるもの
・色付け(Highlight)
・行番号(ただし、行番号まで選択しないもの)
・できるだけ見やすく

下記のサイトで紹介していた「SyntaxHighlighter」が無難だったので採用

参考：Bloggerでソースコードを貼り付ける（改改）

ソースコードサンプル(function() {
  alert('Hello World.');
})();

4. Bloggerのテンプレート

シンプルで無難だったのでBase WPを採用

参考：BtemplatesでダウンロードしたテンプレートをBloggerで設定する方法

参考