Css3 Transition

Css3 Transition

 

WordPressの特定ページのみでCSS3を使う。

WordPressと切り離したいページが時々あると思う。

WordPressと切り離さないなら、header.phpとかに、ifで投稿記事を分けて、特定の投稿なら別のCssを読ませるとかの工夫が必要。

  1. 完全に新規で作成してヘッダーにCSSを書く方法が手っ取り早い。
  2. FTPでアップして、どっかの記事にはフルパスでリンクを貼る。
    ちなみに、WordPressはフルパスにしないと、インストールフォルダがルートなので、全てそこからの相対パスになる。
  3. ソロモン試算表のマニュアルへのリンク
 


<style type="text/css">
<!--
#file {left: 433px;top: 70px;}
#kaito {left: 495px;top: 70px;}
#fonto {left: 588px;top: 70px;}
#jarhelp {left: 648px;top: 70px;}
#mondai {left: 648px;top: 170px;}
#kamoku {left: 611px;top: 289px;}
#tform {left: 70px;top: 68px;}
#karikata {left: 811px;top: 290px;}
#kashikata {left: 1052px;top: 290px;}

#container .number {
font-size:0.95em;
text-align: center;
color: #000;
background-color: #F90;
position: absolute;
height: 18px;
width: 18px;
text-indent: 2px;
padding: 2px;
border-radius: 1em;
transition: background-color 1s linear 0 , width 0.5s linear 0 , height 0.5s linear 0;
-moz-transition: background-color 1s linear 0 , width 0.5s linear 0 , height 0.5s linear 0;
-moz-transition: 1s ease-in-out;
overflow:hidden;
}

#container .number:hover {
height: 160px;
width: 450px;
background-color: #272822;
color: #A7EC21;
text-align: left;
border:solid thin #CCC;
z-index:100;
}

#container .number2:hover {
height: 120px;
width: 400px;
background-color: #272822;
color: #A7EC21;
text-align: left;
border:solid thin #CCC;
left: 852px;/**/
}
-->
</style>