WordPressのウィジェットに動きをつけるには??

スポンサーリンク

最近Wordpressのウィジェットを使い始めました!

その理由としては、もっとホームページを使い易く、見易くするためです。ウィジェットは色々なものを追加できるサイドバーやフッターエリアで、画像だったり検索バーだったり、月別アーカイブ、カテゴリー別に記事をわけてブログが見れるなど様々な使い方がありとても便利です。ただ、このサイドバーなんかいまいちパッとしない…ってなったので、サイドバーに動きをつけてみました!

ちょっとマウスポインターをサイドバーのアーカイブの項目に当ててみましょう…

背景色と文字の大きさが変わります!

今回はこのコードと基本的なWordpressでのサイドバーの操作について書いていこうと思います。

 

■ウィジェットの操作について

 

 

基本的には、Wordpressの外観→ウィジェットからサイドバーやフッターエリアに何を入れるか自由に決めることができます。(ドラッグ&ドロップ)

また、表示したい固定ページなどの指定もすることができ便利です。

 

 

ウィジュットのカスタマイズをするために、今回はテキストをサイドバーに追加しそこに、javascript(jQuery)&cssを追加してあげます。

 

■コードの追加方法

 

テキストをサイドバー、もしくはフッターに追加してあげてテキストにコードを埋め込みます。

 

 

■コード内容

 



jQuery

$(function() {

//マウスポインターがliに乗った時の処理

$('li').hover(function() {

$(this).css('background', '#0096e2');

$(this).css('font-size','20px');

//マウスポインターがliから離れた時の処理

},function(){

$(this).css('background', '');

$(this).css('font-size','');

})

;});

 

コードを書いたあと、ビジュアルを見ると…再生ボタンのようなiconが表示されていると思います。あとはブラウザ上で確認するだけ。簡単ですね!

 

 

最近ホームページのレイアウトを考えていたのですが、浮かばずテーマをころころ変えていて…悲惨なめにあってしまったので

 

Wordpressで不用意にテーマを更新する恐ろしさ。
setTimeout(function(){ $('#zyuudai').css({'display':'block'}); },3000); "重大発表" …これは現実なのか。 そうです現実です。 ...

このテーマから変えずに自分の好きな感じにカスタマイズしていこうと思います(笑)



Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
AllCSSJavascript
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント