カメラと子供とおでかけ

栃木在住の二児のパパが日々の生活で気になっていることを分かりやすくまとめます

ブログ初心者向け!ボックスデザイン(囲み枠)を導入してみた話

こんにちは。まーとんです。

日々ブログのカスタマイズを行って少しでも言いたいことが伝わるように心がけているわけですが、今回は、ブログ初心者の私が、ボックスデザイン(いわゆる『囲み枠』)を試してみましたので、その導入方法をまとめてみます。

 
この記事でわかること
  • ボックスデザインの導入方法は?
  • ボックスデザインの色の変更方法は?

 

 

ボックスデザインの導入方法は?

今回、ボックスデザインを導入するにあたり、下記の記事を参考にさせていただきました!30個の豊富なサンプルを準備してくださっているため、あなたのお気に入りがきっと見つかるはず!!ありがたいですね~^^

saruwakakun.com

今回私が選んだのは、26番目のデザインの「26.タイトル付き」というもの。

それでは、肝心の導入方法をまとめます。

 

デザインCCSに『CCS部分』を貼り付ける

まずは、上で紹介したブログ上に記入してある『CCS』部分を、はてなブログの デザイン > カスタマイズ > デザインCCS に貼り付けます。これで下準備は完了!!

f:id:machapapa2929:20190430143841p:plain

 

記事中に『HTML』を貼り付ける

続いて、『HTML』部分を記事中の導入したい部分に貼り付けて、『ここにタイトル』部分にテキストボックスの見出しを記入し、『ここに文章』部分にテキストボックスに入れたい内容を記入します。

 

ここで注意点は、『編集 見たまま』形式ではなく、『HTML編集』形式で入力すること。これをしないと、うまく認識してもらえません。

f:id:machapapa2929:20190430144645p:plain

…少し面倒臭いと感じるのは、毎回HTMLを記入しなければならないことでしょうか。。毎回入力してられないので、私はWindowsの付箋ツールを使って、デスクトップに貼り付けるようにしました。これならコピペが少しは楽ちんになるかなぁと^^

f:id:machapapa2929:20190430150027p:plain

※便利な付箋ツールですが、Windows10からは、『Sticky Notes』と名前を変えているようですね。今まで知らなくて、なかなか見つかりませんでした。。

 

これで、ボックスデザインを導入することができました!!ポイントさえ押さえれば、簡単ですね^^

 

ボックスデザインの色の変更方法は?

続いて、導入したボックスデザインの色を変えていきましょう!

『デザインCCS』に入力した部分のうち、枠線に対応する部分タイトルに対応する部分色コードを自分の好きな色コードに変更します!

f:id:machapapa2929:20190430145338j:plain

色コードについては、以下のページから選択、コピペして貼り付けるようにしてください。

www.colordic.org

カスタマイズが終わったら、『プレビュー』モードで確認してみましょう!無事に望みのボックスデザインが導入されましたか?

 

まとめ

今回は、ブログ初心者の私が、ボックスデザインを導入する方法を紹介しました。

ブログで言いたいことを伝えるのはなかなか難しいものです。ボックスデザインを導入することで、自分の言いたいことがより伝わるようになってくれるとうれしいですね^^