アメブロにある「フリースペース」。


使っている方もいらっしゃると思います。


ただ、普通に記事を書くように使う時は、便利な機能ですが、少々そっけない感じになります。


ブログカスタマイズとオリジナル名刺デザイン Cocoro*et*ごころ
※背景が空けてしまっていて、存在感が薄いです。


これを、次のように表示できる方法を紹介します。

ブログカスタマイズとオリジナル名刺デザイン Cocoro*et*ごころ

ちなみに、これ

CSS編集用デザインはもちろん、既成デザインを使用されているブログでも同じことができます!


以下のタグをフリースペース内に使用するだけです。

<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">ここにタイトル</span></div><div class="skinMenuBody">

表示する内容をここに書きます。

リスト表示することもできます。
<ur class="skinSubList">
<li>たとえば</li><li>こんな</li><li>かんじ</li></ul>
これを何個も作ることができます。</div></div></div>


自分で入力するのは面倒な方はコピペでどうぞ。


リスト表示が不要な場合は、<ul class="-- ~</ul>までの間を削除してください。


同じ要領で書いて行けば、複数のメニュー枠を作ることができます。


<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">ここにタイトル</span></div><div class="skinMenuBody">

表示する内容をここに書きます。

リスト表示することもできます。
<ur class="skinSubList">
<li>たとえば</li><li>こんな</li><li>かんじ</li></ul>
これを何個も作ることができます。</div></div></div>


<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">サンプル2</span></div><div class="skinMenuBody">

表示する内容をここに書きます。

リスト表示することもできます。
<ur class="skinSubList">
<li>たとえば</li><li>こんな</li><li>かんじ</li></ul>
これを何個も作ることができます。</div></div></div>


<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">サンプル3</span></div><div class="skinMenuBody">

表示する内容をここに書きます。

リスト表示することもできます。
<ur class="skinSubList">
<li>たとえば</li><li>こんな</li><li>かんじ</li></ul>
これを何個も作ることができます。</div></div></div>



3つも出来ました!目
ブログカスタマイズとオリジナル名刺デザイン Cocoro*et*ごころ


すでにFacebookアカウントのリンク貼り付けちゃってるよ~


という方もご心配なく。


FBアカウントのリンクタグと併用は可能です。

先ほどの<div>タグを、FBアカウントタグの下に書けば、FBアカウントの下に、上に書けば上に、先ほどのメニューたちが表示されます。



FBアカウントをはさんじゃうことだってOK

ブログカスタマイズとオリジナル名刺デザイン Cocoro*et*ごころ


必ず、「配置設定」で「フリースペース」が表示される場所に置くこと。

また、その際に、「フリースペース」をワイドメニュー側の一番上に置くと、通常2番目に表示されている広告が下部に追いやられる、ということにもなります。


広告が目について嫌だわ、という方には、そんな手もありますよ。という話。



特に既成デザインをお使いのブロガーさんには、おススメしたい方法でした!




自動ペタより、あなたの一ペタラブラブ

ペタしてね