はてなブログのスマホ向け表示を微調整する

f:id:xlc:20181222213423p:plain:w280:right

はてなブログが数年前に正式リリースされた時に、はてなダイアリーから乗り換えなかったのには理由があって、

  1. スマホ向けの表示が見にくい(特にソースコードの引用)
  2. トラックバック機能がない*1
  3. fotolife連携、はてなグラフ引用、キーワードクラウドなどの機能がない

のが気に入らなかったから。特にソースコードの引用は上の画面のようなありさまで、はっきり言って読めたもんじゃない。

f:id:xlc:20181222214009p:plain:w280:right

今回、はてなダイアリーのサービス終了により、はてなブログに移行せざるを得なくなったのだが、ソースコードの見にくさだけは我慢がならない。CSSを修正して右の画面のような表示にしたいのだが、はてなからアナウンスされているカスタマイズの方法は「レスポンシブデザイン」に対応したCSSを書くこと。これは「スマホ専用のCSSを適用する機能はないので1つのCSSで工夫して書いてください」と言っているに過ぎない。私もレスポンシブデザインに対応したCSSを書いて修正したのだが、はっきり言ってかなり手間がかかる。

なんとか簡単に「微調整」できる方法はないかと探していたのだが…… ありました!

f:id:xlc:20181223011834p:plain:w160:right

「管理画面」→「デザイン」→「スマートフォン」タブ→「記事」→「記事上下のカスタマイズ」で「スマートフォン用にHTMLを設定する」を選択し、記事上、記事下いずれかに style要素を使ってCSSを埋め込めばよい*2

私が埋め込んだHTML(およびCSS)は以下の通り。

<style>
.entry-content pre {
    line-height: normal;
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
}
pre.code {
    font-family: Courier, monospace;
    font-size: 14px;
}
.synComment     { color: #00c; }
.synStatement   { color: #840; }
.synIdentifier  { color: #088; }
.synType        { color: #080; }
.synConstant    { color: #c00; }
.synPreProc     { color: #c0c; }
.synSpecial     { color: #c0c; }
</style>

このCSSは、

をしています。

2018-12-27 追記

その後いろいろいじったので最終版をGistに置きました。

*1:これがないと後から記事を引用した時に手動で逆リンクを追加しないといけない

*2:Proユーザの場合は「ヘッダ」の「タイトル下」に書いた方がよさそう

*3:はてなの設定ではこれが Courier New になっていたのでフォントが「細く」て見にくかった

*4:色については好みがあるとは思うが、私はあのパステルカラーには耐えられない