ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ フリースペースを、他の項目のように表示させる
投稿日: 2014/06/20 投稿者:webコラム
みなさん、こんにちは♪
今回のアメブロカスタマイズは、『フリースペースを他の項目のように表示させる』技です!
フリースペースは自由にいろんなことを書ける楽しいスペースです。
でも、入力してOKしたら、あれれっ!?
ここだけ表示が他のところと違う!
なんてことにならないように、
フリースペースにも他と同じように表示させちゃいましょう!!
表示ができるように、まずはCSSのところに書き込みをしにいきます。
CSS編集画面の一番したのところに下記のコードを貼り付けます。
/*フリースペース*/
.freespaceArea.subModule{
margin:0;
}
次にフリースペース自体を作りに行きましょう。
フリースペースのページをあけてベースとなる、下記のコードをまず貼り付けましょう。
<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">☆★タイトル★☆</span></div><div class="skinMenuBody">
☆★本文★☆
</div></div></div>
☆★タイトル★☆とある場所は
ブログ画面でプロフィールや最新の記事などタイトルが入っている部分になります。
次の☆★本文★☆という場所には内容が入れていきましょう。
ためしにタイトルにアメブロカスタマイズ
そして、本文にフリースペースを他の項目のように表示と入れて
実際に表示してみる・・・。
CSSが編集できないものであっても
同じようにフリースペースで作成すれば他の表示と合わせることができます。
かわいいデザイン、クールなデザインの中にも
フリースペースもマッチする素敵なブログになりますね。
また店舗ブログを運営されている場合などは、サイドバーに店舗情報や営業時間を表示させると
お客様の目につき、良い宣伝になりますね。
フリースペースに書き込んで保存をした後
ブログを見に行くと、表示が崩れていることがあります。
その場合は、コードのどこかに不必要な改行が
入っていることが多いので、改変できない状態であれば
コードの間は出来る限り触らないのが無難でしょう。
万が一、間違って触ってしまってもいいように、その都度保存していくようにするか、
表示がきちんとできている状態のコードは、テキストファイルなどで保存しておくといいですね。