はてなブログテーマ作成メモ

当ブログのデザインをリニューアルしたので、おぼえがきをメモ。

サムネイル

公式ドキュメント

はてなブログテーマ制作の手引き - ヘルプ - はてなブログ

とりあえずはここを読む。いきなりゼロから書き始めるのは大変なので、公式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の表示がよろしくなかった。