アメブロの見出しをカスタマイズする方法

今更ながらアメブロデビューしました。

普段からワードプレスでブログを書き慣れている私は、アメブロでも当然のように見出しを使って書いてみたのですが、びっくりしたのがその見出しの文字。

ただサイズが大きくなるだけで、装飾もない！・・・デザイン的にもどうなんだろう？と思うものでした。

こちらでは、そんなちょっと飾り気のないアメブロの見出しにラインを引いたり、装飾をしたりする方法について説明したいと思います。

シンプルでお洒落な見出しにカスタマイズしてみよう

今回は、下の画像（）のような見出しに変更するコードを紹介します。

ただし、この方法は、ブログ管理 ＞ デザインの設定『カスタム可能デザイン』の中の『CSS編集用デザイン』を選択している方限定となりますのでご注意ください。

CSSの編集画面を開く

ブログ管理 ＞ デザインの設定 ＞ デザインの変更 ＞ CSSの編集 の順でクリックします。

すると、『現在使用中のブログデザインCSS』が表示されます。

コードを記述する

上の画像の赤枠で囲んだ『@charaset “UTF-8”;』で始まるものを「スタイルシート」と呼びます。

このスタイルシートを一番下までスクロールして、コードを追記するのですが、その前に・・・

念のためにバックアップを取っておきましょう。やり方は簡単。スタイルシートの記述を全てコピーし、メモ帳などに貼っておくだけでOKです。

追記するコードには、次の２種類があります。

ここでちょっと難しいのが、選択しているデザインにより、記述するコードが異なるという点。

ここからは、あなたのブログがどちらに該当するのか見分ける方法について説明します。

見分け方は２通りあるのですが、簡単かつ確実なのは、今から説明する Google Crome の検証ツール（デベロッパーツール）で確認する方法です。

よく分からない方は、後で説明する方法（ 2-2. アメブロの管理画面で確認する）でも確認できますので、ご安心ください。

１）検証画面で確認する

Google Crome の検証ツールを使用しますので、ブラウザは必ず Google Crome を使うようにして下さい。

アメブロの投稿画面を開きます。

① 投稿したテキスト上ならどこでも良いのですが、とりあえずここでは「大見出し」の文字の上でドラッグし、右クリックしてみましょう。

② 表示された「検証」の文字をクリックすると、検証ツールが開きます。

③ <h2>大見出し</h2>を囲んでいるdivタグのclass名を確認します。

ここでは、class名が「skin-entryBody」であることが確認できます。

ですので、この場合は下に記載している【２カラム（skin-entryBody）用のコード】を使用することになります。

ここでclass名が「articleText」であると確認できた場合には、【３カラム（articleText）用のコード】を使用することになります。

次にもう１つの確認方法について説明します。

２）アメブロの管理画面で確認する

アメブロの管理画面を開いて、デザインの設定から「カスタム可能」デザインを選択し、下の画面を表示させます。

ここで、「適用中のデザイン」が

を使用します。

ここで注意していただきたいのが・・・例えば下の赤枠で囲んだ２カラムのデザインを選択（クリック）し、

その後に表示されるレイアウトの中から、３カラムのデザインを選んでいたとしても、

記述するコードは、【２カラム（skin-entryBody）用のコード】となることです。最初にどのデザインを選択したかが基準となりますので、ご注意ください。

※ この２番目に説明した方法は、アメブロのデザインが新たに追加された際には少し混乱してしまいそうなので、できれば最初にご紹介した Google Crome の検証ツール（デベロッパーツール）を用いて確認する方法をお勧めします。

【２カラム（skin-entryBody）用のコード】

/*--- ここから見出し --- */

/*大見出し*/
.skin-entryBody h2{
  font-size: 1.3em;/*文字サイズ*/
  padding: .25em 0 .5em .75em;/*文字と枠の隙間*/
  border-left  :6px solid #333333;/*左の線(太さ、線の種類、色)*/
  border-bottom:1px solid #333333;/*下の線(太さ、線の種類、色)*/
}

/*中見出し*/
.skin-entryBody h3{
  font-size: 1.2em;/*文字サイズ*/
  position: relative;
  padding: .5em .75em;/*文字と枠の隙間*/
  background-color: #eeeeee;/*背景色*/
  border-radius: 4px;/*角の丸み*/
}

.skin-entryBody h3:after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #eeeeee;/*三角部分の色*/
}

/*小見出し*/
.skin-entryBody h4{
  padding: .35em 0;/*文字と枠の隙間*/
  border-bottom: 1px solid #333333;/*下の線(太さ、線の種類、色)*/
}

/*--- ここまで見出し ---*/

【３カラム（articleText）用のコード】

/*--- ここから見出し --- */

/*大見出し*/
.articleText h2{
  font-size: 1.3em;/*文字サイズ*/
  padding: .25em 0 .5em .75em;/*文字と枠の隙間*/
  border-left  :6px solid #333333;/*左の線(太さ、線の種類、色)*/
  border-bottom:1px solid #333333;/*下の線(太さ、線の種類、色)*/
}

/*中見出し*/
.articleText h3{
  font-size: 1.2em;/*文字サイズ*/
  position: relative;
  padding: .5em .75em;/*文字と枠の隙間*/
  background-color: #eeeeee;/*背景色*/
  border-radius: 4px;/*角の丸み*/
}

.articleText h3:after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #eeeeee;/*三角部分の色*/
}

/*小見出し1*/
.articleText h4{
  padding: .35em 0;/*文字と枠の隙間*/
  border-bottom: 1px solid #333333;/*下の線(太さ、線の種類、色)*/
}

/*--- ここまで見出し ---*/

アレンジ方法

ここまでできたら、今度は見出しをあなた好みにアレンジしてみましょう。下記を踏まえた上で、お好みのサイズや色に変更していきます。

１つずつ詳しく解説していきますね。

font-size：文字サイズ

文字サイズの『1em』というのは、デフォルトのサイズのことです。1.25倍にしたい場合は『1.25em』と記述します。

padding：枠と文字の隙間

下記のように４タイプの指定方法があります。0.5 の場合は、0 を省いて『.5』と記述します。また、0 には単位をつけません。

background：背景色

背景色は、『#〇〇〇〇〇〇』という色コードで指定します。色コードについては、原色大辞典 を参考にすると良いでしょう。

border：線

・線の太さは、数字を大きくすればするほど太くなります。

・代表的な線の種類として、下記のものがあります。見本では直線（solid）となっていますが、お好みの線に変更してみましょう。

・線の色については、background（背景色）と同じです。お好みの色コードを指定します。

・border には部位を示す「top」「right」「bottom」「left」があります。見本は、下記のラインで作られています。

・border-radius は、角の丸みを指定するプロパティです。

アメブロの見出しをカスタマイズする方法についてのまとめ

今回は、アメブロの見出しをカスタマイズする方法について説明しました。

少しややこしかったかもしれませんが、ぜひチャレンジしてみて下さいね！！

もしご不明点などございましたら、お問い合わせページ からお気軽にお問い合わせください。

あわせて読みたい

アメブロの他にワードプレスでホームページを作った方が良い？ 以前は、「起業する」となると、まず始めにホームページを作られる方が多かったのですが、最近ではホームページを持たずに、アメブロやTwitter、インスタなどの SNS だ…