【はてなブログ初心者必見】囲み線や区切り線を使う方法
この記事を読むと「ブログ初心者」でも、簡単に囲み線や区切り線を使えるようになります！
「ブログ初心者は、まず１００記事書くことに集中して、見栄えは後でいいです。」と良く言われますが、少しでも見やすく綺麗に作りたいですよね。
モチベーションも上がるし。それって継続に大切だし。
このページでは【ブログ初心者】が「はてなブログ」などで、かんたんに囲み線や区切り線を使う方法について記載します。
段落と段落の間などに「区切り線」を引く
記事に区切り線を入れるには、ブログの編集画面をHTMLが追加できる状態にします。はてなブログなら画面左上の「編集みたまま」の右にある「HTML編集」をクリックし、区切り線を入れたい箇所に、区切り線用のコード <hr/> を追加します。
↑さっそく、ひいてみたりして。
文字を囲む「囲み枠線」を引く
枠線で文字を囲むには、ブログの編集画面をHTMLが追加できる状態にします。
はてなブログなら画面左上の「編集みたまま」の右にある「HTML編集」をクリックし、囲み線用のコード
<div style="border-style: solid ; border-width: 1px;">
を書き、「囲み線の中に入る文章」を書きます。そして最後に
</div>
を追加します。すると、このようになります！
囲み線の中に入る文章
こういうのがうまくいくと、ニヤリ(^^)としてしまいますね！
「囲み枠線」の太さ、種類、色を変更する。
先ほどの「HTML編集」の画面で、以下の部分の記載を変更して行います。
線の太さ変更
「border-width」の後の「○px」が線の太さです。太くしたい場合はpxの前の数値を大きく、細くしたい場合は小さくします。
太さを1→5pxにしてみると、HTMLコードは以下となり、
<div style="border-style: solid ; border-width: 5px;">囲み線の中に入る文章</div>
見え方はこうなります。
囲み線の中に入る文章
線の色の変更
HTMLコードで「border-color: #ff0000」という記述が線の色を指定している部分です。省略すると黒線になります。「HTMLカラーコード」で色番号を変更します。
代表的なものを下記しておきます！
赤：#ff0000
青：#0000ff
緑：#008000
黒：#000000
灰：#808080
橙：#ffa500
茶：#a52a2a
紫：#800080
では「青」線にしてみましょう。コードは以下です。
<div style="border-style: solid ; border-width: 1px; border-color: #0000ff; ">囲み線の中に入る文章</div>
見え方はこうなります！
囲み線の中に入る文章
線の種類変更
「border-style:」のあとの語が、枠囲みの線の種類を示しています。
代表的なものを下記しておきます！
実線 ： solid
点線 ： dotted
破線 ： dashed
二重線 ： double
線なし ： none
<div style="border-style: double ; border-width: 5px;">囲み線の中に入る文章</div>
囲み線の中に入る文章
枠線の中の「背景色」の変更
背景を「薄橙」色にします。コードに背景色の指定を意味する「background-color: ：#FFF5C8;」の追記が必要です。
<div style="border-style: solid ; border-width: 1px; background-color: #FFF5C8; ">囲み線の中に入る文章</div>
囲み線の中に入る文章
ニヤリ(^^)と出来ましたでしょうか！？
良く使う「囲み枠線」をテンプレート化しておく
良く使う囲み線は、余白含めてテンプレート化しておくのが便利です。
私だと以下の２つかなぁ。
白地に青枠線
<div style="border: 3px solid #1F91BE; padding: 10px; background: #C8FFF5;">(ここに文)</div>
(ここに文)
うす橙地に枠線なし
<div style="border: 0px solid; padding: 10px; background: #FFF5C8;">(ここに文)</div>
(ここに文)
まとめ
ブログは記事の中身が命、とはいえ、やっぱり綺麗で見やすいと、記事書く方もモチベーションが違いますよね！
皆さんも、ガンガン綺麗なページを作っちゃってください！
初心者ブログ術のまとめはこちら↓
■登録まだの方のために念のため：
↓誰もが推奨、まずは最大手のA8.net
↓Amazon、楽天とか直アフィリより簡単お得、もしもアフィリエイト
↓その他アフィリエイト老舗の２社
↓モバイルアプリのアフィリエイトなら！
もし未登録でしたらぜひ登録を！
