現在ホームページリニューアルに伴い、閲覧しづらい状態になっております。何卒ご了承ください。

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

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

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

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

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

目次

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

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

アメブロの見出し

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

アメブロの管理画面

1. CSSの編集画面を開く

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

アメブロの管理画面

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

アメブロの管理画面

2. コードを記述する

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

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

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

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

  1. 2カラムのデザインを選択している方向けのコード(skin-entryBody)
  2. 3カラムのデザインを選択している方向けのコード(articleText)

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

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

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

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

2-1. 検証画面で確認する

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

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

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

アメブロの投稿画面

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

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

アメブロの投稿画面

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

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

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

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

2-2. アメブロの管理画面で確認する

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

アメブロの管理画面

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

① の2カラムのデザインの方は【2カラム(skin-entryBody)用のコード

② の3カラムのデザインの方は【3カラム(articleText)用のコード

を使用します。

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

アメブロの管理画面

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

アメブロのデザインの表示確認・レイアウト変更画面

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

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


【2カラム(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;/*下の線(太さ、線の種類、色)*/
}

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

【3カラム(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;/*下の線(太さ、線の種類、色)*/
}

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

3. アレンジ方法

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

font-size文字サイズ
padding文字と枠の隙間
background背景色
border線の太さ・種類・色

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

font-size:文字サイズ

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

padding:枠と文字の隙間

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

padding: 1em;「上下左右」を指定
padding: .5em .75em;「上下」「左右」を指定
padding: .25em 0 .5em;「上」「左右」「下」を指定
padding: .25em 0 .5em .75em;「上」「右」「下」「左」を指定

background:背景色

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

border:線

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

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

直線solid
二重線double
破線dashed
点線dotted

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

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

  • 大見出しは border-left(左のライン)と border-bottom(下のライン)
  • 小見出しは border-bottom(下のライン)

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

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

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

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

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

よかったらシェアしてね!
目次
閉じる