はじめに
こんにちは。
はてなブログのCSSエディタは使いにくいけど外部化してもいいのか？というお話です。
外部化しない場合の手法も説明します。
使いづらいデザイン設定
CSSに限らずはてなブログのデザイン設定はとても不便です。
欄が小さい！
クリックすると大きくなるのですがブラウザのタブを切り替えるとすぐ閉じます。
その際に自動で保存する上Ctrl+Zで戻すこともできません。
簡単に大惨事になります。
Ctrl+Fをかけても閉じるのでCSS内を検索することもできないです。
公式に改善要望を出したのですが変更予定はないということ。
自分でどうにかするしかありません。
外部化のデメリット
ここで対処法の候補に「CSSの外部化」が挙がってきます。
CSSファイルをGitHub Pagesなど外部のサーバーに置いてブログからアクセスするわけです。
具体的な方法は割愛します。
気になる方は以下の記事がとてもわかりやすいのでご参照ください。
さてこの手法、便利ではあるんですが僕はやっていません。
デメリットを挙げます。
・読み込みが遅い
CSSの内容やサーバーの応答速度にもよりますが読み込みが若干遅くなります。
このブログだと差は1秒弱くらいです。
僕はここで断念しましたが許容範囲の問題ですね。
・基本的に反映が遅い
CSSを置く外部サービスの例としてGitHub PagesやBitbucketなどが挙げられます。
これらを使うデメリットは反映までに時間がかかることです。
1分程度ならいいのですが長いと1~2時間ほど必要なので、何度も細かく編集して違いを見るといったことがスムーズにできません。
一応URLに?version=<コミットID>をつけることで最新版を読み込めるのですが、いちいちIDを調べて貼り付けるのがかなり面倒です。
ただこれについては解決法があります。
外部化したい方は
この記事の手法が外部化の中では一番いいかなと思います。
Google Driveなので手軽です。
詳しいやり方はリンク先をご覧ください。
この方法が優れているのは保存した瞬間に反映される点です。
GitHub Pagesなどにはない強みですね。
「版を管理」からバージョンを保管できるのも素晴らしいです。
一点補足を。
本来Google DriveではCSSを直接編集できません。
ですがデフォルトでEditeyというエディタが提供されています。
「アプリで開く」から選択しましょう。
ブラウザ上で動くのでとても便利です。
ヘッダやフッタのデザインを外部化するのは試した限りでは無理でした。
もしできた方がいれば記事など書いていただけると嬉しいです。
外部化しない場合
僕はすごくアナログな方法を取ってます。
GitHubにprivateのリポジトリを作って管理し、編集が終わったらはてなブログのデザイン欄に貼り付けます。
それだけです。
単純ですがGitHubにはクリップボードへのコピーボタンがあるので意外と簡単です。
読み込み速度を保ちたいという方にはおすすめしますが、多少遅くなってもいい場合は先ほどの記事に従いましょう。
絶対やってほしいこと
外部化はデメリットもありますがとても便利です。
いつでも戻せるので是非一度試してみてください。
最後に声を大にして言いたいことがあります。
外部化しようとしなかろうとデザインのソースコードをはてなブログの小さいウィンドウで編集するのは絶対にやめましょう。
CSSに限らずヘッダのブログタイトル下やフッタも含めてです。
Google DriveやGitHubがバージョン管理もできておすすめですが、他のテキストエディタでも構わないので元に戻せる環境で編集してください。
僕は何度も痛い目を見てきました。
同じ悲劇を繰り返してはいけません。
GitHubもリポジトリを作ってしまえばずっと使えるし、Google Driveなんてブログをするほどインターネットに親しんでいる方なら既に利用しているんじゃないでしょうか。
小さな手間は惜しまず行きましょう。
以上です。
