PARABELL LIFE

描いた「理想の暮らし」は、自分の力で組み立てる ―― そんなフリーランス・ライフ・ログ。

はてなブログのデザインCSS欄には容量上限がある!直面した場合の回避策はこれ

はてなブログのCSS上限

このブログ、しばしばWordPressブログに間違われますが、実はれっきとしたはてなブログなんですよ。はてなブログ。

一部の有料WordPressテーマが人気すぎるせいか、最近は以前よりもブログで既視感を覚えることが増えています。よく見かけるのは、大体3種類。

それがどうにも嫌で、はてなブログでデザインを作り込みまくったのがこのブログ。

もちろん、人気の有料WordPressテーマはデザインはもとより、機能面でも素晴らしいものばかりです。特にデザイン面でも差別化しやすい機能を搭載したひつじさんの「JIN」はモンスタークラス、羨むレベルの逸品です。

前置きが長くなりましたが、このブログのテーマを作る過程ではてなブログのデザインCSS欄には容量上限があるという仕様上の問題に直面したので、情報を残しておきます。

はてなブログのデザインCSS欄は、65,536字まで

はてなブログのデザインを編集する方法は主に2つで、

  1. デザインCSS欄を使う
  2. テーマストアに登録する

個人的なブログ用としてCSSを編集する場合、通常はデザインCSS欄を使います。

テーマストアに登録するのは、ブログテーマを広く配布する場合です。

テーマストアは一度登録すると変更はできても削除ができず、「はてなブログテーマ制作の手引き」に従う必要もあるので、普段使いとしては向いていません。用途が違うので当然といえば当然ですが。

デザインCSS欄を使えばいいだけの話……と思いきや、デザインCSS欄にはまさかの容量上限が存在しました。

それがどのくらいかというと、

65,536字(すべて半角の場合)

で、出た~! 16bitの限界!!

この文字数を超えた分は問答無用で切り捨てられます。

デザインにこだわってリッチな表現を実装したり、ブログのウィジェットを増やしたりすると、CSSソースは肥大化していくもので……とてもこの程度では足りません。残念。

パラベル

マジか~きついな。そういうのは先に言っといてよ!

上限を回避するための試行錯誤(はてなの公式回答も)

上限があることがわかったので、どうにかしてそれを回避しようと試行錯誤を開始。

試行錯誤したこと
  1. 現実的な範囲でCSSを圧縮した
  2. 使う予定のない機能用のCSSを破棄した
  3. はてなブログに仕様変更を要望した
  4. 外部サーバーからのCSS読み込みを検討した

わりと真剣に困っていたので、色々とやってみました。それぞれ解説していきます。

現実的な範囲でCSSを圧縮した

CSSには、

  • 実際の見た目や動きを制御するために必要な記述
  • 人間の制作者がCSSソースを編集しやすくするための記述

があるので、編集性を損なわない程度に圧縮しました。

主な圧縮内容
  • ショートハンド記述に書き換えた
  • インデントを半角スペース4つからタブに変更した
  • 関係性のないパーツでもギリギリ把握できる範囲内で一括指定した

この作業にはかなりの時間を取られ、結構なストレスを感じました。CSS全体を見直せるいい機会だと言い聞かせて、黙々と、淡々と、粛々と作業を進めて完了。

この中でもインデントのタブ化は一括置換で終わり、効果もかなり高いものでした。

はてなブログの仕様上、やりすぎると今後の編集効率がうんざりするほど下がるため、圧縮はそこそこに留めておきます。

使う予定のない機能用のCSSを破棄した

この次の項目とも関係しますが、使う予定のない機能用のCSSを大胆に破棄しました(バックアップは残す)。

基本的に自分専用テーマなので、コメント機能やアーカイブのカレンダー表示など、当面使う予定のない機能用の記述は外しても問題ないと判断。

取捨選択の判断に多少迷ったものの、効果はそれなり。悪くはないか? 程度でした。

はてなブログに仕様変更を要望した

といっても上限を設定しているわけではなく、「そうなってしまった」的な仕様に思えたので、正確には「16bitでの運用をやめてほしい」という内容で要望を。

検討中との回答だったものの、

テーマストアに「非公開設定」で登録してください

当面の回避策として案内されたのがこれ。仕様変更が実現するかはわかりません。

ポイント

非公開設定で登録した場合は、「はてなブログテーマ制作の手引き」にある「はてなブログのすべての機能が正しく使えるようにCSSを書く」必要はないそうです。

外部サーバーからのCSS読み込みを検討した

はてなブログの仕様変更が叶えばクリア!

と期待したものの、少なくともすぐには実現しないはずと考えて検討したのがこれ。

デメリットとして、

  • 管理コストが増える
  • 外部サーバーが落ちると終了
  • 外部サーバーが重くなるとわりと困る
  • 編集する場合に結果の確認がかなり面倒になる

このあたりが厳しいなと感じたので、実行せずに見送りました。

外部サーバーのダウンや遅延でCSSだけ読み込めない、なんて事態は困るんですよ。

CSSの外れたブログの無残な姿といったらないので、それならブログ自体が開けないほうがまだマシですから。

そもそも外部サーバーまで用意するくらいなら「もうWordPressでいいっすわ」になりかねないので、それだと本末転倒も甚だしい。絶対に回避します。

最終的には努力とやや強引なCSSの断捨離で回避に成功した

努力の甲斐あって、この記事を書いている時点で61,054字での着地に成功!

上限まで4,500字ほど余裕がありますが、多少の機能追加やデザイン変更であっさり使い果たす程度の余裕ですね。既に足りなくなる未来が見えています。

パラベル

それまでに仕様変更してくれ、頼む!

どうしてもダメなら、head要素内に直接書くのが一番マシなのかもしれませんね。

そもそもデザインCSS欄を上限まで使い切った人自体、はてなブログ全体で何人いるのやらという話。期待は最小限かな。

ちなみにこのブログのテーマは、内部設定上の名前を「Parabellium」にしました。

などと最後の最後に誰も得しない情報を放り投げてしまい、大変失礼しました。手前味噌ですが、どうぞご査収ください。