おはこんにちばん。
皆様、ブログ記事を書く時、文章や箇条書き項目を協調させたいと思われることも多いかと思います。
今回や初心者でも超簡単に「囲み枠を設定する方法や手順」について、まとめていきます。
作業として、5分程度あれば十分に設定できる内容になりますので、ワンランク上のブログ運営を目指される方は、ぜひとも参考にしていただければ幸いです。
- はてなブログ初心者の人
- 記事の見栄えをワンランク上げたい人
- 単調な文字の羅列ではなく、少し違った見せ方をしたい人
- 他のブログやサイトと差別化を図りたい人
- 何か新しいことをやってみたい人
目次
囲み枠とは
百聞は一見に如かず、下記が「囲み枠」になります。
【例①：ピンクのかわいいデザイン】
あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
【例②：二重線の青枠デザイン】
あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
いかがでしょうか？
今までとは少し違う味わいのある強調方法ではないでしょうか？
ブログ初心者の場合、難しそうに考えてしまうかもしれませんが、この設定手順めちゃくちゃ簡単です。
5分いただければ、できるようになります！
囲み枠の設定手順
- CSSのコードをコピーする
- はてなブログ管理画面の「｛｝デザインCSS」に貼り付ける
- 「HTML編集モード」で、囲み枠を設定したい文章を、コード内の該当箇所に挿入する
- プレビュー画面を確認する
- CSSのコードをコピーする
まずは、下記のサイトよりご希望の囲み枠デザインを選択し、「＋コードを表示」をクリックする。「CSS」部分のコードをそのままコピーしてください。
引用元：
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 - はてなブログ管理画面の「｛｝デザインCSS」に貼り付ける
- 「HTML編集モード」で、囲み枠を設定したい文章を、コード内の該当箇所に挿入する
先程のサイトで表示された「HTML」部分のコードをそのままコピーしてください。その後、はてなブログ管理画面の「HTML編集モード」より、該当箇所をタグで囲ってください。
引用元：【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
▼HTML編集モード
-
プレビュー画面を確認する
以上が、囲み枠の設定手順となります。
めちゃくちゃ簡単です！
囲み枠を利用する上での注意点
- 多用しすぎると、どこを注目すべき部分か分散されてしまう
- 複数種類を混在させすぎると、統一性がなくなってしまう
今回のページ内でも、意図的に複数種類の囲み枠を多用しております。
読者様によっては、見えづらく感じてしまいマイナスに働いてしまうこともありますので、使用する囲み枠デザインの種類を限定し、統一感のあるページ作りを心掛けてください。
まとめ
今回は、「囲み枠を設定する方法や手順」について、まとめてみました。
ご覧いただいたように、初心者でも超簡単に囲み枠を設定することができるので、ワンランク上のブログ運営を目指される方は、ぜひとも参考にしていただければ幸いです。
読者様に読みやすい記事を提供する一つの手段として、一度お試ししてみませんか！
～合わせて読みたい記事～
