長すぎるカテゴリー欄をアニメーションですっきりさせてみた
こんにちは鬱太郎です。ブログを書いているとついつい色々なカテゴリーが増えてしまいますよね?私もそうなんです。カテゴリー数が増えてしまうと、サイドモジュールのカテゴリーが占める割合が大きくなってしまいます。他のモジュールが見えなくなってしまいます。
そんな悩みを解決してみたので記事にしたいと思います。
右のカテゴリー欄にマウスカーソルを合わせると…?
スマホの方はカテゴリー欄のタイトルをタップすると…?
アニメーションで開いたり閉じたりします!
何もしないとカテゴリー欄のサイズが小さくなります。カーソルを合わせると、カテゴリー欄がすべて表示されます。
使い方
下のコードをデザイン
→カスタマイズ
→サイドバー
→モジュール追加
→HTML
のコード欄に追加します。タイトルは不要です。一行目はjQueryの読み込みです。既にヘッダー等に同様の記述がある場合は必要ありません。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ var normalHeight = "300px"; $(".hatena-module-category").height(normalHeight).css("overflow","hidden").hover(function(e){$(this).animate({height:$(this).get(0).scrollHeight},{duration:"slow"})},function(e){$(this).animate({height:normalHeight},{duration:"slow"})}); }) </script>
私は既にヘッダーにjQueryの読み込み記述があるため、上の画像では同様の記述がありません。注意してください。
var normalHeight = "300px";
の数値はタイトルを含んだカテゴリモジュールを表示させる高さです。好きな値に変更してください。
はい。これだけで完成です!簡単ですね!
終わりに
何かと応用がききそうなのでぜひ試してください!何より楽しいです(*'ω'*)
スターやブックマーク、読者登録等いつもありがとうございます!大変励みになっています!
またね('ω')ノ