アメブロ可愛い囲み線 リザストイベント枠線 リザストメルマガ枠線の枠で囲む方法
このサイトは 「リザスト枠線」というキーワードで検索することが出来ます。
![]()
枠線の作り方
↑↑のような枠線の作り方
アメブロやリザストイベント、リザストメルマガで使うことができる枠線について
![]()
【アメブロ編】
![]()
【リザスト イベント編】
![]()
【リザストメルマガ編】
作り方は最後にあります
最後までみてくださいませ～
まずはこんなデザインいかがでしょうか。
背景1色
<fieldset style="background:#C48793; padding:10px; border:none;"><span style="color:#ffffff;">本文</span></fieldset>
<fieldset style="background:#E8ADAA; padding:10px; border:none;"><span style="color:#ffffff;">本文</span></fieldset>
<fieldset style="background:#ECC5C0; padding:10px; border:none;"><span style="color:#ffffff;">本文</span></fieldset>
<fieldset style="background:#EDC9AF; padding:10px; border:none;"><span style="color:#ffffff;">本文</span></fieldset>
■111111111111
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 5px;padding:10px;color:#333333;background:#ffe0f0;box-shadow:0 0 0 5px #ffe0f0;border:dashed 2px #ffffff;"><span style="color:#ff007d;">■</span></div>
■
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 5px;padding:10px;color:#333333;background:#F7FE2E;box-shadow:0 0 0 5px #F7FE2E;border:dashed 2px #ffffff;"><span style="color:#ff007d;">■</span></div>
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 5px;padding:10px;color:#333333;background:#58FA58;box-shadow:0 0 0 5px #58FA58;border:dashed 2px #ffffff;"><img alt="宝石赤" draggable="false" height="16" src="
https://stat100.ameba.jp/blog/ucs/img/char/char2/118.gif" width="16"></div>
■
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 5px;padding:10px;color:#333333;background:#a0965a;box-shadow:0 0 0 5px #a0965a;border:dashed 2px #ffc0cb;"><span style="color:#ffbfbf;">■</span></div>
青の下線
<div style="border-bottom: 2px solid #191970; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">本文</div>
ピンクの下線
<div style="border-bottom: 2px solid #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">ピンクの下線</div>
青の下線
<div style="border-bottom: 2px solid #191970; border-top: 2px solid #191970; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">青の下線１１１</div>
ピンクの下線
<div style="border-bottom: 2px solid #ffa3d1; border-top: 2px solid #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">ピンクの下線</div>
枠線の作り方１
<div style="border: 1px dashed #000000; padding: 15px;">枠線の作り方１</div>
枠線の作り方２
<div style="border: 1px dashed #f4a460; padding: 15px;">枠線の作り方２</div>
枠線の作り方３
<div style="border: 1px dashed #0000ff; padding: 15px;">枠線の作り方３</div>
ピンクの枠線
<div style="border: 1px dashed #fd5dac; padding: 15px;">ピンクの枠線</div>
枠線の作り方１
<div style=" background:#000000; padding: 15px;"><span style="color: rgb(0, 190, 255);">枠線の作り方１</span></div>
枠線の作り方2
<div style=" background:#ffcccc; padding: 15px;"><span style="color: rgb(0, 190, 255);">枠線の作り方2</span></div>
枠線の作り方3
<div style=" background:#ff9933; padding: 15px;"><span style="color: rgb(0, 190, 255);">枠線の作り方3</span></div>
枠線実践１
<div style="border: 1px solid #ffc0cb; padding: 15px;">枠線実践１</div>
枠線実践２
<div style="border: 1px solid #afeeee; padding: 15px;">枠線実践２</div>
枠線実践３
<div style="border: 1px solid #dda0dd; padding: 15px;">枠線実践３</div>
影付き枠線１
<div style="padding:10px; border:1px solid #4e80ff; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow: 5px 5px 5px #ccc;">影付き枠線１</div>
影付き枠線２
<div style="padding:10px; border:1px solid #ffc0cb; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow: 5px 5px 5px #ccc;">影付き枠線２</div>
影付き枠線３
<div style="padding:10px; border:1px solid #afeeee; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow: 5px 5px 5px #ccc;">影付き枠線３</div>
<fieldset><legend><img src="http://stat100.ameba.jp/blog/ucs/img/char/char2/115.gif" style="line-height: 1.5;"><strong><font color="”#ff0000;”">ここにタイトル１</font></strong></legend>見出し付き囲み線１<br>
本文</fieldset></div>
<fieldset><legend><img src="http://stat100.ameba.jp/blog/ucs/img/char/char2/116.gif" style="line-height: 1.5;"><strong><font color="”#FF8C00;”">ここにタイトル２</font></strong></legend>見出し付き囲み線２<br>
本文</fieldset>
<fieldset><legend><img src="http://stat100.ameba.jp/blog/ucs/img/char/char2/118.gif" style="line-height: 1.5;"><strong><font color="”#FF8C00;”">ここにタイトル３</font></strong></legend>見出し付き囲み線３<br>
本文</fieldset>
![]()
ここにタイトルを入れます。1見出し付き囲み線 1
本文
<div style="background:#eb6877; border:1px solid #eb6877; padding-left:10px;"><font style="color:#ffffff; font-weight:bold;"><img src="http://stat100.ameba.jp/blog/ucs/img/char/char2/031.gif" style="line-height: 1.5;"> ここにタイトルを入れます。1</font></div><div style="border:1px solid #eb6877; padding:10px;">見出し付き囲み線 1<br>
本文</div>
![]()
ここにタイトルを入れます。2見出し付き囲み線 2
本文
<div style="background:#ffa500; border:1px solid #ffa5007; padding-left:10px;"><font style="color:#ffffff; font-weight:bold;"><img src="http://stat100.ameba.jp/blog/ucs/img/char/char2/031.gif" style="line-height: 1.5;"> ここにタイトルを入れます。2</font></div><div style="border:1px solid #ffa500; padding:10px;">見出し付き囲み線 2<br>
本文</div>
![]()
ここにタイトルを入れます。3見出し付き囲み線 3
本文
<div style="background:#a0522d; border:1px solid #a0522d; padding-left:10px;"><font style="color:#ffffff; font-weight:bold;"><img src="http://stat100.ameba.jp/blog/ucs/img/char/char2/031.gif" style="line-height: 1.5;"> ここにタイトルを入れます。3</font></div><div style="border:1px solid #a0522d; padding:10px;">見出し付き囲み線 3<br>
本文</div><br>
ここにタイトルを入れます
<div style="padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold; border-bottom-color: rgb(0, 0, 102); border-left-color: rgb(0, 0, 102); border-bottom-width: 2px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;">この記事も参考にして！</div><br><br><br> この記事も参考にして！ピンク
<div style="padding: 0px 0px 1px 5px; font-weight: bold; border-bottom-color: rgb(255, 0, 153); border-left-color: rgb(255, 0, 153); border-bottom-width: 2px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;"><span style="font-size: 18px;">この記事も参考にして！ピンク</span></div>
この記事も参考にして！金
<div style="padding: 0px 0px 1px 5px; font-weight: bold; border-bottom-color: rgb(255, 204, 153); border-left-color: rgb(255, 204, 153); border-bottom-width: 2px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;"><span style="font-size: 18px;">この記事も参考にして！金</span></div>
![]()
作成方法![]()
①HTML表示
②ソースを入れる
③通常表示
④出来上がり
![]()
①イベント→イベント案内の編集
②ツール
③コードを入れる
④OK ![]()
①メルマガ編①メルマガ記事作成
②写真付HTMLメール
③ツール
④ソースコード
⑤コードを貼り付ける
⑥OK
リザーブストック全体設定マニュアル
リザーブストック個別予約管理
リザーブストックイベント/グループレッスン管理
リザーブストックメルマガ/ステップメール/ファーストアンサー 
リザーブストックショップ/契約商品 
リザーブストック汎用フォーム 
メールひな形とは 
注意
リザストメール 「登録未完了」お客様が登録が出来ない場合の対処方法
【アメブロ編】
ここにタイトルを入れます。1
作成方法
