読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログの記事ページから新規投稿するスペースの横幅を広げるCSS

記事作成時の利便性を少しでも向上させるためのCSSを考えた。コピペするだけの簡単設定。

概要

CSSコードを少し追加する方法を述べている。

カスタム前後のデモ画像

Before

はてなブログ記事投稿スペース横幅を広げる前

After

はてなブログ記事投稿スペース横幅を広げた後

環境

  • ブラウザ:Google Chrome 33
  • OS:Windows8
  • ディスプレイ:1920x1080

どうやってCSSを編集するのか

管理画面でCSS編集にアクセスする方法を次の記事で図解している。

追加するCSSコード

/*
はてなブログの記事ページから新規投稿するスペースの横幅を広げるCSS
http://hapilaki.hateblo.jp/entry/make-edit-screen-wider 
*/
#hatena-diary-edit-in-place {max-width:100% !important;}

横幅を調整するには

上記コードではブラウザの横幅いっぱいに広がるよう設定している。100%90%に変更すれば、ブラウザの横幅に対して90%の横幅になる。また、1200pxというように、ピクセル単位でも指定できる。

あなたのブログライフがよりよいものになることを願っている。

追記:はてなブログのアップデートで不要に

次のページにあるとおり、記事編集画面がマイナーチェンジした。それによって当ページで紹介しているCSSコードは不要になった。

てすとてすと