Wedding Road

結婚式の準備について 式場選びから結婚式アイテム作成、大変だったことややってよかったことなどリアルタイムで紹介していきます♪

【初心者向け】文章を枠線で囲む方法(はてなブログ)

 

こんにちは🌞こなゆです!

 

皆さんは、ブログの文章を枠で囲みたいけど、

よく分からなくて困ったなんてことありませんか?

 

今日はコピペでその問題を解決します!

 

ちなみに私はコピペしてもうまくいかず、何回もトライして

ようやく意図するところに挿入することができました!

 

簡単なので是非見ていってくださいね(o^^o)

 

枠線について

まずはこちら

 

完成はこんな感じになります(*^^)v

 

もちろんHTMLをいじることになります。

 

その方法は?

HTML編集の欄に下記コードをコピペするだけで、簡単にできます(*'▽')

 

<div style="border: 1px solid #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>

 

さて、画像付きで説明するので真似してみてください!

 

①ブログを書く画面でHTML編集を押す

 

f:id:konayuu:20200604210459p:plain

 

②コピペする場所

 

私はこれがよくわからず困っておりました…。

 

f:id:konayuu:20200604210936p:plain

いやこれのどこに入れるん???わかるわけないなくない???????

 

ってなりました。

 

試行錯誤の結果、正解を見つけました。こちらです。

 

f:id:konayuu:20200604211115p:plain

 

文字で説明するとこちらです。

 

<p> </p>

ここにさっき紹介したコードをコピペです(´艸`*)
<p> </p>
 

間に挟むんですね。きっと基本なんでしょうけど、全然わからなかったですね。笑

 

恥ずかしいですが。笑

 

 

コードの説明 

ちょっと応用が利くように、コードを解説しましょう!

 

<div style="border: 5px solid #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>

 

 

border: 5px solid ←枠線の太さ 数字を変えると線の太さ変化

 

padding: 10px;  ←余白の大きさ 数字を変えると余白の大きさ変化

 

#cccccc ←色の変更 下記参考サイトにコード書いてあります。

参考サイト

www.netyasun.com

 

例えば「#00FF00」は黄緑色です! 

 

こんな感じで、変更可能です(´艸`*)

 

まとめ

今日は、簡単な枠線で文章を囲むということをしました!

 

図つきで、差し込むHTMLの場所も説明したので出来ると思います!

 

皆さんもぜひ使ってみては??

 

次回は、囲む枠線の色んな種類を説明します!

 

皆さんの参考になりますように(*^^)v