アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -95ページ目

CSS ルームは絶対に使わせないよ~ぉ!?

ルームがまったく機能していない場合・・・



わたしのブログのように全面ブログへのリンク画面 にしちゃったり・・・も・・出来ますが・・



画像を作るのもメンドイ!もっと簡単に・・・・

むしろ・・何も表示させておきたくない! って~場合・・・

(ブログとなうへのリンクは残しておかないとね・・・)


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

ルームのフリースペースにこのままコピペ・・・


<style type="text/css">#leftArea,#rightArea,#footerArea{display:none;}</style>




なう へのリンクもやってないから消しちゃいたい・・・


<style type="text/css">.last{display:none;}</style>



見本のルームです

JavaScript 定義リスト <dl><dt><dd> 開閉

アメブロ向上企画書ノート  とりあえず形になった記念?

前回のはできましたか?



で・・・ 今回はFQAで使っている↓これっ・・・・開閉させます
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


やり方の説明です




フリープラグインに・・・


<script type="text/javascript"><!--
$(function(){
$(".fqa dt").click(function(){
$(this).toggleClass("dtcl");
$("+dd",this).slideToggle("normal");
});
});
//--></script>



※開閉画像(アイコン)をつけない場合は
$(this).toggleClass("dtcl");
これは必要ありません



CSSに・・・・前回のとほとんどダブっいますが・・


/*FQA*/
.fqa{
padding:10px 20px;/*A B*/
}
.fqa dl{
width: 375px;/*C*/
}
.fqa dl dt{
margin-top:10px;/*D*/
padding:1px 0 1px 10px;/*E 0 F G*/
font-size:1.2em;/*文字サイズ*/
background:#cccccc;/*背景色 H*/
cursor:pointer;
}
.fqa dl dd{
margin:0;
padding:10px;/* I */

border:1px solid #cccccc;/* J */
display:none;
}

/*開閉画像 開閉画像をつけない場合は必要ありません↓*/
.fqa dl dt.dtop{/*開・+ 画像*/
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:360px center;/*表示位置 K*/
}
.fqa dl dt.dtcl{/*閉・- 画像*/
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:360px center;/*表示位置 K*/
}



前回のと違うのは・・開閉画像のCSS(水色部分)と

.fqa dl dd{
display:none;
}


最初は表示しないように display:none;を設定しています

それと・・


.fqa dl dt{
cursor:pointer;
}


見出しにマウスがのった時にクリックして~ってハンドに変わるように




アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


開閉画像(アイコン)をつける場合は・・・

  ←このような画像を用意します(これを使う場合は自分の画像フォルダにアップして下さい)


または↓アメブロで使っている画像をお借りしちゃいます(画像のURLはないしょで?そのまま使います)


  http://stat100.ameba.jp/p_skin/rabbit_paper/img/icon_on.gif
  http://stat100.ameba.jp/p_skin/rabbit_paper/img/icon_off.gif



  http://stat100.ameba.jp/p_skin/sss_02/img/icon_on.gif
  http://stat100.ameba.jp/p_skin/sss_02/img/icon_off.gif



  http://stat100.ameba.jp/p_skin/sss_02_sevencolors/img/icon_on.gif
  http://stat100.ameba.jp/p_skin/sss_02_sevencolors/img/icon_off.gif



  http://stat100.ameba.jp/p_skin/sss_02_dark/img/icon_on.gif
  http://stat100.ameba.jp/p_skin/sss_02_dark/img/icon_off.gif



  http://stat100.ameba.jp/p_skin/sss_04/img/icon_on.gif
  http://stat100.ameba.jp/p_skin/sss_04/img/icon_off.gif



  http://stat100.ameba.jp/p_skin/sss_05/img/title_on.gif
  http://stat100.ameba.jp/p_skin/sss_05/img/title_off.gif


※なぜか?onとoffで+と-が違っている場合もありますから注意下さい



開閉画像(アイコン)の表示位置

