テレビ出演情報やLIVE告知の囲み枠

こんにちは、パソコンワンポイントレッスン！

PCインストラクターの川上です。

どうも最近、パソコンからでなく、iPhoneなどのスマホからアメブロ投稿している人が多いようでして･･･

ですので、ちょいとアメブロ囲み枠を増やしておきます（笑）

よければ、勝手に使ってください～（笑）
（枠の作り方はこちらをご覧くださいませ→「アメブロ　枠」）

【ピンク点線・背景グレー・文字シャドウ】

枠内の記事本文

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">枠内の記事本文</div><br><br><br>

＜文字シャドウなし＞

枠内の記事本文

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;word-break:break-all;">枠内の記事本文</div><br><br><br>

複数行欲しい方はこちら↓

・１行目
・２行目
・３行目
・４行目
・５行目

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br><br><br>

＜文字シャドウなし＞

・１行目
・２行目
・３行目
・４行目
・５行目

【ピンク二重線・背景グレー・文字シャドウ】

枠内の記事本文

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px double #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">枠内の記事本文</div><br><br><br>

＜文字シャドウなし＞

枠内の記事本文

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px double #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;word-break:break-all;">枠内の記事本文</div><br><br><br>

複数行欲しい方はこちら↓

・１行目
・２行目
・３行目
・４行目
・５行目

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px double #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br><br><br>

＜文字シャドウなし＞

・１行目
・２行目
・３行目
・４行目
・５行目

【ピンク枠線・背景グレー・文字シャドウ】

枠内の記事本文

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px solid #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">枠内の記事本文</div><br><br><br>

＜文字シャドウなし＞

枠内の記事本文

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px solid #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;word-break:break-all;">枠内の記事本文</div><br>

複数行欲しい方はこちら↓

・１行目
・２行目
・３行目
・４行目
・５行目

<div style="background-color:#f7f7f7;color:#000;margin:10px 6px;padding:16px;border:6px solid #ffb6c1;border-radius:4px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br><br><br>

＜文字シャドウなし＞

・１行目
・２行目
・３行目
・４行目
・５行目

【赤点線・背景ピンク・文字シャドウ】

枠内の記事本文

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">枠内の記事本文</div><br><br><br>

＜文字シャドウなし＞

枠内の記事本文

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;word-break:break-all;">枠内の記事本文</div><br><br><br>

複数行欲しい方はこちら↓

・１行目
・２行目
・３行目
・４行目
・５行目

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br><br><br>

＜文字シャドウなし＞

・１行目
・２行目
・３行目
・４行目
・５行目

【赤二重線・背景ピンク・文字シャドウ】

枠内の記事本文

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px double #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">枠内の記事本文</div><br><br><br>

＜文字シャドウなし＞

枠内の記事本文

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px double #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;word-break:break-all;">枠内の記事本文</div><br><br><br>

複数行欲しい方はこちら↓

・１行目
・２行目
・３行目
・４行目
・５行目

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px double #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br><br><br>

＜文字シャドウなし＞

・１行目
・２行目
・３行目
・４行目
・５行目

【濃いピンク枠線・背景薄いピンク・文字シャドウ】

枠内の記事本文

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px solid #ff6666;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">枠内の記事本文</div><br><br><br>

＜文字シャドウなし＞

枠内の記事本文

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px solid #ff6666;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;word-break:break-all;">枠内の記事本文</div><br><br><br>

複数行欲しい方はこちら↓

・１行目
・２行目
・３行目
・４行目
・５行目

<div style="background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px solid #ff6666;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br><br><br>

＜文字シャドウなし＞

・１行目
・２行目
・３行目
・４行目
・５行目

