これは、無料版はてなブログを、ブログ超初心者がカスタマイズしていく記録です。今回は、ブログ内の文章を四角で囲めるようにしました。
【行いたいカスタマイズ】
- ブログトップページを記事一覧で提示したい！
- 更新日を提示したい！
- ブログ内の文章を、四角で囲みたい！←今回！
- 文字の大きさを、もう少し大きくしたい！
- ブログのトップページの背景を変えたい！
- Googleアドセンスを設置したい！
- ブログ内に図を入れたい！
- 今までのブログ内容を推敲したい！
なにせ初心者、重要度も難易度もわかりません。
なので、直感的にできそうなものからどんどん手を付けていきます。
選んだ理由と目標！
文章だけのブログから、目立たせたり、メリハリを利かせられるブログに変化！
おしゃれブログになれる！
自分のブログへの愛着がもっとあがる！
ということで、２つめに「文章を四角で囲む」カスタマイズを選びました。
今回の目標：シンプルな線の四角形で本文を囲めるようになる！！
諸先輩方のブログでお見掛けする、吹き出しの形や影付きの形などにも大変憧れますが、一歩ずついこうと思います。
学んだこと
今回もいろいろなブログから学ばせて頂きました。ありがとうございます。
学んだことを書いていこうと思います。もし理解が間違っていたら、都度直していきます。
学んだこと１：HTML編集画面をつかう
・HTML編集の画面に移動して、文章の前後に必要なコードを書けば四角で囲める。
学んだこと２：デザイン→カスタマイズ→デザインCSSをつかうとスッキリする
・見た目を決めるコードのことをCSS（スタイルシート）という。
・別の場所にCSSだけ書く方が一般的。
・別の場所にCSSを書くメリット（１)
記事の中にCSSを書き入れるよりも、HTML編集画面がスッキリして見やすい。
・別の場所にCSSを書くメリット（２)
毎回全てのコードを書かなくても良くなる。効率も精度もアップする。
・はてなブログでは、CSSを描く場所としてデザイン→カスタマイズ→デザインCSSを利用できる。
ここまで学んだ時私は、最初はHTML編集画面にCSSを書いていくことに決めました。
どのような四角があるかを試す際は、HTML編集画面に直接書いた方が、すぐに確認や修正ができると考えたからです。
自分のブログで使いたい四角が決まったら、デザインCSSに書くようにします。
学んだこと３：大枠は<div style="～">文章</div>
・"～"に、四角形の条件のコードを書いていく。
・コード間は「;」で区切れば複数条件を付け加えられる。
・/～/で自由にメモをつけられる。
学んだこと４；四角形の条件コードとその意味
※赤字部分が変えられるトコロ。
★ border: 1px solid #000000; /線の太さと色/
★ border-radius:1px /角を丸める。数値が大きいほど丸くなる/
★ margin: 15px; /枠外の余白。上下左右/
★ padding: 15px; /枠内の余白。上下左右/
★ background: #000000; /背景の色/
★ color: #000000; /文字の色。省略すると黒色/
学んだこと５；色はカラーコードで指定できる
・WEB色見本 原色大辞典 で選んだ７桁の英数字（カラータグ）を使えば、色が変更できる。
実践！
１）黒い線の四角
<div style="border: 〇px solid #000000;">文章</div>
の太さ部分を変えていきます。
・線の太さ１ｐｘ
非常にシンプルな線ですね。少しインパクトは弱いかもしれません。
・線の太さ５ｐｘ
このくらいが一般的でしょうか。
・線の太さ10ｐｘ
太い。。文より線の方が目立ちそうですね。。
※追記 すみません！省略できました！成功です！
カラーコード以外も省略してしまっていたためできなかっただけでした！
２）角の丸い四角
<div style="border: 5px solid #000000;border-radius:〇px">文章</div>
で、角の丸さ指定する数値を変えていきます。
・角の丸さ１ｐｘ
<div style="border: 5px solid #000000;border-radius:1px">
１ｐｘだと全く丸みは感じられませんでした。でもなんだか、シンプルな四角で囲んだ時よりも、四角の縦の大きさが広くなっていますよね。なんでだろう。。。
・角の丸さ５ｐｘ
<div style="border: 5px solid #000000;border-radius:5px">
少し丸くなってきました！
・角の丸さ１０ｐｘ
<div style="border: 5px solid #000000;border-radius:10px">
このくらいが一般的でしょうか。
・角の丸さ３０ｐｘ
<div style="border: 5px solid #000000;border-radius:30px">
もはや楕円です。
ちなみに…
もっともっと角の丸さの数値を大きくしたら、どのような形になるのだろうか？？ということで、９０ｐｘを試してみました！
<div style="border: 5px solid #000000;border-radius:90px">
角の丸み３０ｐｘとの差は感じられませんでした。数値が大きすぎても意味がないようですね。
※追記:後でスマホでも見てみたら、丸みの違いを結構感じました！キチンと数値の分は丸くなっているようですね。
３）余白のある四角
<div style="border: 5px solid #000000; margin: 〇px; padding: 〇px;> 文章 </div>
で、枠外の上・下・枠内の余白を決めていきます。
・枠外１ｐｘ・枠内１ｐｘ
<div style="border: 5px solid #000000;margin: 1px; padding: 1px;>
上記で行っている四角と、変わりは感じられません。余白ってどの部分なのだろう？もっと数値を大きくしてみます。
・枠外２０ｐｘ・枠内２０ｐｘ
<div style="border: 5px solid #000000;margin: 20px; padding: 20px;>
四角が画面中央になり、四角の中の文章も中央に集まっていることが確認できました。
ちなみに…
指定した数値が１つの時は、上下左右の余白の全てが、同じ大きさです。
２つにすると上下と左右で別々の大きさの余白が指定できます。
さらに、４つにすると、全方向の余白が別々に指定できます。上右下左の順番に指定できます。時計周りですね。
・枠外余白 上下２０ｐｘ・左右８０ｐｘ
<div style="border: 5px solid #000000;margin: 20px 80px ;>
・枠外余白 上３０ｐｘ・右１００ｐｘ・下５０ｐｘ・左１０ｐｘ
<div style="border: 5px solid #000000;margin: 30px 100px50px10px ;>
この技法を使えば、びよーんと伸びた四角をフィット感のある形にすることができそうです！
（１）あ！
（２）あ！
（１）と（２）では、四角の大きさが異なるだけなのですが、受ける印象も全然違いますよね。
効果的に使っていけたら良いですね。
四角で囲んだブログを書いてみました。
今回のはむやみに色を変えている感もあるので、今後は、もっと効果的な使い方を学んでいきたいと思っています！
文系脳は補足し、理系脳は抽出する！? ｜思考のクセを見分けたい！
行いたいこと一覧
超・初心者がブログをカスタマイズしていく記録！【行いたいこと一覧】
※行いたいことを思いつきしだい追記し、カスタマイズを実施しだいリンクしています。
