こんにちは、パソコンインストラクターの川上雄大です。
たとえば、次の囲み枠のHTMLタグ
<div style="background: #fff; box-shadow: inset 0px 0px 50px #b9dbe5, 5px 5px 0px #ccc; -webkit-box-shadow: 0 0 50px #b9dbe5 inset, 5px 5px 0 #ccc; -moz-box-shadow: 0 0 50px #b9dbe5 inset, 5px 5px 0 #ccc; padding: 20px; font-size: 90%;">
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。
</div>
を「HTML表示」でコピペした場合、次のように表示されます↓
ここに文字が入ります。
ここに文字が入ります。
ここに文字が入ります。
ここに文字が入ります。
ピンクの場合は、これです↓
<div style="background: #fff; box-shadow: inset 0px 0px 50px #ff8c90, 5px 5px 0px #ccc; -webkit-box-shadow: 0 0 50px #ff8c90 inset, 5px 5px 0 #ccc; -moz-box-shadow: 0 0 50px #ff8c90 inset, 5px 5px 0 #ccc; padding: 20px; font-size: 90%;">
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。
</div>
ここに文字が入ります。
ここに文字が入ります。
ここに文字が入ります。
ここに文字が入ります。
ご自分で色を変えたい方は#ff8c90の箇所を好きな色コードに変えてくださいませ↓
<div style="background: #fff; box-shadow: inset 0px 0px 50px #ff8c90, 5px 5px 0px #ccc; -webkit-box-shadow: 0 0 50px #ff8c90 inset, 5px 5px 0 #ccc; -moz-box-shadow: 0 0 50px #ff8c90 inset, 5px 5px 0 #ccc; padding: 20px; font-size: 90%;">
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。<br>
ここに文字が入ります。
</div>
で、こういった囲み枠とか、新しく何かしら記事で作ったら、
「プレビュー」で確認しましょう！
「プレビュー」をクリックすると、まずは「PC」画面でのプレビューが面が表示されます。
そして、次に「スマートフォン」をクリックして、
スマートフォンでの表示を確認します。
囲み枠がどんな風にスマホでは表示されるのか、とか。
そして、終わったら、「ブログを書く」をクリックして、ブログを書く画面に戻ってくださいね。
決しって、右上の「×」で閉じないように！！！！！
以上、アメブロの基本操作でした。
LIDS札幌・ライフデザインスクール
川上 雄大