そして、テレビやラジオに出たり、ライブやったりする人用に、次のような囲み枠をのせておきますね(^^♪

テレビに出ることがないから必要ない･･･って？

いやいや～～～、そんなことはないと思いますよ～～^^!
（きっと･･･、たぶん･･･、もしかしたら･･･）

＝＝テレビ出演情報＝＝
テレビ局『番組名』

■放送日時：2015/○/○(曜日)　○:○○～○:○○(チャンネル)
■出演：○○○○、○○○○、○○○○、○○○○
■内容：

テレビ局『番組名』<br><br>

■放送日時：2015/○/○(曜日)　○:○○～○:○○(チャンネル)<br>

■出演：○○○○、○○○○、○○○○、○○○○<br>

■内容：</div><br><br><br>

＜文字シャドウなし＞

テレビ局『番組名』<br><br>

■放送日時：2015/○/○(曜日)　○:○○～○:○○(チャンネル)<br>

■出演：○○○○、○○○○、○○○○、○○○○<br>

■内容：</div><br><br><br>

＝＝LIVE情報＝＝
【ライブタイトル名】
リード文

■日時：○年○月○日　18:00開場、19:00開演
■出演：
■会場：場所（住所・電話番号）
■料金：○○○円（注意事項）
■定員：○○名
■申込：

【ライブタイトル名】<br>リード文<br><br>

■日時：○年○月○日　18:00開場、19:00開演<br>

■出演：<br>

■会場：場所（住所・電話番号）<br>

■料金：○○○円（注意事項）<br>

■定員：○○名<br>

■申込：<br></div><br><br><br>

＜文字シャドウなし＞

【ライブタイトル名】<br>リード文<br><br>

■日時：○年○月○日　18:00開場、19:00開演<br>

■出演：<br>

■会場：場所（住所・電話番号）<br>

■料金：○○○円（注意事項）<br>

■定員：○○名<br>

■申込：<br></div><br><br><br>

あ、今までのシンプルバージョンでの告知用の囲み枠ものせておきますね^^!

<div style="background:#ffeeee;padding:10px;border-radius:10px;border:2px dotted #ff0000;width:auto;margin-right:6px;box-shadow: 5px 5px 5px #999;word-break:break-all;">＝＝テレビ出演情報＝＝<br>

テレビ局『番組名』<br><br>

■放送日時：2015/○/○(曜日)　○:○○～○:○○(チャンネル)<br>

■出演：○○○○、○○○○、○○○○、○○○○<br>

■内容：<br></div><br><br><br>

<div style="background:#f7f7f7;padding:10px;border-radius:10px;border:3px dotted #ffb6c1;word-break:break-all;">＝＝LIVE情報＝＝<br>

【ライブタイトル名】<br>リード文<br><br>

■日時：○年○月○日　18:00開場、19:00開演<br>

■出演：<br>

■会場：場所（住所・電話番号）<br>

■料金：○○○円（注意事項）<br>

■定員：○○名<br>

■申込：<br></div><br><br><br>

・・・で、iPhoneからこれら↑の囲み枠を作るには、こちらをご覧くださいませ↓↓↓

iPhoneで憧れの囲み枠を作るには

＜追記１＞
androidスマホのアメブロアプリにも左下に「タグ編集」があって、そこでタグ編集モードにすることはできるのですが･･･

下書き時点ではうまく囲み枠が表示されていても、プレビューにすると囲み枠が表示されなくなってしまうことがあるようです。

手元にandroidスマホがありませんので、実験のしようがないのですが･･･^^;

もしかして、プレビューでは一時的に見えなくなっていても、公開したら枠が見えているのかもしれませんし･･･
もしくは、androidスマホのアメブロアプリではうまくいかないといったバグなのか･･･

androidスマホについては、わかり次第、追記したいと思います<m(__)m>

・・・と書いていたら、熊本からAndroidスマホでもできました～！ってご報告いただきました！

＜追記２＞
枠内の文字にシャドウ（影）をつけないパターンものせましたので。

タグ内の

text-shadow:0px 0px 2px #333;

を削除していただいてもOKです(^^♪

＜追記３＞
早速、使っていただいて、
「簡単に出来ました～！！*\(^o^)/*川上先生、すごいです！！」
って、興奮してメッセージいただきまして^^!

そうそう！こんな感じに使ってみるとよいですよ～～↓↓↓
（使っていただいて、ありがとうございます<m_m>・・・って、見てたら行ってみたくなってしまった^^;）

バレンタインに音楽はいかが？｜裕美子のレッスン＆コンサート日記♪音楽でもっと笑顔に健やかに

以上、アメブロ囲み枠でした。

LIDS札幌・ライフデザインスクール
川上雄大

囲み枠｜見出し付枠｜色コード｜メニューバー