記事を見やすく（見出し・箇条書きデザイン①）

アメブロカスタマイズ

記事を書く際のエディタには、標準で見出しや箇条書きを挿入する機能が付いています。これらを使うと『記事を見やすく』することが出来ますが、標準ではシンプルすぎて使っていない方が多いのでは？
そこで、標準のデザインを少しだけおしゃれにする方法をご紹介します。

大見出し

/* 大見出し */
.skinArticleBody h2{
  font-size: 1.5rem;
  position: relative;
  width:calc(100% - 2rem);
  padding: .5rem 0 .5rem 1.5rem;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 3px 4px 5px rgba(0,0,0,.5);
}
.skinArticleBody h2:after {
  position: absolute;
  top: .5rem;
  left: .5rem;
  content: '';
  width: 8px;
  height: calc(100% - 1rem);
  background-color: #3B5998;
  border-radius: 4px;
}

中見出し

/* 中見出し */
.skinArticleBody h3{
  font-size: 1.3rem;
  position: relative;
  width:calc(100% - 3rem);
  margin-left: 1rem;
  padding: .5rem 0 .5rem 1.5rem;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 2px 3px 4px rgba(0,0,0,.5);
}
.skinArticleBody h3:after {
  position: absolute;
  top: .5rem;
  left: .5rem;
  content: '';
  width: 6px;
  height: calc(100% - 1rem);
  background-color: #3B5998;
  border-radius: 6px;
}

小見出し

/* 小見出し */
.skinArticleBody h4{
  font-size: 1.1rem;
  position: relative;
  width:calc(100% - 4rem);
  margin-left: 2rem;
  padding: .5rem 0 .5rem 1.5rem;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 2px 3px 4px rgba(0,0,0,.5);
}
.skinArticleBody h4:after {
  position: absolute;
  top: .5rem;
  left: .5rem;
  content: '';
  width: 4px;
  height: calc(100% - 1rem);
  background-color: #3B5998;
  border-radius: 2px;
}

箇条書き
箇条書き

/* 箇条書き */
.skinArticleBody ul > li {
  position: relative;
  list-style: none;
  padding-left: .5rem;
}
.skinArticleBody ul > li:before {
  position: absolute;
  content: "";
  margin-right: 1rem;
  background: #3B5998;
  border-radius: 50%;
  width: .8rem;
  height: .8rem;
  left: -1rem;
  top: .5rem;
}

番号付き箇条書き
番号付き箇条書き
番号付き箇条書き

/* 番号付き箇条書き */
.skinArticleBody ol {
	counter-reset: li;
}
.skinArticleBody ol > li {
  position: relative;
  list-style: none;
  padding-left: .5rem;
}
.skinArticleBody ol > li:before {
  position: absolute;
  counter-increment: li;
  content: counter(li);
  color: #ffffff;
  margin-right: 1rem;
  background: #3B5998;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  left: -1.3rem;
  top: .3rem;
  font-weight:bold;
  text-align: center; 
  line-height: 1.4rem;
}

パソコンページをカスタマイズするには手順をご覧ください。

カスタマイズ前の準備

この記事を読む前に、こちらの設定をしておいてくださいね。

デザインの変更①（CSS編集用デザインを適用する）

新デザインの設定はこちらです。

新デザインの変更①（CSS編集用デザインを適用する）

カスタマイズ手順

『ブログ管理』画面を開きます。
https://blog.ameba.jp/ucs/top.do
『デザインの設定』ボタンをクリックします。

https://blog.ameba.jp/ucs/skin/skinselecttop.do
「デザインの変更」の「適用中のデザイン」にある『CSSの編集』をクリックします。

https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do
「現在使用中のプロぐデザインCSS」をスクロールし、文末に上記の使用したいコードをコピーし、『保存』をクリックします。