パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

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>


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

・1行目
・2行目
・3行目
・4行目
・5行目

<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>


<文字シャドウなし>

・1行目
・2行目
・3行目
・4行目
・5行目


<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</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>


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

・1行目
・2行目
・3行目
・4行目
・5行目


<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>


<文字シャドウなし>

・1行目
・2行目
・3行目
・4行目
・5行目


<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</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>


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

・1行目
・2行目
・3行目
・4行目
・5行目

<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>


<文字シャドウなし>

・1行目
・2行目
・3行目
・4行目
・5行目

<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</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>



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

・1行目
・2行目
・3行目
・4行目
・5行目

<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>


<文字シャドウなし>

・1行目
・2行目
・3行目
・4行目
・5行目


<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</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>



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

・1行目
・2行目
・3行目
・4行目
・5行目


<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>

<文字シャドウなし>

・1行目
・2行目
・3行目
・4行目
・5行目

<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</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>



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

・1行目
・2行目
・3行目
・4行目
・5行目


<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;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>

<文字シャドウなし>

・1行目
・2行目
・3行目
・4行目
・5行目





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

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

いやいや~~~、そんなことはないと思いますよ~~^^!
(きっと・・・、たぶん・・・、もしかしたら・・・)


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

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


<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>
■放送日時:2015/○/○(曜日) ○:○○~○:○○(チャンネル)<br>
■出演:○○○○、○○○○、○○○○、○○○○<br>
■内容:</div><br><br><br>


<文字シャドウなし>

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

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

<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;">==テレビ出演情報==<br>
テレビ局『番組名』<br><br>
■放送日時:2015/○/○(曜日) ○:○○~○:○○(チャンネル)<br>
■出演:○○○○、○○○○、○○○○、○○○○<br>
■内容:</div><br><br><br>




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

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


<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;">==LIVE情報==<br>
【ライブタイトル名】<br>リード文<br><br>
■日時:○年○月○日 18:00開場、19:00開演<br>
■出演:<br>
■会場:場所(住所・電話番号)<br>
■料金:○○○円(注意事項)<br>
■定員:○○名<br>
■申込:<br></div><br><br><br>



<文字シャドウなし>

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

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


<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;">==LIVE情報==<br>
【ライブタイトル名】<br>リード文<br><br>
■日時:○年○月○日 18:00開場、19:00開演<br>
■出演:<br>
■会場:場所(住所・電話番号)<br>
■料金:○○○円(注意事項)<br>
■定員:○○名<br>
■申込:<br></div><br><br><br>





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


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

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


<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>





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

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



<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で憧れの囲み枠を作るには




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

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

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

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


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

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


<追記2>
枠内の文字にシャドウ(影)をつけないパターンものせましたので。


タグ内の

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

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


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

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








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


LIDS札幌・ライフデザインスクール
川上 雄大
いいね!した人  |  コメント(24)  |  リブログ(0)

川上雄大・パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント