Qiitaの投稿画面を弄ってみた

投稿画面が微妙に使いにくい気がしたので弄ってみました。

ブックマークレット等でも出来そうですが、その都度実行も面倒なのでChrome拡張を利用してます。

Stylus - Chrome ウェブストア
CSS弄れるなら色々と自分好みに出来て便利です。

**スタイル設定**

適用先: **正規表現に一致するURL** `https?://qiita.com/draft.*?/edit\b.*`

/** プレビューペイン **/
div.qa-MdContent,
div.it-MdContent {
  white-space: nowrap;       /* 折り返さない */
  transform: scale(0.75);    /* 縮小表示:75% */
  transform-origin: 2em 2em; /* 縮小位置調整 */
}
div.it-MdContent.slide_preview {
  white-space: initial;  /* スライドモードは普通に */
  transform: none;
}

/** 編集ペイン **/
textarea[class^="MarkdownEditorBody"],
textarea.editorMarkdown_textarea {
  white-space: pre;        /* 折り返さない */
  tab-size: 2;             /* TAB文字幅:2 */
  overflow: scroll !important; /* 横スクロール出して */
  /* 好みのフォントで編集したい */
  font-family: "FONT-NAME",Consolas,Liberation Mono,Menlo,Courier,monospace;
}

---

やりたかった事

• 編集画面
  • 自動折り返しの無効化
    
    投稿用にコード手直しする時、非常に見づらかったので。
  • TAB文字幅の変更・表示フォントの変更
    
    単純に好みの問題です。
    
    
• プレビュー画面
  • 自動折り返しの無効化
    
    表示幅半分だと実際の記事以上に折り返されるので。
  • 縮小表示化
    
    プレビューなら実寸で無くても良いかな～と。