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

3649 ワード
Chrome拡張 CSS 投稿 Qiita 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文字幅の変更・表示フォントの変更
      単純に好みの問題です。

  • プレビュー画面
    • 自動折り返しの無効化
      表示幅半分だと実際の記事以上に折り返されるので。
    • 縮小表示化
      プレビューなら実寸で無くても良いかな～と。