「理系の本読み趣味ブログ」

好きなものを紹介します!あとFIREを目指した活動記録も

ブログをアレンジしませんか? HTML編集で枠の作成と色変更のやり方!

ブログを書くときに「強調したい」とか

         「色を変えたい」とか思いませんか?

少しやり方を調べてみたので、備忘録も兼ねて紹介します。

背景色と囲い線を変更して強調する!

HTML編集には下記の内容を記載してます。

<blockquote style="background-color: #e6e6fa;

              padding: 15px 15px 15px 15px;

                                      border: 4px dashed #0000cd;

                   text-align:center;">

       背景色と囲い線を変更して強調する!</blockquote>

*見やすいように改行してますが、実際は1行です。
*拡大と太字のコードは省略しています。

それぞれを説明すると

・枠を作る(色などはstyle=””で指定)

<blockquote>

枠を作る(色などはstyle=””で指定)

</blockquote>

色や余白などの指定は下記に方法を記載してます。
 

・背景色を変更(#e6e6faが色の表記)

<blockquote style="background-color: #e6e6fa;">

背景色を変更(#e6e6faが色の表記)

</blockquote>

色の表記部分を変更すると色を変更できます。色見本のあるサイトは記事の下で紹介してます。
 

・文の周りの余白部分のサイズ指定

<blockquote style="padding: 15px 50px 15px 50px;">

文の周りの余白部分のサイズ指定

</blockquote>

padding: 後の◯pxが余白のサイズ。上、右、下、左の順に指定します。
 

・枠線の形状と色を指定

<blockquote style="border: 4px dashed #0000cd;">

枠線の形状と色を指定

</blockquote>

border: 後の◯pxサイズ、dashedが形状、#0000cdが色の指定です。
形状と色のコードは詳しく説明されているサイトを記事の下の方で紹介しています。
 

・文を中央配置

<blockquote style="text-align: center;">

文を中央配置

</blockquote>

center以外は左寄せはleft、右寄せはrightで指定
 

ちなみに、1行の場合は<blockquote></blockquote>のみでOK

<blockquote></blockquote>の中に複数行を作成する場合は、

各行を<p></p>で挟みます。

 

また、枠なしで文を中央配置にするには下記をHTMLに記載します。

・枠なしで文を中央配置

<div align="center">枠なしで文を中央配置</div>
<p></p>を<div></div>に変更し、align=""でcenter、left、rightを指定

 

これでブログの強調したい部分などのアレンジができると思うので、

良ければ参考にしてみてください!

 

この記事は下記のサイトを参考にしました。

【枠の作成、色の付け方など】

kchan.exblog.jp

 【各色の指定】

www.colordic.org

 【文字や画像の中央寄せ】

mamazakki.hatenablog.com

 【枠線の形状指定】

beginners-hp.com