サイドバーをjQueryでアコーディオン仕様にしてみた。


公開日:2013年11月23日 土曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:660 | Leave a comment

ブログロール

なんだかサイドバーが果てしなく長くなってきたので

ブログロールだけ折りたたみにしてみた。

jQueryは実装されているので、導入は簡単!
導入がまだの方は、Download jQuery | jQueryからダウンロードしてくださいませ。
意味が良くわからない方は7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4をどうぞ♪

実装方法

head内に以下を挿入。

他に、jsのコードがあれば一緒にしてもいいはず。

衝突回避で、スクリプト内の”$”をすべて”jQuery”に置き換えています。

ブログロール部分は出力されると以下の様になりますので、4行目で折りたたむ(隠す)部分を指定します。
例:”.widget_links .xoxo”

5行目で、マウスオーバーして折りたたみを開く部分、ここでは”h3”タイトルにマウスオーバーしたら隠れていた部分が開きます。
例:”.widget_links”

 

追記

2013/11/25 ちょっと変えてみた。

マウスオーバーじゃわかりにくいっぽいから、クリックで動作するようにして、かつ一番目のブログロール「お友達」を開いておくように。

追記

2013/11/26 もっと、簡単な記述方法がありました。

リンクウィジェットを使用せず、Post Snippetsを使ってます。

以下を「<?php」と「?>」を省いてPost Snippets に設定。

テキストウイジェットに↑上記の様に書いてます。

参考:
リンクをリストタグで表示するwp list bookmarks | WordPress攻略本

超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG

参考サイト

[WordPress]jQueryによるカテゴリのアコーディオン表示 | HI-ROM.COM BLOG
7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4

雑感

最近、お友達のブログの更新情報や、人気記事などサイドバーに表示したいものが増えてきてサイドバーがとっても長くなってきていたので、なんか良い手はないかなーと思ってたんだけど、このアコーディオン型、ほんとはちょっと冒険。



というのも、あまりインターネットに詳しくない人にとってこれって、きっと、わかりにくいと思う。
だけど、あえてやってみたのは、実験的な意味あいが大きい。
このリンクがどれほど機能しているかは、未知数ですしね。

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年11月23日 土曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:660 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

  • 14718137_1784581188494616_6735491666343362560_n

Leave a Reply

Required fields are marked *


CAPTCHA