アメブロカスタマイズに使える『大人っぽいカラー』の『かわいい囲み枠』 アメブロを読みやすくしよう!
アメブロカスタマイズに使えるおしゃれな大人カラーの枠囲みをこちらで公開していきます!
数を少しずつ増やしていきますので、楽しみに&ご活用ください!
※コードがもし違っている(見本と違う色になった・・・)などあれば修正しますので、教えてください。
使い方の動画もアップしました!
・アメブロをホームページっぽくしたい!
・素敵な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>