はてなブログテーマ作成メモ
当ブログのデザインをリニューアルしたので、おぼえがきをメモ。
公式ドキュメント
はてなブログテーマ制作の手引き - ヘルプ - はてなブログ
とりあえずはここを読む。いきなりゼロから書き始めるのは大変なので、公式Boilerplateを改造していくかんじ。
テーマを書く
はてなブログのテーマはCSSで書く。でも、設定ページでちまちまいじるのはめんどうなので、開発中はdropboxのpublicフォルダに置いてimportすると楽。publicフォルダの外で開発するなら、シンボリックリンクを使えばちゃんと同期してくれる。
$ ln -s /実際にファイルが置いてあるパス/style.css /dropboxのパス/style.css
やったこと
紫色をつかう
最近ラベンダー色がマイブームなので。
カラーコードはflatuicolorpicker : Best Flat Colors For UI Design » purpleからいただいてきた。
本文フォントをOSデフォルト以外にする
よそのサイトで見ていいなと思ったのでさっそく試してみた。
font-family: '游ゴシック', 'YuGothic', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
Macだと游ゴシックで表示されてるけど、Windowsでは未確認。
固定ページをつくる
はてなブログには固定ページはないので、擬似的につくる。ただし、あくまで擬似的に、なので、他記事同様前後へのリンクは表示されるし、記事一覧にも表示される。
記事編集画面の歯車アイコン>カスタムURL
に好きな英数字を入れる。
ナビゲーションメニューをつくる
デザイン設定>カスタマイズ>ヘッダ>タイトル下
に適当にリンクを貼る。上で作った固定ページとか、アーカイブとか。
課題
外部サイトへのリンクにアイコン付与
画像にリンク貼ったときの表示がよろしくなかったので、次回以降対応。
レスポンシブ対応
コメント入力iframeの表示がよろしくなかった。