こんにちは🌞こなゆです!
皆さんは、ブログの文章を枠で囲みたいけど、
よく分からなくて困ったなんてことありませんか?
今日はコピペでその問題を解決します!
ちなみに私はコピペしてもうまくいかず、何回もトライして
ようやく意図するところに挿入することができました!
簡単なので是非見ていってくださいね(o^^o)
枠線について
まずはこちら
完成はこんな感じになります(*^^)v
もちろんHTMLをいじることになります。
その方法は?
HTML編集の欄に下記コードをコピペするだけで、簡単にできます(*'▽')
<div style="border: 1px solid #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
さて、画像付きで説明するので真似してみてください!
①ブログを書く画面でHTML編集を押す
②コピペする場所
私はこれがよくわからず困っておりました…。
いやこれのどこに入れるん???わかるわけないなくない???????
ってなりました。
試行錯誤の結果、正解を見つけました。こちらです。
文字で説明するとこちらです。
<p> </p>
ここにさっき紹介したコードをコピペです(´艸`*)
<p> </p>
間に挟むんですね。きっと基本なんでしょうけど、全然わからなかったですね。笑
恥ずかしいですが。笑
コードの説明
ちょっと応用が利くように、コードを解説しましょう!
<div style="border: 5px solid #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
border: 5px solid ←枠線の太さ 数字を変えると線の太さ変化
padding: 10px; ←余白の大きさ 数字を変えると余白の大きさ変化
#cccccc ←色の変更 下記参考サイトにコード書いてあります。
参考サイト
例えば「#00FF00」は黄緑色です!
こんな感じで、変更可能です(´艸`*)
まとめ
今日は、簡単な枠線で文章を囲むということをしました!
図つきで、差し込むHTMLの場所も説明したので出来ると思います!
皆さんもぜひ使ってみては??
次回は、囲む枠線の色んな種類を説明します!
皆さんの参考になりますように(*^^)v