2018-05-05T01:48:03Z

ブログ作成の備忘録

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

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

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

2. StackEditの表示とBloggerの表示

StackEditだと綺麗に表示するのに、Bloggerだとなんだか間隔などに違和感を感じるものに。どうも、cssの設定ができていなかっただけっだた。
なので、下記のようにStackEditのCSSをテンプレートに直接書いてみたら、Bloggerの表示が崩れる結果になってしまった。
<link href='https://stackedit.io/res-min/themes/base.css' rel='stylesheet'/>
どうも、いじってほしくない部分までスタイルが変更されてしまったもようなので、下記のように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で設定する方法

参考

 コメントを書く