はてなブログのデザイン設定のダイアログボックスを大きくする

はてなブログのデザインを設定しようとして困るのは、ダイアログボックスがどれも小さすぎて使いにくいことだ。1,200×1,920ピクセルのモニタを使っていても、サイドバーモジュールの編集ダイアログボックスは幅460ピクセル、高さ469ピクセルしかない。デザインCSSの入力欄も幅500ピクセル、高さ400ピクセルで固定されているし、これは文字が小さくて老眼にはつらい。

f:id:Imamura:20190224202310p:plain

(↓わかりやすくするため、デザインCSSの入力欄以外を暗くしています)

f:id:Imamura:20190224202311p:plain

はてなブログを本格的に使うようになって、デザインの設定をいろいろいじっているとこれがつらい。つらさが限界に達したためスタイルシートを書くことにした。

Webページに独自のCSSを割り当てる拡張機能といえば「Stylish」だが、これは去年7月にポリシー違反でFirefoxChrome拡張機能ストアから削除されている。

代わりに「Stylus」を使うことにした。これを開発しているのは「Styilsh」と同じ人で、売却する前の「Stylish」から派生させているそうだ。

(今見たら「Stylish」はFirefoxChrome拡張機能ストアに復活していた。ポリシー違反を修正して復活したのだろうか? でも閲覧履歴を収集することを正式にうたうようになっただけかもしれない)

  1. Stylusをインストールしたら、はてなブログのデザイン設定のページを開き、Stylusのアイコンをクリックする。「次のスタイルを書く:blog.hatena.ne.jp」になる場所をクリックする。
    f:id:Imamura:20190224193653p:plain
    • ※「blog.hatena.ne.jp」以外でもクリックできるが、「hatena.ne.jp」や「blog.hatena.ne.jp/このURL」ではクリックしないこと
      f:id:Imamura:20190224193654p:plain
  2. 「スタイルを追加」タブが開く。
    f:id:Imamura:20190224193655p:plain
  3. 下のCSSを入力して「保存」ボタンをクリックする。
    f:id:Imamura:20190224193656p:plain
/*サイドバーモジュールのダイアログボックス*/
.dialog-box{
	top: 5% !important; /* 上からの距離 */
	left: 5% !important; /* 左からの距離 */
}
.page-user-blog-config-design-detail .module-edit-modal-window.hide-radios .dialog-box {
	width: 1000px; /* 幅 */
}
.page-user-blog-config-design-detail .module-edit-modal-window .module-value-box-inner {
	height: 1500px; /* 高さ */
}

/*デザインCSSの入力欄*/
.page-user-blog-config-design-detail .ace_editor {
	width: 90% !important; /* 幅 */
	height: 90% !important; /* 高さ */
	font-size: 1em !important; /* 文字の大きさ */
	line-height: 1; /* 行高 */
}

(それぞれの数値は各自のモニタサイズや好みで調整してください)

これでサイドバーモジュールの編集ダイアログボックスはこんなに大きく!

f:id:Imamura:20190224202312p:plain

デザインCSSの入力欄もこんなに大きく!そして文字も大きく!(こうなるとシンタックスハイライトもほしくなりますね)

f:id:Imamura:20190224202313p:plain

あー使いやすい。これからはこれでいこう。