~アメブロの記事の書き方~

【永久保存版】コピペだけで使えるアメブロの見出しのデザイン6選

Ameblo

どうも、こんにちは

 

今回はコピペだけで使えるアメブロの見出しデザインについて書いていきます。一般的なデザインだけだと少しかわいいかったり、きれいに見せるためにはあまりできません。なので、今回を機にデザインをコピペだけで使えるデザインを紹介していきますのでさっそくみていきましょう。

簡単きれいなデザイン4選

二重線

二重線です。styleの中を変えることによりさまざまなデザインを作ることができますが、今回は文字の下に二重線を作りました。#OOOOOのところを変えることによって色が変化します。

 

【オレンジ色】

タイトル
<div style="border-bottom: double 5px #FFC778;">タイトル</div>
【ピンク色】
タイトル
【緑色】
タイトル

上下に線

上下に線があるバージョンになります。私が運営しているこのブログの見出しはこちらの見出しを少し加工したものです。

【青色】

タイトル
<div style="color: #364e96;  padding: 0.5em 0; border-top: solid 3px #364e96; border-bottom: solid 3px #364e96;">タイトル</div>
【ピンク色】
タイトル
【オレンジ色】
タイトル

全体を枠線で囲む

全体を枠線で囲んでいます。角も丸みを帯びるようにしました。

 

タイトル
<div style="color: #364e96;
  border: solid 3px #364e96;
  padding: 0.5em;
  border-radius: 0.5em;">タイトル</div>
【赤色】
タイトル
【緑色】
タイトル

蛍光マーカー

蛍光マーカーのように下に線がいくデザインです。

 

タイトル

 

<div style=" background: linear-gradient(transparent 70%, #a7d6ff 70%);">タイトル</div>

 

【ピンク色】

タイトル
【黄色】
タイトル

少し凝ったデザイン2選

左に線があるデザイン

タイトル
<div style="color: #010079;
  text-shadow: 0 0 5px white;
  border-left: solid 7px #010079;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);">タイトル</div>

背景がグラデーション

タイトル
<div style="position: relative; padding: 0.1em 0.5em; background: linear-gradient(to right, #ffba73, transparent); color: #545454;">タイトル</div>

まとめ

ということで今回はコピペだけで使えるアメブロの見出しのデザインを6選紹介しました。HTML、CSSを学べばデザインの加工が分かりやすくなると思います。私も少し勉強していじっています。また、#OOOOOの部分は色を決めるための部分でもあります。CSSの色コード表と調べたら自分が好きな色で変えることができるのでぜひ変えてみましょう。特にアメブロの場合は見出しや文字の装飾におけるデザインはあまり得意ではありません。なので今回を機にデザインの勉強をしてみるといいでしょう。

タイトルとURLをコピーしました