Wordpress

jQueryおもしろいじゃない。
当Blogの右側のカラムに、Aboutmeというウィジェットが配置されているのですが、そこの more ボタンを押してみてください。

とまぁそんな感じでスライドするように出来ました。

<span class="bold">name</span>:Ricck(21)</br>
<span class="bold">occupation</span>:College Student</br>
(economics)</br>
<span class="bold">favorite</span>:</br>
FPS,FEZ:Aエル</br>
Camera:D80</br>
Android,Xperia</br>
</br>
<!-- ここから隠す -->
<div id="aboutmemore">
	<span class="bold">Server</span>(http,ftp,mumble,etc)</br>
	<span class="bold">Web</span>(html css js jQuery)</br>
	<span class="bold">PC</span>(Corei7,HD5850)</br></br>
	<span class="bold">Link</span></br>
	<a href="http://www.facebook.com/profile.php?id=100001176943922">Facebook</a></br>
	<a href="http://mixi.jp/show_profile.pl?id=24333775">mixi</a></br>
	<a href="http://fesns.com/?m=pc&a=page_f_home&target_c_member_id=50928">FESNS</a></br>
	<a href="http://fez-sns.jp/?m=pc&a=page_f_home&target_c_member_id=1932">FEZ-SNS</a></br>
	<a href="http://steamcommunity.com/id/ricckn">Steam</a></br>
</div>
<!-- ここまで -->
<a id="aboutmeclick" style="position: relative; margin-left: 100px;">
	<img src="//www.remicck.net/wp-content/themes/wp.vicuna/skins/style-mono/images/common/more.png">
</a>

んでjQuery

$(document).ready(function(){
    $("#aboutmemore").hide()
    $("#aboutmeclick").click(function(){
        $("#aboutmemore").slideToggle();
    });
});

初め躓いたのは一行目の

$(document).ready(function(){ 

が無くてまったく動かなかったこと。実はまだこれがどういうものか正確に把握してないんだけど、サンプルコードを見る限りこれ必要そうだったから入れておいた・・・。

#aboutmemoreを隠しておいて、#aboutmeclick(moreの画像のaタグに付与しておいて)をクリックすると、スライドして出てくる、っと。

とりあえず動く部分ができたから中のHTMLはもう少しこってもいいかもしれない。
問題はなんかロードしてる段階でみえちゃう場合があるんだよね。隠れるまで時間がかかる的な。これどうやって対処したらいいかまったくわからん。高速化的な部分になるのだろうか、謎。

まぁそこは後々。