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

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

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

概要

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

カスタム前後のデモ画像

Before

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

After

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

環境

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

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

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

はてなブログのテーマはCSS編集でカスタム。HTML編集は部分的にしかできない - はぴらき合理化幻想

追加するCSSコード

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

横幅を調整するには

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

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