フリースペースの中にも、枠を入れる



内藤です。

サイドバーに設置できる「フリースペース」
画像やリンクをはれますので、告知にも使える超大事なパーツです。



このフリースペースの中でも、枠を付けて表示させたい場合があると思います。

例えばこちらの方のような感じで

枠がないよりも、区切られている方が見やすくなりますよね。

記事の中で枠を使う場合のやり方は、こちらで説明していましたが、フリースペースでも同様に使う事ができます。

■フリースペース内で枠で囲みたい部分を

<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>

で囲みます。

こんな感じです ↓


すると、サイドバーのフリースペースで枠に囲まれて表示されます。

また、枠の中に色を付けたい場合は

<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のようにbackground-color:#F2F2F2;を付け加えることで可能になります。



カラーコードはこちらを参照してください

※ 最後の </div>  が抜けてしまうと、ブログの表示が崩れてしまいます。忘れないようにご注意くださいね。

その他のカスタマイズはこちら

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください