はてなブログの記事編集を更に使いやすく！

よく使う機能を固定

左側にサイドバーが移動したのは良かったですが、右側が空いてしまって寂し感じがしてきました。
そうだとしたら、よく使う「編集オプション」と「カテゴリー」を左側、「写真を投稿」を右側に固定してみました。
それ以外の機能についてはスライドで開閉できるようにし、必要なときにだけ呼び出して使えるイメージです。

完成したCSSは以下の通りです。

#editor-home, #editor-archive, #editor-category, #editor-option, #editor-nicovideo, #editor-rakuten {
margin-right: 36px;
}
#editor-fotolife {
display: block !important;
position: fixed;
width: 263px;
right: 0;
border-left: 1px solid #dde5e8;
}
#editor-option {
display: block !important;
position: fixed;
width: 263px;
left: 0;
z-index: 1000;
height: 60%;
background-color: white;
}
#editor-paint {
position: fixed;
width: 263px;
}
#editor-category {
display: block !important;
position: fixed;
width: 263px;
left: 0;
bottom: 0;
z-index: 1000;
height: calc(40% - 37px);
background-color: white;
overflow-y: scroll;
}
.l-editor-sidebar-inner {
position: relative;
}
.curation-bar-itemlist {
right: 0;
position: absolute;
}
.curation-tab-contents {
border-left: 0;
border-right: 1px solid #bfced3;
margin-right: 36px;
}
.editor-curation-bar-toggle {
border-left: 0;
border-right: 1px solid #dde5e8;
}
.support-shown .editor-curation-bar-toggle:before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.editor-curation-bar-toggle:before {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.page-user-blog-edit.support-shown .l-editor-main {
margin-right: 280px;
margin-left: 556px;
}
.page-user-blog-edit .l-editor-main {
margin-right: 280px;
margin-left: 295px;
}
.support-shown .l-editor-sidebar {
left: 261px;
}
.l-editor-sidebar {
left: 0;
transition-property: left;
}
.curation-bar-itemlist-overflow {
left: 36px;
}
.curation-bar-itemlist-overflow .curation-itemlist:last-child {
border-right-color: #dde5e8;
border-left-color: #fff;
}
.CategoryEditor {
border-top: 1px solid #dde5e8;
}

ブラウザに渡す用のJavaScriptは以下の通りです。

javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='#editor-home,#editor-archive,#editor-category,#editor-option,#editor-nicovideo,#editor-rakuten {margin-right:36px;} #editor-fotolife {display:block !important; position:fixed; width:263px; right:0; border-left:1px solid #dde5e8;} #editor-option {display:block !important; position:fixed; width:263px; left:0; z-index:1000; height: 60%; background-color:white;} #editor-paint {position:fixed; width:263px;} #editor-category {display:block !important; position:fixed; width:263px; left:0; bottom:0; z-index:1000; height:calc(40% - 37px); background-color:white; overflow-y:scroll;} .l-editor-sidebar-inner {position:relative;} .curation-bar-itemlist {right:0; position:absolute;} .curation-tab-contents {border-left:0; border-right:1px solid #bfced3; margin-right:36px;} .editor-curation-bar-toggle {border-left:0; border-right:1px solid #dde5e8;} .support-shown .editor-curation-bar-toggle:before {-webkit-transform:rotate(0deg); transform:rotate(0deg);} .editor-curation-bar-toggle:before {-webkit-transform:rotate(180deg); transform:rotate(180deg);} .page-user-blog-edit.support-shown .l-editor-main {margin-right:280px; margin-left:556px;} .page-user-blog-edit .l-editor-main {margin-right:280px; margin-left:295px;} .support-shown .l-editor-sidebar {left:261px;} .l-editor-sidebar {left:0; transition-property:left;} .curation-bar-itemlist-overflow {left:36px;} .curation-bar-itemlist-overflow .curation-itemlist:last-child {border-right-color:#dde5e8; border-left-color:#fff;} .CategoryEditor {border-top:1px solid #dde5e8;}';head[0].appendChild(style);})();

改良版の記事編集
↑このリンクをドラッグアンドドロップです。（ブックマークレットです。）

