【大事】ブログで枠を色付けするコツ【実践してみました】

＃節約＃料理＃シンプルブログ

おはようございます、まるフキンです。

ブログ更新、５日目です。

ありがたいことに３日坊主には

なりませんでした。

ツイッターは後日開設します。

✅ブログで枠を色付けするコツ。


・Googleではてなブログ　枠　を検索する。
・上記のサイトをクリック。
・自分の気に入った枠をコピーする。
・HTML編集にコピペする。
・色を考え、コピーする
・赤（#fc4a1a）の部分に貼り付ける


慣れるまでは、メモ帳に入力後、コピペがおススメです。
なぜかHTML編集で入力していくのは難しいです。

上記を細かく見ていきます。

枠に色付けしたい方、必見です。

ブログで枠を色付けするコツ【６つある】

同じことですが、下記のとおりです。

・まず①：Googleで　はてなブログ　枠　を検索する。

・まず②：上記のサイトをクリック。

・まず③：自分の気に入った枠をコピーする。

・まず④：HTML編集にコピペする。

・まず⑤：色を考え、コピーする。

・まず⑥：赤（#fc4a1a）の部分に貼り付ける

どれも大事です。 順番に見ていきましょう。

まず①：Googleで　はてなブログ　枠　を検索する。

①～④までは、前回のブログを見ていただくと

分かりやすいです。

hygge-marufkin.hatenablog.com

まず②：上記のサイトをクリック。

このサイトは初心者の私でも

すごく分かりやすかったので

一読するのをおススメします。

まず③：自分の気に入った枠をコピーする。

次に自分の

はてなブログ編集画面を開いてください。

まず④：HTML編集にコピペする。

前回と同じようにコピペしてください。

まず⑤：色を考え、コピーする。

このサイトのまま、コピーすると

赤色の枠になっています。

サイトに主なカラーが載っていますが、

自分でお気に入りのカラーを探すのを

おススメします。

下記です。

WEB色見本 原色大辞典 - HTMLカラーコード

私は色探し、ワクワクしました。

まず⑥：赤（#fc4a1a）の部分に貼り付ける

上記の黄色の部分に、

自分の希望する色をコピペします。

今回は

#0000ff　青色

を黄色の部分にコピペしてみます。

下記のようになります。

ここに本文を入力します。
ドット線の囲み枠例です。

このようになりました。

枠が赤色から青色に変わりました。

 

メモ帳で入力後、コピペをおすすめします。

なぜが改行の<br>や文字の削除が

使いにくいんです。

コピーや貼り付けがしやすい

メモ帳に一旦入力をおすすめします。

使用している枠【２つある】

色を選んで作ってみました。

テンプレート貼ります。

・まず①：ねずみ色枠

・まず②：青色ドット枠

 

・まず①：ねずみ色枠

下記のをHTML編集にコピーしてください。

<div style="background: #f5f5f5; padding:10px; border:none;">
<br>
ここに文字をいれます。<br>
・箇条書きにかけるようにしました。<br>
<br>
・改行もほどよくしてあります。<br>
<br>
・必要なければ削除してください。<br>
<br>
</div>
<div style="background: #f5f5f5; padding:10px; border:none;">

このように表示されます

ここに文字をいれます。
・箇条書きにかけるようにしました。

・改行もほどよくしてあります。

・必要なければ削除してください。

 

・まず②：青色ドット枠

下記のをHTML編集にコピーしてください。

<div style="background:#f0f8ff; padding:10px; border:3px dotted #6495ed;">
<br>
<br>
ここに文章をいれてください<br>
・箇条書きにかけるようにしました。：<br>
<br>
・必要ない文章は削除して使ってください。<br>
<br>
<br>
</div>

このように表示されます

ここに文章をいれてください
・箇条書きにかけるようにしました。

・必要ない文章は削除して使ってください。

 

枠を色付けすることができました。

なんとか、HTML編集を使いこなせました。

メモ帳がこれからも活躍しそうです。

次は枠に箇条書きを入れたいと思います。

明日で６日目、頑張ります。