はてなブログのデザインCSSの編集画面を大きくする

hatenaロゴ

はてなブログのデザインCSSの編集画面は、ウィンドウが狭く文字も小さく使いづらかったのですが、Google Chromeの拡張機能を使って、大きく見やすくしたいと思います。

というか、Chromeの拡張(ユーザースタイルシート)でWebサイトやブログのデザインを変えたり、広告を非表示にしてきたのに、なぜ、こういう発想ができなかったのでしょう?

はてなブログのデザインCSSの編集画面を大きくする

デザインCSS
  • User JavaScript and CSSの拡張アイコンをクリックして「Add new」ボタンをクリックまたは拡張アイコンを右クリック、オプションを選択して「Add new site」ボタンをクリックします。
  • User JavaScript and CSSの入力画面の上にあるURL入力欄に、「blog.hatena.ne.jp」と入力します。
はてなブログのデザイン設定のダイアログボックスを大きくする
はてなブログのデザインを設定しようとして困るのは、ダイアログボックスがどれも小さすぎて使いにくいことだ。1,200×1,920ピクセルのモニタを使っていても、サイドバーモジュールの編集ダイアログボックスは幅460ピクセル、高さ469ピクセルしかない。
  • User JavaScript and CSSの入力画面の右上にある「Save」ボタンをクリックします。
  • はてなブログの管理画面(blog.hatena.ne.jp)を更新し、デザイン→カスタマイズ→デザインCSSを確認して、ウィンドウと文字が大きくなっていれば完成です。