【はてなブログのカスタマイズ】枠を使って分かりやすいブログに☆HTML編集でコピペするだけ
こんにちは、emilyです♡
皆さんは自分のブログを読み返してみて、「文章ばっかりで読みにくいなー」と思ったことはありませんか？
私のブログが、まさにその典型例！
本当は、可愛いアイコンが吹き出しでしゃべっている記事をいつかは書けるようになりたい！
でも、いきなりそんなハードルが高いことはできないので、今日はとっても簡単な「枠」の使い方を紹介します。
「枠」を使うだけで、私の記事も少し読みやすくなったような気がします。
まだ「枠」を使ったことがない人は、是非コピペして使ってみてください。
HTML編集のやり方
まずは、HTMLコードの貼り付け方です。
はてなブログで、「記事を書く」画面を立ち上げてください。
普段は、「編集」に直接書き込んでいると思いますが、その隣の「HTML編集」をクリック。
先ほどまで書いていた文章と、いろいろなコード（<p> </p>など）が書かれた画面になると思います。
文章の内容を見れば、自分がどのあたりに枠を入れたいか分かると思います。
そちらに、コードを入力（コピペ）してください。
その後、もとの「編集」画面に戻ると、枠ができています♡
一度作った枠は、「編集」画面で簡単にコピペできます。
また、「HTML編集」にすぐに好きな枠を入れれるように、私はパソコンの付箋にコードを貼り付けて、いつでもコピペできるようにしています。
見出しありの枠
こんな感じの枠です。
文字の部分は、「HTML編集」にコードに貼りつけた後、「編集」に戻って簡単に変更できます。
ではコードです。
<fieldset style="padding: 10px; border: 3px solid #ff7fbf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #ffffff;"><legend><span style="font-size: 22px; color: #ff7fbf; font-weight: bold;"> タイトル </span> </legend>
<p> あ</p>
<p> い</p>
<p> う</p>
</fieldset>
<p> あ</p>
<p> い</p>
<p> う</p>
</fieldset>
字や線の部分は、ピンク色（#ff7fbf）で統一、背景は白色（#ffffff）にしています。
この部分を変えるだけで、好きなカラーで使えますよ。
好きな色の選びかたはこちらで紹介しています。
見出しなしの枠
こんな感じの枠です。
あ
い
う
先ほどよりもシンプルな枠。
文字の部分は、「HTML編集」にコードに貼りつけた後、「編集」に戻って簡単に変更できます。
ではコードです。
<div style="padding: 10px; border: 2px solid #ff7fbf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
<p> あ</p>
<p> い</p>
<p> う</p>
</div>
<p> あ</p>
<p> い</p>
<p> う</p>
</div>
こちらもピンク色（#ff7fbf）を使用しているので、好きな色のカラーコードをお使いください。
参考にした記事
枠の作り方について、いろいろな記事を読みましたが、一番参考になりました。
私はシンプルに、２種類の枠しか使っていませんが、他の枠も試してみたい方にはおすすめです。
関連記事
