【アメブロで使える見出し＆枠線】水玉模様・ドット(大きめ)の見出し♡コピペで簡単

 

 

アメブロの記事で使える

『横ラインの見出し＆枠線』を紹介します。

 

 

見出しの使い方や色の変更方法などは

こちらの記事で説明しています看板持ち

右囲み枠をアメブロ記事に設定する方法

右​枠線や囲み枠の線の形・太さ・色を変える方法

 

 

見出し＆枠線は他にもたくさんあります飛び出すハート

右アメブロで使える♡枠線線＆アンダーライン一覧

 

 

見出しを変更する場合は

最初と最後の「p」を

● 大見出しは「h2」

● 中見出しは「h3」

● 小見出しは「h4」に変更

 

 

水玉模様・ドット(大きめ)の見出し＆枠線

 

 

アメブロ基本カラー１１色気づき

 

 

● ①マゼンタ

ここに見出し

 

<p style="background-color:#FFDFEF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ②ベビーピンク

ここに見出し

 

<p style="background-color:#FFF8FC ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ③ピンク

ここに見出し

 

<p style="background-color:#FFE9F4 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ④コーラル

ここに見出し

 

<p style="background-color:#FFE9E9 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑤フラミンゴピンク

ここに見出し

 

<p style="background-color:#FFEFEF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑥ブルーパープル

ここに見出し

 

<p style="background-color:#E9E9FF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑦ロイヤルブルー

ここに見出し

 

<p style="background-color:#E0EFFF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑧オーキッド

ここに見出し

 

<p style="background-color:#FAF5FF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑨アメジスト

ここに見出し

 

<p style="background-color:#F6EDFF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑩アイスブルー

ここに見出し

 

<p style="background-color:#E4F7FF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ⑪グレー

ここに見出し

 

<p style="background-color:#EFEFEF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>


 

 
 
 

大人可愛いカラー10色気づき

 
 

● ティファニーブルー

ここに見出し

 

<p style="background-color:#EDFDFB ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● アンバーローズ

ここに見出し

 

<p style="background-color:#F8E0E0 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● くすみピンク

ここに見出し

 

<p style="background-color:#FDF5F5 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● くすみパープル

ここに見出し

 

<p style="background-color:#F4F1F8 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● オールドローズ

ここに見出し

 

<p style="background-color:#EFE3E6 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● くすみブルー

ここに見出し

 

<p style="background-color:#DEE5EF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● くすみグリーン

ここに見出し

 

<p style="background-color:#ECEFEC ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● くすみグレー

ここに見出し

 

<p style="background-color:#F1F5F8 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● ライトベージュ

ここに見出し

 

<p style="background-color:#FFFBF8 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 

● グレージュ

ここに見出し

 

<p style="background-color:#F7F6F5 ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p>&nbsp;</p>

 

 
 

他の種類の枠線はコチラ

▶︎他の見出し一覧はこちら♡

 

 

 

ジュジュちゃん

ジュジュちゃん
 

なんだか上手にできない！などありましたら遠慮なくコメントに残してくださいね♬


 

 

 設置の方法や困ったときにはこちらをCheck気づき

 

▶︎囲み枠を設置するやり方
▶︎改行したら枠が増えた！という時の対処法と元に戻す方法
▶︎囲み枠の色を変える方法

 

 

 他にもおしゃれな囲み枠や見出しがたくさん飛び出すハート

 

▶︎アメブロ見出し素材500選
▶︎\大人気♡/ 大人かわいい大理石と水玉の囲み枠
▶︎ダマスク柄の囲み枠
▶︎シンプルな囲み枠＆枠線
▶︎タイトル付き囲み枠
▶︎ニュアンスカラーの囲み枠
 

 

 

 

＼LINE公式登録で無料プレゼント♡／
SNSで世界観をつくる8大特典

↓　　↓　　↓　　↓　　↓

 

LINE公式

 

LINE公式登録でSNSの世界観をつくる8大プレゼント

 

画像をクリックして登録♡
LINE画面が表示されない方は
@joujounetでID検索
(@も含めて検索してください)

 

あなたの想いと魅力を届ける
世界観づくりをサポートしています。

SNSで集客できない方
世界観づくりでお悩みの方
必要な人に価値を届けたい方
SNSで選ばれ売上をあげたい方

ぜひLINE登録してくださいね♡

 

 

 

Service

 

アメブロカスタマイズ／ライティング添削
ヘッダー／バナー／HP制作／インスタテンプレ作成
Instagramコンサル／Canva／LINEリッチメニュー
デュプロマ・テキスト・講座資料の作成
Lステップ代行構築／LINE運用アドバイス

 

SNSマーケティングをもとに幅広く
女性に響くデザインで
あなたらしさを叶えます♡

 

ハンドメイドやエステサロン
カフェ&レストラン・英語教室
アロマ・ネイル・婚活塾など

全国各地からご依頼・コンサルで一人一人
寄り添ったサポートを心がけています♡

 

 

 

 

 

 

＼３人のママでも理想の働き方を手に入れた方法✨／

ただの主婦がWebデザイナーになった理由

 

＼インスタはこちら♡Follow Me✨／

思わず二度見され心を奪うデザインで世界観をつくるInstagramはこちら

 

LINE公式マーケティングやデザイン作りのヒントを発信♡

視線を集め心を奪う世界観のつくりかたホームページ/ジュジュネット

 

心ときめく食器とお花が作れるポーセラーツ＆フラワーインテリア
JouJouetteの教室ブログはこちら♡

ポーセラーツ・フラワーインテリア教室ジュジュエッテのブログはこちら


Thank you for Reading

JOUJOUNET ダイヤモンドジュジュネット

▶︎お問合せ（LINE@ID → @joujounet ）
▶︎Instagram  ▶︎Facebook  ▶︎HP