hexoのテーマを少し書き換えた

私は、標準テーマの「landscape」をほとんどそのまんま使っているのですが、
マークダウンの書き方をまとめていたとき、
標準テーマでの引用部分のスタイルが気に入らなかったので直してみました。
引用は引用っぽい表示にしたかったのです。

結果から、
これを

こうした

目次

スタイルの書き換え

今回書き換えたのは、1 ファイル。
themes/landscape/source/css/_partial/article.styl
stylus という CSS プリプロセッサ形式のファイル。
80 行目あたりの部分

変更前

1
2
3
4
5
6
blockquote
  font-family: font-serif
  font-size: 1.4em
  margin: line-height 20px
  text-align: center

変更後

1
2
3
4
5
6
7
8
9
10
11
12
blockquote
  font-family: font-serif
  font-size: 0.9em
  margin: line-height 14px
  text-align: left
  border-left: 5px solid color-border
  padding-left: 10px
  p
    &:before
      content: "「"
    &:after
      content: "」"

なぜここを書き換えたか？

引用をマークダウンで以下のように記載すると

1
> 吾輩は猫である。名前はまだ無い。

landscape テーマでは、以下のように html は出力される。

1
2
3
<blockquote>
  <p>吾輩は猫である。名前はまだ無い。</p>
</blockquote>

ということは、blockquote 要素自体と blockquote タグで囲まれた p 要素のスタイルを
直せばよさそうだとわかります。

具体的には 4 点修正・追加しました。

  • 文字サイズをやや小さく
  • 文字列は左寄せ
  • 左側に引用とわかるような縦線の付与
  • 引用部分前後を「と」で囲む

これで、意図したような表現にできました。

スタイルの修正の仕方も分かったので、
そのうち html ジェネレータも少し手を加えてみたいところです。

ではでは