background-position:right center;/*表示位置 K*/
コレでは端すぎます

background-position:360px center;/*表示位置 K*/
左からの位置を決めます


※上のCSSの例で横幅  width: 375px;/*C*/ の場合360pxくらいということです
 実際に見ながら調整下さい


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



また・・他を開いたときにすでに開かれているのを自動で閉じるようにも出来ますが・・
使いにくかったのでやめた方がいいです
クリックしたときにそれより上が開いていた場合・・

上が閉じられて縮むことにより見たい部分が上にずれてしまいます




HTMLに書くときは・・

<dl>
<dt>定義リストって?</dt>
<dd>定義リスト&lt;dl&gt;は用語&lt;dt&gt;とその説明(定義)&lt;dd&gt;から構成</dd>
<dt>どんなときに使うのか?</dt>
<dd>FQA(Q&A)や用語集などで使うと便利です</dd>
<dt>・・・・・</dt>
<dd>・・・・・・・・・・・です</dd>

</dl>



<dt>用語・見出し</dt>

<dd>説明や内容</dd>

このセットをまとめて <dl> と </dl> の中に入れます


HTMLにはそのまま < や > などは書くことは出来ません



はじめに記事を書くで表示したいように書いてしまいます

そのとき文字色やリンクなども貼っちゃって完成形にしちゃってください
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


形が出来ましたら HTMLタグを表示にして HTMLタグをまるまるコピー 
(コピーしたら記事は必要ありませんのでそのまま終了させてください)
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

コピーした部分を <dd> と </dd> の間に貼り付けます

<dt>定義リストって?</dt>
<dd><p>定義リスト<font color="#ff0000">&lt;dl&gt;</font>は用語<font color="#ff0000">&lt;dt&gt;</font>とその説明(定義)<font color="#ff0000">&lt;dd&gt;</font>から構成</p>
<p><a href="http://ameblo.jp/plan-note" target="_blank">アメブロ向上企画書ノート</a>
</p>
</dd>


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



フリープラグインにすでに入っているものとかち合って動作しない場合があります

その場合はフリープラグインに書く順番を変えると動作する場合があります

それでも動作しない場合は・・ あきらめましょう?

(このブログでは動作しませんでした・・・ 面倒だったのであっさりあきらめました?)

フォトサービスの終了について m(_ _)m

どうやら・・早とちりをしていたようで・・



フォトサービスの終了のアナウンスで・・


■今回終了する機能
・投稿したフォト、作成したアルバムの削除



コレをわたしはフォト画像の削除って受け取ったんです
なので・・画像を削除されちゃったらフォト画像のURLには画像は存在しないわけで・・
大変だ~って勝手に心配していたようです・・



実際は・・フォトの画像のURLには画像は存在しています・・



どうやら・・・ フォト画像を削除ではなくて
すでに投稿した画像を削除する行為が出来なくなりますよ~って事のようですね・・


わたしの早とちりでした


「よく読めばわかるだろ~」ってツッコミコメントはやめてくださいね

なんせ・・小心者ですので・・・傷つきます?



お騒がせいたしました  m(_ _)m




注意!

スライドショーをサイドバーに表示  
こちらを使ってサイドバーにスライドショーを表示されていました方は

フリープラグインの中から


<script type="text/javascript" src="http://stat.ameba.jp/photo/js/library/swfobject.js"></script >
<script type="text/javascript">
<!--
var sideSlideshow = new SWFObject("http://stat.ameba.jp/photo/swf/user/slideshow/slide_mini.swf ", "slide_mini", "150", "150", "8", "#ffffff");
sideSlideshow.addParam("wmode", "transparent");
sideSlideshow.addVariable("amebaId", "
あなたのID");
sideSlideshow.write();
//-->
</script>


この部分を削除下さい

そのままでもサイドバーに表示されないだけですのでかまいませんが・・

フリープラグインには文字数制限がありますので削除しちゃった方が精神衛生上?いいとおもいます