アメブロカスタマイズ

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

更新日:

アメブロの新エディタには、見出し機能があります。

見出しは使い方が分かると、文章が読みやすくなることに加えて、SEO的にも若干優遇されやすいため、大変便利な機能です。
しかし、そのまま使うと、文字が大きくて結構武骨な雰囲気です。

新CSS編集デザインでのカスタマイズ方法をお伝えします。

アメブロ 見出しのカスタマイズ

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

 

色コードはこちらからお好きなものを選びましょう

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

デザインの変更→CSS編集用デザイン→CSSの編集をクリック

ブログデザインCSSの一番下までスクロールして下記タグを入れます。

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

h3 {

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

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

大見出しは、h2の指定になります。
中見出しはh3の指定になります。 中見出しの下に、細い直線が入る設定にしました。
小見出しは、h4の指定になります。 特に見出しの下に指定はしていません。

カスタマイズ例

border-bottom:1px solid #000000;

線の種類:dotted…ドット/solid…直線/dashed…破線/double…二重線

見出し設定のポイント

大中小とフォントサイズを小さくしていく。

装飾を派手→簡素にしていくとバランスが良くなりまよ。








おすすめ記事

1

SNS集客からWeb集客へ時代が変化しつつある中、ホームページサービスにあたらめて注目が集まっています。 WordPress、Jimdo、Ameba Ownd、Wixなどなど色々ホームページ制作のサー ...

2

WordPressを使用する際に、迷うのはデザインテーマ。 それもそのはず。 WordPressのデザインテーマは、日本のみならず世界中で作られています。 本当にたくさんテーマがあるので、どれが良いの ...

3

世界で一つだけ、自分だけのオリジナルのものを作るハンドメイドは、最近人気の起業です。 書籍もたくさん出ていますし、作品をminneやクリーマなどに出展したり自分でショップカートを持って販売しているハン ...

4

レースや枠、ライン画像など無料で使えるWeb素材のリンク集を作ってみました。 自作でチラシやデザイン制作、アメブロカスタマイズを行う際にご利用下さい。 無料・商用利用可能、改変可能、リンク不要のモノを ...

5

ホームページやブログカスタマイズをするとき、デザインパーツ全てを自分で作るのは正直大変です。 そこで登場するのが、市販の素材集。 ヘビロテする本当に使える素材集をご紹介します。 本当に使える可愛いもの ...

-アメブロカスタマイズ
-,

Copyright© Bloomin! , 2018 All Rights Reserved.