フリースペースを、他の項目のように表示させる


内藤です。

便利に使う事のできる、「フリースペース」
サイドバーにあるパーツで、文字や画像を自由に配置できます。

告知板として使う事もできますので、非常に重要なパーツです。

このフリースペースをこんな風に使いたくないでしょうか?

“お知らせ” というサイドバーのパーツはありませんが、フリースペース内でこんな風に他のサイドバー項目と同じような感じで表示させることができます。

本来フリースペースはこんな感じになってしまいます。

やり方は、フリースペースで以下のように書きます

<div class="skinMenu"><div class="skinMenuHeader"><span class="skinMenuTitle">お知らせ</span></div><div class="skinMenuBody">セミナーの開催

日時:○月○日
料金:10000円

<a href="http://ameblo.jp/***">お申込みはこちらから</a>
</div></div>

※「CSS編集用デザイン」になります。

“お知らせ” が入っている部分が、見出し部分になります。

そして、
<div class="skinMenuBody"> と </div> の間の部分が中の部分になります。

コピーして使ってみてくださいね。

構造的にはこんな感じです。

※フリースペースの上に隙間ができるので

スキンCSSの編集で以下を最後に付け足してみてくださいね

.freespaceArea{
margin-top:0;
}

カスタマイズの手順やその他のカスタマイズはこちらを参考にしてみてください

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