MENU

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

 

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

 

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

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

 

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

 

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

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

 

簡単なので是非見ていってくださいね(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