但し、画像をアップロードする際に空白のメニューが表示されてしまいます…。

「編集オプション」「カテゴリー」を固定

この問題が発生したので、「編集オプション」と「カテゴリー」を右側に固定にして、他の貼り付け系の機能を左側でスライドで開閉できるようにしました。
最終的に完成したCSSは以下の通りです。

#editor-home, #editor-archive, #editor-category, #editor-option, #editor-nicovideo, #editor-rakuten {
margin-right: 36px;
}
#editor-fotolife {
position: fixed;
width: 263px;
}
#editor-option {
display: block !important;
position: fixed;
width: 263px;
right: -36px;
height: 60%;
border-left: 1px solid #dde5e8;
}
#editor-paint {
position: fixed;
width: 263px;
}
#editor-category {
display: block !important;
position: fixed;
width: 263px;
right: -36px;
bottom: 0;
height: calc(40% - 37px);
border-left: 1px solid #dde5e8;
overflow-y: scroll;
}
.l-editor-sidebar-inner {
position: relative;
}
.curation-bar-itemlist {
right: 0;
position: absolute;
}
.curation-tab-contents {
border-left: 0;
border-right: 1px solid #bfced3;
margin-right: 36px;
}
.editor-curation-bar-toggle {
border-left: 0;
border-right: 1px solid #dde5e8;
}
.support-shown .editor-curation-bar-toggle:before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.editor-curation-bar-toggle:before {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.page-user-blog-edit.support-shown .l-editor-main {
margin-right: 280px;
margin-left: 293px;
}
.page-user-blog-edit .l-editor-main {
margin-right: 280px;
margin-left: 32px;
}
.support-shown .l-editor-sidebar {
left: 0px;
}
.l-editor-sidebar {
left: -263px;
transition-property: left;
}
.curation-bar-itemlist-overflow {
left: 36px;
}
.curation-bar-itemlist-overflow .curation-itemlist:last-child {
border-right-color: #dde5e8;
border-left-color: #fff;
}
.CategoryEditor {
border-top: 1px solid #dde5e8;
}

ブラウザに渡す用のJavaScriptは以下の通りです。

javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='#editor-home, #editor-archive, #editor-category, #editor-option, #editor-nicovideo, #editor-rakuten {margin-right:36px;}#editor-fotolife {position:fixed; width:263px;}#editor-option {display:block !important; position:fixed; width:263px; right:-36px; height:60%; border-left:1px solid #dde5e8;}#editor-paint {position:fixed; width:263px;}#editor-category {display:block !important; position:fixed; width:263px; right:-36px; bottom:0; height:calc(40% - 37px); border-left:1px solid #dde5e8; overflow-y:scroll;}.l-editor-sidebar-inner {position:relative;}.curation-bar-itemlist {right:0; position:absolute;}.curation-tab-contents {border-left:0; border-right:1px solid #bfced3; margin-right:36px;}.editor-curation-bar-toggle {border-left:0; border-right:1px solid #dde5e8;}.support-shown .editor-curation-bar-toggle:before {-webkit-transform:rotate(0deg); transform:rotate(0deg);}.editor-curation-bar-toggle:before {-webkit-transform:rotate(180deg); transform:rotate(180deg);}.page-user-blog-edit.support-shown .l-editor-main {margin-right:280px; margin-left:293px;}.page-user-blog-edit .l-editor-main {margin-right:280px; margin-left:32px;}.support-shown .l-editor-sidebar {left:0px;}.l-editor-sidebar {left:-263px; transition-property:left;}.curation-bar-itemlist-overflow {left:36px;}.curation-bar-itemlist-overflow .curation-itemlist:last-child {border-right-color:#dde5e8; border-left-color:#fff;}.CategoryEditor {border-top:1px solid #dde5e8;}';head[0].appendChild(style);})();

更に改良版の記事編集
↑このリンクをドラッグアンドドロップです。（ブックマークレットです。）

これでいったん落ち着こうと思います。
編集オプションとカテゴリーについては、非常に使いやすくなったと思います。

以上、はてなブログの記事編集を更に使いやすく！でした。