BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ フリースペースを、他の項目のように表示させる

このエントリーをはてなブックマークに追加

アメブロカスタマイズ フリースペースを、他の項目のように表示させる

   投稿日: 2014/06/20    投稿者:webコラム

freee1.jpg

     

     

みなさん、こんにちは♪

今回のアメブロカスタマイズは、『フリースペースを他の項目のように表示させる』技です!

     

フリースペースは自由にいろんなことを書ける楽しいスペースです。

でも、入力してOKしたら、あれれっ!?

 

ここだけ表示が他のところと違う!

 

なんてことにならないように、

フリースペースにも他と同じように表示させちゃいましょう!!

 

 

CSSを触って、表示ができるように設定

 

 

表示ができるように、まずは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>

 

☆★タイトル★☆とある場所は

ブログ画面でプロフィールや最新の記事などタイトルが入っている部分になります。

 

次の☆★本文★☆という場所には内容が入れていきましょう。

 

ためしにタイトルにアメブロカスタマイズ

そして、本文にフリースペースを他の項目のように表示と入れて

実際に表示してみる・・・。

      

      

freee2.png

デザインも使い方も色々

 

 

CSSが編集できないものであっても

同じようにフリースペースで作成すれば他の表示と合わせることができます。

 

かわいいデザイン、クールなデザインの中にも

フリースペースもマッチする素敵なブログになりますね。

    

また店舗ブログを運営されている場合などは、サイドバーに店舗情報や営業時間を表示させると

お客様の目につき、良い宣伝になりますね。

 

 

まとめ:CSSでは変な改行に注意

 

 

フリースペースに書き込んで保存をした後

ブログを見に行くと、表示が崩れていることがあります。

 

その場合は、コードのどこかに不必要な改行が

入っていることが多いので、改変できない状態であれば

コードの間は出来る限り触らないのが無難でしょう。

 

万が一、間違って触ってしまってもいいように、その都度保存していくようにするか、

表示がきちんとできている状態のコードは、テキストファイルなどで保存しておくといいですね。

カテゴリ:

TOPへ