ボックスの表示は、普段cssで指定して使っていますが、html編集画面に直接書き込んでももちろん表示することができます。
このサイトさん（↓）では幾つもパターンを提供してくれているので、コピペしてすぐに使えるようにしてくれています。
www.sapporo-sfc.xyz
試しにやってみました。
１）上記サイトから（色を変更）
<div style="background:#fff0f5; box-shadow:#fff0f5 0 0 10px 10px;-webkit-box-shadow:#fff0f5 0 0 10px 10px;-moz-box-shadow:#fff0f5 0 0 10px 10px;padding:10px;margin:20px;"><p>ここに本文<br></p></div>
ここに本文
上記黄色の部分（カラーコード）を書き換えて色を変更。
２）背景を変えてみる
<div style="background-image:url(https://〇〇〇・・・・・・・); padding:10px;margin:20px;"><p style="font-family:'HuiFontP109'">font-family:HuiFontP109で直接指定</p></div>
font-family:HuiFontP109で直接指定
黄色い箇所：背景のurlを記入
緑色の箇所：フォントを指定
普段、はてなブログはMarkdown編集ページで編集してますが、今回もMarkdown編集ページに書いています。
余談：
ソースコードをwebページに表示できるように変換できる便利なサイトはこちら
ソースコード変換 < & " > br改行 WEB用に自動エスケープ
