アメーバブログのテンプレート編集画面を使いやすくカスタマイズしてみる

アメブロのCSS編集画面を、余計な機能を削除して入力しやすくカスタマイズします。入力欄をウインドウ幅まで広げるので視認性が向上します。

関連記事：FC2ブログのテンプレート編集画面を使いやすくカスタマイズしてみる

変更点

• スキン用画像アップロードはデザインの都合で削除しています。画像をアップロードするときはCSSをオフにしてください。
• Source Code ProをGoogle Fontsから読み込んで適用させています。不要な場合は削除してください。
• #contentsForm textareaのheightで入力欄の高さが決まります。お使いのモニターサイズに合わせて変更してください。

CSS

今回は、Google Chromeの拡張機能を用いて、サイトにCSSを適用させます。

有名どころには、StylishやStylishなどがあります。お好きな拡張機能でCSSを適用させてください。

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


#ucsHeader,
.ucs-sidemenu-area,
#ucsMainRight,
h1,
#notes,
#contentsForm h2,
#contentsForm p,
#contentsForm .infoArea,
.autoHeight,
#footerAd,
#globalFooter{
    display:none;
}

#ucsContent,#ucsMain {
    background: none;
    border:0;
}

#ucsContent {
    width: 100%;
	padding: 0 3%;
    box-sizing:border-box;
}

#ucsMainLeft {
    margin: 0;
    width: 100%;
}

#subContentsArea {
    display: flex;
    flex-direction: column-reverse;
}

#contentsForm textarea {
    display: block;
    width: 100%;
    height: 43em;
	font-size: 15px;
    box-sizing:border-box;
    font-family: 'Source Code Pro';
}

CSSの適用先は下記のURLに設定してください。

https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do