初心者だけどはてなブログに簡単におしゃれなボックスを設置できた1つの方法!

f:id:mk615ts13:20190305152016p:plain



みなさんこんにちは!こっは~です!

ブログ運営1か月ちょっとが過ぎ、最近ちょこちょこいろんなことに挑戦しているこっは~ですがお気づきでしたか……?w

 

Googleアドセンスの設置をはじめ、最近だと記事の最後に簡単なプロフィールが出るようにしてみたり……(なんかかっこよくてw)

 

そして

最近の記事にもちょっと登場してた、

文字を囲むデザイン!

 

そう~これこれ!

このボックスを入れるだけで各段と見やすく・わかりやすくなるので取り入れました!

忘れないように、の意味も込めて記事にします。

 

 

初心者でも簡単コピペ!囲みボックスデザインサンプル

私が実際にした囲みボックスデザインの作り方の紹介です。

 

こちらのページを参考にしました。

saruwakakun.com

 

コピペだけで簡単にボックスが作れます。

 

【はてなブログ】ボックスデザインの作り方

 

  • まずはこちらのサイトで使いたい囲み枠を選びます。
  • コードを表示をクリックすると、HTMLとCSSのコードが出てきます。
  • まずはCSSをコピー。「はてなブログ管理画面」→「デザイン設定」→「カスタマイズ」→「デザインCSS」にCSSコードをはりつけて保存
  • サイトに戻りHTMLをコピー。
  • 記事の編集画面「HTML編集」にペースト。
  • コード中の「ここに文章」や「ここにタイトル」をそれぞれ変える

以上!

 

まとめ

かんたんにボックスが出来ちゃう!

あるとないとでは、見やすさ・読みやすさが格段と変わってくるのでぜひ取り入れてみるべし!

 

最後まで読んでいただきありがとうございます☆

こっは~。