BLOG CATEGORY

Monthly Archives

長フチコンテンツ

サイバーアクセル？何者や

サイバーアクセル？<br />何者や
サイバーアクセル？
何者や

ホームページ制作？だからどうした①

ホームページ制作？<br />だからどうした①
ホームページ制作？
だからどうした①

ホームページ制作？だからどうした②

ホームページ制作？<br />だからどうした②
ホームページ制作？
だからどうした②

SEO対策？怪しい話しか聞かないぞ

SEO対策？<span>怪しい話<br />しか聞かないぞ</span>
SEO対策？怪しい話
しか聞かないぞ

集客アドバイザー？よう分からん

集客アドバイザー？<br />よう分からん
集客アドバイザー？
よう分からん

俺なりのまとめを伝える！

俺なりのまとめを伝える！
俺なりのまとめを伝える！

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

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

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

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

freee1.jpg

　　　　　

　　　　　

みなさん、こんにちは♪

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

　　　　　

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

でも、入力してＯＫしたら、あれれっ！？

 

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

 

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

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

 

 

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

 

 

表示ができるように、まずはＣＳＳのところに書き込みをしにいきます。

 

ＣＳＳ編集画面の一番したのところに下記のコードを貼り付けます。

 

 

/*フリースペース*/

.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

デザインも使い方も色々

 

 

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

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

 

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

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

　　　　

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

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

 

 

まとめ：ＣＳＳでは変な改行に注意

 

 

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

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

 

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

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

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

 

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

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

カテゴリ:

TOPへ