● アメブロの囲み枠、文字の幅に合わせる方法!これなら使いやすい!

こんにちは、アメブロコンサルの石川聡です。

囲み枠、使っている方も多いですよね。

たとえばこんな感じ。

ここに文章

長い文章を入れている場合には、横幅がいっぱいになっても大丈夫。

しかし、短いメッセージの場合には、ちょっと不満を持つことがあるんですよ。

ここ大事!

みたいに、強調したいような時。

横幅が、なんだか長すぎないか?

と思うんです。

そこで、HTMLのタグを入れることで文字に合わせた横幅になるんです。

ここ大事!



タグについて

まず、タグについて少しお話します。

ここに文章

のタグは、こちら。

<div style="background: #f5c7ca; border-radius: 10px; padding: 15px;">ここに文章</div>

はい、これがタグです。

HTML表記にすると、このようになっています。

では、次のようにしたい場合にはどうしたら良いのか?

ここ大事!


簡単です。

display:inline-block;

という記述を追記します。

どこに追記するのか?

style="(このどこかに追記)"

です。""で囲まれている間に入れるんです。

<div style="background: #f5c7ca; border-radius: 10px; padding: 15px;">ここに文章</div>

ですが、style="のすぐ後に追記してみました。

<div style="display:inline-block; background: #f5c7ca; border-radius: 10px; padding: 15px;">ここに文章</div>

はい、いかがでしょうか。

ここでは、あえて目立つように、display:inline-block;を緑色に変えていますが、実際には色は変わりませんよ。

説明のために色を付けています。



応用して、こんなふうにも!

↓ここ大事↓


重要な記述や文章などを入れると、強調されて見えますよね。

図を入れてこんなふうにも!

ここ大事


バナーを作るのは大変だけど、こうした書き方を利用すると、ちょっと違った見せ方ができるんです。

多少、タグが分かる人は、色を変えてみたり、バランスをみながら変更してみてください。

一日たった3分読むだけで、あなたのブログづくりが改善される♪


アメブロ活用講座メールセミナーでは、サロン・教室・相談系のお仕事をされているあなたが魅力的なブログづくりをできるような情報を配信しています。

なんと、毎朝9時にお手元に届くから安心♪

宜しければメールセミナーへ登録をお願いします。


未来のお客さまが集まるアメブロの仕組みづくり
教室・サロン・お店・カウンセリングであなたがお客さまから選ばれる先生、エステティシャン、オーナー、カウンセラーになるブログづくり講座

アメブロ活用法ブログ講師:石川聡
山梨県甲府市千塚3-8-5
090-9310-1160

お客さまが集まるアメブロの教科書
未来のお客さまが集まるアメブロ活用講座
3ヶ月で理想のお客さまが集まるブログづくり
あなたのブログの魅力を見つけるブログ診断!
ブログづくりと仕事の悩みがその場で解決
魅力が3倍!ブログのデザインとヘッダー作成
お客さまの声
お問い合わせ
メール satoshi.vw@gmail.com
電話 090-9310-1160

東京、神奈川、埼玉、千葉、大阪、愛知、北海道、三重、静岡、京都、和歌山ほか全国からご相談を受けています。集客やお客さまの心をつかむコツが身につく。

アメブロやブログ、ワードプレスを使い未来のお客さまが集まる仕組づくり。ファンを増やし申し込みが入るブログが完成します!