どえりゃー学べる!サロン集客のためのブログマーケティングの教科書。

【無料プレゼント】お客様アンケートで作る!サロン集客の教科書はこちら

【必見!】ブログ記事内へ「見出し付きの囲み枠」を入れる方法

 
WRITER
 
この記事を書いている人 - WRITER -
サロン集客の先生。25歳で独立してトレーニングスタジオを開業。開業後、全く集客が出来ず預金残高5000円を切る状況まで陥る。そこで自分の商品価値をメッセージで伝えたところ、見事にV字回復して月商100万円を達成する。その集客経験から、商品価値をメッセージで伝える重要性を知る。サロン集客の先生の傍ら、日本初となる裏ももダイエット専門トレーナーとしても活動する。
詳しいプロフィールはこちら

皆さん、こんにちは。

サロン集客の先生のSHUNSUKEです。

 

今回は、ブログ記事内へ「見出し付きの囲み枠」を入れる方法について、ご紹介します。

囲み枠があるだけで、ブログ記事の読みやすさは、すごく変化します。

ぜひあなたのブログへも、囲み枠を入れてあげて下さい。

 

見出し付きの囲み枠
を入れる方法

囲み枠を入れるためには、ブログ記事のテキストへ「見出し付き囲み枠のHTMLコード」を入れる必要があります。

 

【1】まずは、ブログ記事を書く「投稿」の画面を出します。

 

【2】続いて、記事の右上にあります「テキスト」をクリックします。

 

【3】クリックしますと、テキスト専用の画面に切り替わります。

 

【4】テキスト内に、下記で紹介しております見出し付き囲み枠の「HTMLコード」をコピーして貼り付けましょう。囲み枠はたくさんありますので、あなたのブログのイメージ色に合わせて、選びましょう。

 

HTMLコード一覧

お好きなカラーのHTMLコードをコピーしまして、テキストへ貼り付けてあげましょう。

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #000066; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#0000ff; border:1px solid #0000ff; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #0000ff; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#ff0000; border:1px solid #ff0000; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #ff0000; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #ff1493; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#008000; border:1px solid #008000; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #008000; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#ff9933; border:1px solid #ff9933; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #ff9933; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#ffa566; border:1px solid #ffa566; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #ffa566; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

※こちらのカラーは薄いタイプになりますので、文字色を「黒色」にするとより見やすいです。

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#994C00; border:1px solid #994C00; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #994C00; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:#FFD400; border:1px solid #FFD400; padding-left:10px; font-size:1.16em;”><font style=”color:#000000; font-weight:bold;”>■タイトルはこちら■</font></div><div style=”border:1px solid #FFD400; padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
<div style=”background:rgb(184, 134, 11); border:1px solid rgb(184, 134, 11); padding-left:10px; font-size:1.16em;”><font style=”color:rgb(255, 255, 255); font-weight:bold;”>■タイトルはこちら■</font></div><div style=”background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);color:rgb(0, 0, 0);padding:10px; font-size:1em;”>本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

【5】最後に、「ビジュアル」画面に再度切り替えましたら、ちゃんと表示されているかチェックしましょう。

 

以上、見出し付きの囲み枠を入れる方法でした。

【無料プレゼント】
サロン経営のノウハウが詰まった
〜サロン集客の教科書〜

 

50ページ以上のサロン集客の教科書E-book。

サロン経営で必要な内容をご紹介します。

しかも、実践的で成果に繋がるノウハウを厳選ピックアップしました。

サロン経営のために必要なことがあります。

それは、正しい方法を継続的に実践すること。

サロン経営は1日にしてならず。

ぜひ、今のうちにゲットしてください。

この記事を書いている人 - WRITER -
サロン集客の先生。25歳で独立してトレーニングスタジオを開業。開業後、全く集客が出来ず預金残高5000円を切る状況まで陥る。そこで自分の商品価値をメッセージで伝えたところ、見事にV字回復して月商100万円を達成する。その集客経験から、商品価値をメッセージで伝える重要性を知る。サロン集客の先生の傍ら、日本初となる裏ももダイエット専門トレーナーとしても活動する。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© サロン集客の先生SHUNSUKE , 2018 All Rights Reserved.