PCインストラクターの川上です。
ワタクシの左サイドバーの上に設置しています、フリースペース編集内の囲み枠ですが･･･
（パソコン版でのお話ですので、スマホや携帯の方すいません^^;）
左側の囲い枠はどのようにするのでしょうか･･･アメブロでHTMLが利用できるところ
こちらの記事↑↑↑でお知らせしているときと、ちょこっと体裁が変わっております。
（設置方法はこちらの記事↑でご確認くださいませ。）
グラデーションと枠に影がついています。
（IE10以降でないとうまく表示されません）
これはどうやったのか、というと･･･
（↓画像表示）
■お知らせ■
こちらのタグをフリースペースに貼り付けて、中の文字を変更するとよいですね。もちろん、リンク先のurlもご自分のに変更して、です。
<div style="background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,#20108f);background-color:#20108f;border:1px solid #20108f;padding-left:10px;font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold">■お知らせ■</font></div><div style="background:#ffffff;border:1px solid #20108f;padding:10px;font-size:0.9em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 6px 6px 6px #AAA;"><p><strong>◆タイトル1</strong></p><a href="リンク先のurl">タイトル1の内容</a><p><strong>◆タイトル2</strong></p><a href="リンク先のurl">タイトル2の内容</a><p><strong>◆タイトル3</strong></p><a href="リンク先のurl">タイトル3の内容</a></div>また、青でなくて、ピンク色にしたい方は、
（↓画像表示）
■お知らせ■
<div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);background-color:#d94057;border:1px solid #d94057;padding-left:10px;font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold">■お知らせ■</font></div><div style="background:#ffffff;border:1px solid #d94057;padding:10px;font-size:0.9em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 6px 6px 6px #AAA;"><p><strong>◆タイトル1</strong></p><a href="リンク先のurl">タイトル1の内容</a><p><strong>◆タイトル2</strong></p><a href="リンク先のurl">タイトル2の内容</a><p><strong>◆タイトル3</strong></p><a href="リンク先のurl">タイトル3の内容</a></div>になります。
また、このように↓↓↓シンプルに囲みたい方は、
□お知らせ□
◇内容はこちら
こちらのソースをご利用いただくとよいと思います。
<div style="background:#3D58A8;border:1px solid #3D58A8;padding:5px;color:#ffffff;">□お知らせ□</div><div style="border:1px solid #3D58A8;padding:10px;">◇内容はこちら</div>シンプルなピンクはコチラ↓↓↓
□お知らせ□
◇内容はこちら
<div style="background:#d94057;border:1px solid #d94057;padding:5px;color:#ffffff;">□お知らせ□</div><div style="border:1px solid #d94057;padding:10px;">◇内容はこちら</div>さらに･･･
CSSの編集デザインを利用されている方は、あらかじめ枠のCSSを作成しておくとよいですね。
例えば、CSSの編集で次のCSSソースを追加します。
/*＝＝＝◆見出し付き囲い枠（青グラデ）◆＝＝＝*/.kakoiue{background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,#20108f);background-color:#20108f; border:1px solid #20108f; padding-left:10px; font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;}.kakoisita{background:#ffffff;border:1px solid #20108f; padding:10px; font-size:0.9em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;}そして、フリースペース編集で、
<div class="kakoiue"><font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■お知らせ■</font></div><div class="kakoisita"><p><strong>◆タイトル1</strong></p><a href="リンク先のurl">タイトル1の内容</a><p><strong>◆タイトル2</strong></p><a href="リンク先のurl">タイトル2の内容</a><p><strong>◆タイトル3</strong></p><a href="リンク先のurl">タイトル3の内容</a></div>としても、できたりします。
いろんなHTMLタグの書き方がありますので、ぜひチャレンジしてみてくださいませ～(^^♪
＜追記＞
あ、ただし、「マイページ」の「配置設定」で、「フリースペース」を右側の方にドラッグして、配置しておいてくださいね！
①「マイページ」の右上の三本線マークをクリック
②「配置設定」をクリック
「サイドバーの配置設」で「使用しない機能」に「フリースペース」がある場合は、右側の「使用する機能」の方にドラッグして移動しておいてくださいませ。
（私の場合は、「使用する機能」の左欄の一番上にしています。）
できたら、「保存」をクリックして、
自分のブログを表示して、更新（Windowsの方はF5キーを、Macの方はcommand＋Rキーを押します）してください。
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大