PC・ブログ初心者の方の
ブログカスタマイズサポーター野口陽子です。

 

コピペで使うときは「HTML表示」で貼り付けてくださいね♪
改行するときは「Shift+Enter」でしてください。

 

右矢印 「記事内に枠を設置する方法」はこちら

右矢印 WEB色見本 HTLMLコード

右矢印 ブログ記事に超簡単に囲み枠を作れるツール

「アメケア」を活用してみる

 

 

 

 

ブログで告知をするときによく使う

「お申し込みはこちら」

「お問い合わせはこちら」

 

これって普通にテキストでもいいのですが

ちょっと可愛いとお客様にもわかりやすいし

自分も何だかちょっと嬉しいハート

 

コピペで設置してみましょう~
コピーして「HTML表示」で貼り付けてくださいね♪
改行するときは「Shift+Enter」でしてください。

 

パステル可愛いボタン枠①

 

 

〇〇〇はこちら

 

<div style="background: #ffeaff; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;">〇〇〇はこちら</div>

 

 

〇〇〇はこちら

 

<div style="background: #ff69b4; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #ff0000; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>


 

〇〇〇はこちら

 

<div style="background: #ee82ee; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #ffa07a; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #ffa500; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #ffd700; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#000000; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #008000; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #7fffd4; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#000000; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #0000ff; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

〇〇〇はこちら

 

<div style="background: #4b0082; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

 

カラーはピンクマーカーの部分のコードを変更します。

「background: #4b0082; 」
右矢印 WEB色見本 HTLMLコード

 

 

<div style="background: #4b0082; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;"><font style="color:#ffffff; font-weight:bold;">〇〇〇はこちら</font></div>

 

 

枠のサイズは「width:200px」の

数字を変更します。

文字のカラーは「color:#ffffff

のコードを変更します。

 

枠の色に合わせて文字の色も

見えやすいように変更したほうがいいですね。

 

またボタンにリンクを貼りたいときは

 

<a href="リンクしたいアドレス(URL)" target="_blank"><div style="background: #ffeaff; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;">〇〇〇はこちら</a></div>


黄色のマーカー部分を追加します。
リンクしたいアドレス(URL)」
には「http://~」から始まる

リンクを貼りたいページやサイトの

アドレス(URL)をコピペします。

 

サンプル

 

<a href="https://blog-customize.amebaownd.com/" target="_blank"><div style="background: #ffeaff; padding: 15px; border: none; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;width:200px;text-align: center;">詳細はこちらから</a></div>

 

 

右矢印 「記事内に枠を設置する方法」はこちら

 

 

 

 

●ブログカスタマイズの各種メニューはこちらからどうぞ♪

  

 

 

まずは相談したい!という方はこちら
LINE@お友達登録で60分無料相談出来ます。