• ホームページ
    ホームページサービスはどれを使えばよい?
    2017年2月16日
  • ウェブサービス
    ママ向け在宅&アルバイト求人サイト「mama works」
    2017年1月25日
  • ウェブサービス
    ハンドメイド作家さんに朗報!ココナラハンドメイドがこの春オープン
    2017年3月9日
  • ウェブサービス
    カンタンに自分でバナーやヘッダーが作れる!バナープラス
    2017年9月8日
  • 撮影
    撮影に便利そう!折り畳み撮影ボックスを発見
    2017年1月23日
  • ホームページ
    グーペは、お店やお教室のホームページにぴったりのサービス
    2017年6月21日
  • WordPress
    初心者向け!WordPress日本語無料テーマ5選
    2016年12月27日
  • WordPress
    おすすめのレンタルサーバー比較
    2017年9月10日

アメブロの新エディタには見出し機能がありますが、 そのまま使うと、文字が大きくて結構武骨な雰囲気です。 新CSS編集デザインでのカスタマイズ方法をお伝えします。

アメブロ 見出しのカンタンカスタマイズ(新CSS)

サンプルとして↓こんな感じで↓見出しを作ってみます。

 

サンプルとしてこんな感じで見出しを作ってみます。 色コードはこちらからお好きなものを選びましょう。  

大見出しの場合

[amb-component="entryBody"]

h2 {
font-size:○○px;
margin: 0.83em 0;
border-bottom:3px double #000000;
}

 

font-size:○○pxのところは、大きな見出しなのでフォントサイズも大きめにしてみましょう。
border-bottom:3px double #000000; ですが、二重線の設定をしていますので、こちらは変更しても構いません。  

中見出しの場合

[amb-component="entryBody"]

h3 {
font-size: ○○px;
margin:10px 0 20px 0;
border-bottom:1px solid #000000;
}

 

 中見出しはh3の指定になります。 中見出しの下に、細い直線が入る設定にしました。  

小見出しの場合

[amb-component="entryBody"]

h4 {
font-size:○○px;
margin: 1.33em 0;
}

 

小見出しは、h4の指定になります。 特に見出しの下に指定はしていません。  

見出し設定のポイント

見出しの理論は以前書いたこちらを参照にしてください。 大中小とフォントサイズを小さくしていく。 装飾をちょっと豪華→簡素という感じにしていくとバランスがとれるかなと思います。

 

また、border-bottom:1px solid #000000; 線の種類はこんな感じです。
お好みの線を入力してください。

 

dotted…ドット/solid…直線/dashed…破線/double…二重線

関連キーワード
ブログの関連記事
  • オシャレ&カンタンに作れるヘッダー画像の作り方のコツ
  • 起業ブログ、アメブロとWordPressはどちらを使う?
  • <重要>アメブロテンプレート&アメブロカスタマイズ講座をご購入の方へ
  • アメブロ Perfect GuideBook 改訂第3版が4月27日に発売
  • アメブロのアクセス数と実際のPVの差は?
  • アメブロからWordPressに移行してもうまくいかない理由

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事
コンテンツ
今日は、ちょっと色々なサロンのサイトやブログを見ていたのですが、 気づいたことがたくさんありました。 そこで気づいたことをシェアしたいと思い...
infomation
女性起業家のための通信講座 Bloom Web Schoolを本日オープンしました。 Contentsどこに住んでいても、いつでも好きな時に...
ブログ
アメブロにハッシュタグ機能ができてずいぶん経ちました。 しかしこのハッシュタグって、実際にブログ訪問にきちんと繋がっているのでしょうか? 繋...