記事を見やすく（アイコン付き見出し）

アメブロカスタマイズ

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

かわいい見出し

大見出し

中見出し

小見出し

/* 見出し */
.skinArticleBody h2, .skinArticleBody h3, .skinArticleBody h4{
  position: relative;
  color: #ffffff; /* フォントの色 */
  background: #ff9999; /* 背景の色 */
  border-radius: 6px;
  padding: 0;
}
.skinArticleBody h2:before, .skinArticleBody h3:before, .skinArticleBody h4:before{
  position: absolute;
  font-family: "Material Icons";
  content: "\e87d"; /* アイコンのコード */
  color: #ffffff; /* アイコンの色 */
  background: #ff6666; /* 背景の色 */
  margin: 0;
  padding: 0;
  top: -3px;
  text-align: center;
  border: solid 3px #fff;
  border-radius: 50%;
  box-shadow: none;
}
.skinArticleBody h2, .skinArticleBody h2:before{
  font-size: 1.8rem;
  line-height: 3rem;
}
.skinArticleBody h2{
  margin-left: 1.8rem;
  padding: 0px 0px 0px calc(1rem + 1.8rem);
  width: calc(100% - 4.6rem);
 }
.skinArticleBody h2:before{
  width: 3rem;
  height: 3rem;
  left: -1.5rem;
}
.skinArticleBody h3, .skinArticleBody h3:before{
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.skinArticleBody h3{
  margin-left: calc(1rem + 1.3rem);
  padding: 0px 0px 0px calc(1rem + 1.3rem);
  width: calc(100% - 4.6rem);
 }
.skinArticleBody h3:before{
  width: 2.6rem;
  height: 2.6rem;
  left: -1.3rem;
}
.skinArticleBody h4, .skinArticleBody h4:before{
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.skinArticleBody h4{
  margin-left: calc(2rem + 1.2rem);
  padding: 0px 0px 0px calc(1rem + 1.2rem);
  width: calc(100% - 5.4rem);
}
.skinArticleBody h4:before{
  width: 2.4rem;
  height: 2.4rem;
  left: -1.2rem;
}

チェック見出し

大見出し

中見出し

小見出し

/* 見出し */
.skinArticleBody h2, .skinArticleBody h3, .skinArticleBody h4{
  position: relative;
  color: #ff9999; /* フォントの色 */
  border-radius: 0px;
  padding: 0;
  border:none;
  border-bottom: solid 3px #ff9999; /* 下線の種類と太さと色 */
}
.skinArticleBody h2:before, .skinArticleBody h3:before, .skinArticleBody h4:before{
  position: absolute;
  font-family: "Material Icons";
  content: "\e86c"; /* アイコンのコード */
  color: #ff6666; /* アイコンの色 */
  top: 0px;
  left: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
.skinArticleBody h2, .skinArticleBody h2:before{
  font-size: 1.8rem;
  line-height: 3rem;
}
.skinArticleBody h2{
  margin-left: 1.8rem;
  padding: 0px 0px 0px calc(1rem + 1.8rem);
  width: calc(100% - 4.6rem);
 }
.skinArticleBody h2:before{
  width: 3rem;
  height: 3rem;
}
.skinArticleBody h3, .skinArticleBody h3:before{
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.skinArticleBody h3{
  margin-left: calc(1rem + 1.3rem);
  padding: 0px 0px 0px calc(1rem + 1.3rem);
  width: calc(100% - 4.6rem);
 }
.skinArticleBody h3:before{
  width: 2.6rem;
  height: 2.6rem;
}
.skinArticleBody h4, .skinArticleBody h4:before{
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.skinArticleBody h4{
  margin-left: calc(2rem + 1.2rem);
  padding: 0px 0px 0px calc(1rem + 1.2rem);
  width: calc(100% - 5.4rem);
}
.skinArticleBody h4:before{
  width: 2.4rem;
  height: 2.4rem;
}

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

カスタマイズ前の準備

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

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

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

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

アイコンを変更したいときは、下記から探してください。
※色やアイコンの種類を変えると、あなたに合ったものが見つかります。

Action（行動） Alert（警報） Av（映像と音声） Communication（伝達） Content（コンテンツ） Device（端末） Editor（編集） File（書類） Hardware（機器） Image（イメージ） Maps（地図） Navigation（ナビ） Notification（通知） Places（場所） Social（ソーシャル） Toggle（トグル・ボタン）

カスタマイズ手順

『ブログ管理』画面を開きます。
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」をスクロールし、文末に上記の使用したいコードをコピーし、『保存』をクリックします。