2015-12-31

はてなブログの CSS 編集を Dropbox で高速化しよう

f:id:waitingmoon:20151231010403p:plain

※Dropbox の Public フォルダが廃止になる 2017/03/15 以降、この方法は使えなくなります。

はてなブログのテーマ制作やデザインカスタマイズで CSS を編集する際、Dropbox の共有フォルダを使うとぐっと楽になります。

Dropbox の共有フォルダに CSS ファイルを保存/アップロードする
CSS ファイルの公開リンクを取得してブログに読み込む

公開リンクの例

https://dl.dropboxusercontent.com/u/********/hatenablog/themes/Innocent/innocent.css

読み込み（ヘッダーに記述）

ダッシュボードの［設定］→［詳細設定］→［head に要素を追加］から、link 要素でスタイルシートを追加します（2016/01/07 @import だと問題があることが判明したので、この形に修正）。

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/********/hatenablog/themes/Innocent/innocent.css">

ローカルの CSS ファイルを編集する
編集が終わったら保存する
保存したファイルが自動で同期される
ブログに CSS が反映される

ファイルを編集・保存するとすぐに同期・反映されるのがポイントで、一々コピーしてデザインCSS欄に貼り付けて…という作業から開放されます。

はてなブログのデザインCSS機能の文字の小ささ、レスポンス速度、その他もろもろの不便さに不満を感じている方がいればお試し下さい。

2015-12-20

はてなブログテーマ「Innocent」のカスタマイズ（ナビゲーションバー編）

はてなブログテーマブログカスタマイズ Innocent

はてなブログテーマ「Innocent」はナビゲーションバーを内蔵しています。面倒なCSSを記述することなく、簡単にナビゲーションバーを表示できます。

2015-12-20

はてなブログテーマ「Innocent」を公開しました

はてなブログテーマ Innocent

Blank をベースに更なる改良を加えたはてなブログテーマ「Innocent」をテーマストアにて公開しました。フォントの色やサイズ、余白を調整しよりレスポンシブに進化しました。デザインの詳細は続きを読むからご覧ください。

2015-12-09

はてなブログで jQuery プラグインを使うなら jsDelivr から読み込もう

ブログカスタマイズはてなブログ

はてなブログで jQuery プラグインを使うとなると、ファイルをどこに置くか？という問題に直面します。外部ファイルの呼び出し（ファイル置き場として利用すること）を許可しているサーバーは少ないですし、Dropbox や Github を使うのもなんだかなあという感じ。そんな時は jsDelivr から読み込むのがおすすめです。