必然的に選ばれる続ける女性起業家のためのブランディング/コンサルティング|HP制作

アメブロカスタマイズに使える『大人っぽいカラー』の『かわいい囲み枠』 アメブロを読みやすくしよう!

 
この記事を書いている人 - WRITER -
ブランディング&マインドサポートでコンサルした方は2か月目で月商150万円突破など実績多数。国内最大手クレジットカードブランドJCBにて企画営業として10年以上、キャンペーン・広告・HP管理・システム対応など幅広いビジネス実践経験と、電鉄グループなど最大手クライアントを担当。個人起業家様、経営者様へのWEBを使ったブランディングと仕組み構築が強み。素晴らしいサービス・商品を持っている女性起業家をサポートすることが私の役割。女性の活躍で社会がもっとよくなると信じ活動。富山県出身、西宮市在住、アラフォー3児のママ。

アメブロカスタマイズに使えるおしゃれな大人カラーの枠囲みをこちらで公開していきます!

数を少しずつ増やしていきますので、楽しみに&ご活用ください!
※コードがもし違っている(見本と違う色になった・・・)などあれば修正しますので、教えてください。

使い方の動画もアップしました!

 

【動画講座のご案内】


・アメブロをホームページっぽくしたい!
素敵なTOP画像も作って自分でカスタマイズしたい!
という方には、アメブロの使い方から集客動線・画像制作までAll in Oneですべて学べる動画講座がオススメ。
1週間で110名が購入!・内容が良すぎて口コミで売れている!・スキマ時間で見て自分で作れる内容!

 詳細を見てみる 

 

 

 

 

アメブロカスタマイズ枠囲み オシャレな大人カラー

 

・丸みがあるものは優しい雰囲気。
・角がキリっとしているのはきちんとした感じ。
・中に色がついているもの、付いていないもの。
・タイトルを入れる場所があるもの(記事下のメニューにオススメ)
・ご自分のテーマカラー、サブカラーに合ったものを 使ってください。

・色を自分で変更することも可能です。 参考https://www.colordic.org/

 

 

アメブロカスタマイズ枠囲み の作り方(動画)

 

動画中に出てくる「リソースからPDFをダウンロード」というのは、このページのことなので、下記のコードをコピ―して使ってくださいね!

分かりやすかったら、チャンネル登録おねがいします(^-^)

 

 

アメブロカスタマイズ 丸みのある枠囲み

 

①ローズ・背景色あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #e95464; border: #e95464 solid 1px; line-height: 2.5; margin: 3px;padding: 0.5em 1.5em; background: #fff2e6; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。<span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

②ローズ・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #e95464; border: #e95464 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

③ピンク・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #f291b5; border: #f291b5 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #fceff4; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

④ピンク・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #f291b5; border: #f291b5 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑤菜の花イエロー・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #ffd62e; border: #ffd62e solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffde; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑥菜の花イエロー・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #ffd62e; border: #ffd62e solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑦カフェブラウン・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #bf964b; border: #bf964b solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #f9f3e6; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑧カフェブラウン・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #bf964b; border: #bf964b solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑨シーグリーン・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #1fa68d; border: #1fa68d solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #def4ec; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑩シーグリーン・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #1fa68d; border: #1fa68d solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑪オリーブグリーン・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #87bf4e; border: #87bf4e solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #f4fbd9; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑫オリーブグリーン・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #87bf4e; border: #87bf4e solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑬ロイヤルブルー・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #5b8fde; border: #5b8fde solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #f9fcff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑭ロイヤルブルー・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #5b8fde; border: #5b8fde solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑮ミッドナイトブルー・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #191970; border: #191970 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #f8f8ff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑯ミッドナイトブルー・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #191970; border: #191970 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

⑰ラベンダー・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #8b73bf; border: #8b73bf solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #efe2fb; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑱ラベンダー・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #8b73bf; border: #ffffff solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #efe2fb; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑲こっくりグレー・背景あり・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

 

このコードをコピー&ペーストして使う

<p style="color: #717b84; border: #717b84 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ececec; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

⑳こっくりグレー・背景なし・角まるみ

本文をここに入れてください。 改行したい時は「Shift+Enter」です。

 

このコードをコピー&ペーストして使う

<p style="color: #717b84; border: #717b84 solid 1px; line-height: 2.5; margin: 3px; padding: 0.5em 1.5em; background: #ffffff; border-radius: 0.35em; font-size: 1.1em;">
本文をここに入れてください。 <span style="color: #808080;">改行したい時は「Shift+Enter」です。</span></p>

 

アメブロカスタマイズ タイトルを入れる場所があるもの(記事下のメニューにオススメ)

 

ここに見出しや文章
・メニューを ここに載せる
・改行する場合は、「Shift+Enter」
このコードをコピー&ペーストして使う

<div style="color: #808080;background:#b0e0e6; border:1px solid #b0e0e6; padding-left:10px; font-size:1.16em;"><span style="font-weight:bold;">ここに見出しや文章</span><br> </div> <div style="border:1px solid #b0e0e6; padding:10px; font-size:1em;">・メニューを ここに載せる<br> ・改行する場合は、「Shift+Enter」<br><br> </div>

この記事を書いている人 - WRITER -
ブランディング&マインドサポートでコンサルした方は2か月目で月商150万円突破など実績多数。国内最大手クレジットカードブランドJCBにて企画営業として10年以上、キャンペーン・広告・HP管理・システム対応など幅広いビジネス実践経験と、電鉄グループなど最大手クライアントを担当。個人起業家様、経営者様へのWEBを使ったブランディングと仕組み構築が強み。素晴らしいサービス・商品を持っている女性起業家をサポートすることが私の役割。女性の活躍で社会がもっとよくなると信じ活動。富山県出身、西宮市在住、アラフォー3児のママ。

- Comments -