2017.11.21

【コピペOK】AFFINGER4に導入したいオシャレ見出し8選

ひつじ

<景品表示法に基づく表記> 当サイトのコンテンツ内には商品プロモーションを含みます。

AFFINGER4

おおかみくん

AFFINGER4の見出しって変えることはできるのか？

ひつじくん

それはもちろんできるよ！いろいろデザインがあるから紹介してみるね。

AFFINGER4の見出しはデフォルトではかなり簡素なものになっています。カスタマイズ自分でしてくれ！と言わんばかりですね(笑)

AFFINGER4　見出しデフォルト
僕的には勝手にカスタマイズするのでこれで困ることはないのですが、アフィリ初心者でHTML/CSSを知らない人にとってはキツイですよね。そこで、AFFINGER4の見出しh2、h3のカスタマイズをまとめてみたいと思います。

ブログデザインを想いのままに！

Contents

h2の見出しカスタマイズ
h3の見出しカスタマイズ
AFFINGER4の見出しカスタマイズまとめ

h2の見出しカスタマイズ

シンプルな見出し

見出しは以外とシンプルなほうがいい場合が多いです。見出しに凝っていると個性が出ますけれど、個性を出しすぎると、どれが大見出しなのか小見出しなのかが分かりにくくなったりもします。

一般的に最も大見出しとして使われているのが以下のデザインなので、こちらを大見出しとして採用するのが無難です。僕はフラットなデザインが好きなのでこう言った見出しを採用しています。

もちろん背景の色などは変えることができますので、自分のサイトにあったものを採用するようにしてくださいね！

h2見出し

.post h2{
    background: #c50a0a !important;/*背景を赤く*/
    color: #fff !important;/*文字色を白く*/
    padding: 15px !important;
    border-top: none !important;
    border-bottom:none !important;
    border-radius: 3px;/*見出しの縁を丸く*/
}

font awesomeでオシャレに！

font awesomeというフォントツールを使って見出しをオシャレにするものアリですね！

AFFINGER4にはfont awesomeが標準搭載されていますから、フォントコードを入力するだけで簡単にオシャレなフォントを出してくることができます。このフォントコードはfont awesomeから手に入れてくることができます。

h2見出し

.post h2{
    background: #c50a0a !important;/*背景を赤く*/
    color: #fff !important;/*文字色を白く*/
    padding: 15px !important;
    border-top: none !important;
    border-bottom:none !important;
    border-radius: 3px;/*見出しの縁を丸く*/
}

.post h2:before {
  color:#fff; /*アイコンの色*/
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  margin-right:10px;
  font-family:"FontAwesome";
  content:"\f058"; /*アイコンの種類*/
  font-weight:lighter;
  font-size:26px; /*アイコンの大きさ*/
  position: relative;
  top:-3px;
  display:inline-block;
}

影をつけて立体的に

少し立体感を出したいなら、影をつけると少し印象が変わります。サイトとの調和を意識しながら、影をつけるかどうかは決めるようにしてください。

見出しh2

.post h2{
    background: #c50a0a !important;/*背景を赤く*/
    color: #fff !important;/*文字色を白く*/
    padding: 15px !important;
    border-top: none !important;
    border-bottom:none !important;
    border-radius: 3px;/*見出しの縁を丸く*/
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);/*影をつける*/ 
}

少し凝ったデザイン

サイトのテーマカラー（赤・黒）の2種を盛り込んで見るというちょっと凝ったデザインにしてみました。

見出しh2

.post h2{
    background: #c50a0a !important;/*背景を赤く*/
    color: #fff !important;/*文字色を白く*/
    border-left: 10px solid #484343;/*左に黒ラインをつける*/
    padding: 15px !important;
    border-top: none !important;
    border-bottom:none !important;
    border-radius: 3px;/*見出しの縁を丸く*/
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);/*影をつける*/ 
}

かなり凝ったデザイン

もはや遊んでます。スタイリッシュなブログとかだと、こんなデザインの見出しにしてもいいのかもしれませんけれど、、アフィリエイトサイトではこの形はよろしくないかもしれません(笑)

それでも採用するぜという勇者にはどうぞ。
h2見出し

.post h2{
    background: #c50a0a !important;/*背景を赤く*/
    color: #fff !important;/*文字色を白く*/
    border-left: 10px solid #484343;/*左に黒ラインをつける*/
    padding: 15px !important;
    border-top: none !important;
    border-bottom:none !important;
    border-radius:6px 30px;/*見出しの縁を丸く*/
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);/*影をつける*/ 
}

h3の見出しカスタマイズ

シンプルな見出し【タイプ1】

シンプルに行くならこの見出しで十分です。

見出しはそんなにキラキラさせなくても、読者に大見出しなのか小見出しなのかさえ分かれば良いのですから。実際、僕も見出しをシンプルにしていますが、そんなに読みにくいとか違和感を感じることはないかと思います。

以下のコードを追加するだけで、このような見出しに変更することができますよ。pxをいじれば線の太さが変わり、色もカラーコードを使えば自在に変更できます。

見出しh3

.post h3{
border-bottom:3px solid #c50a0a;
padding: 15px !important;}

シンプルな見出し【タイプ2】

見出しh3

.post h3{
border-bottom:none !important;
border-left: 10px solid #c50a0a;
padding: 15px !important;
}

font awesomeでアイコンを追加する

h2に続き、font awesomeでアイコンを追加するものも一応紹介しておきます。

シンプルさは減ってしまいますが、ちょっと遊び心がでて可愛くなるのがfont awesomeの良いところですね。こちらもフォントはfont awesomeから取ってくれば自由に変えることができますので、好みにカスタマイズしていってくださいませ！

h3小見出し

.post h3{
border-bottom:3px solid #c50a0a;;
padding: 15px !important;
}

.post h3:before {
  color:#c50a0a; /*アイコンの色*/
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  margin-right:10px;
  font-family:"FontAwesome";
  content:"\f058"; /*アイコンの種類*/
  font-weight:lighter;
  font-size:26px; /*アイコンの大きさ*/
  position: relative;
  top:-3px;
  display:inline-block;
}