Skitter 多種多少なアニメーションで画像を変更するスライドショー。 キャプチャは「cube」、キューブ状になって変更します。
Skitter 多種多少なアニメーションで画像を変更するスライドショー。 キャプチャは「cube」、キューブ状になって変更します。
jQuery でページの先頭へ! Scroll to Top Button ? よく見かけるじゃないですかー?「このページの先頭へ」みたいなボタンっ!page top ボタン?スクロールボタン?なんて言うんでしょー?? あれを簡単に(そもそも難しくないですよねw) WordPress に設置してみるのと、ついでにスクロールでのアプローチも考えてみたいと思います〜w 基本的に手抜き大好き!で面倒なこと嫌い!!で細かいことも気にしないですけど、気長にお付き合いください〜w このページの先頭へ! スクロール位置の制御をするので jQuery 使います!WordPress だと標準で使えるから便利ですね! $("body").scrollTop(0); ページの先頭位置へ移動だとこんな感じですよね? $("#page-top").click(function(){ $("body").scroll
ウェブのコンテンツをタブに区切る事でコンテンツが縦長になるのを防ぎ、ユーザの使い勝手を向上することができます。 WordPressが利用するjQueryにはすでにコンテンツをタブ化するライブラリが備わっており、簡単な記述で追加する事ができます。 ライブラリを読み込む jQueryには簡単にタブインターフェースを実現できるライブラリがあり、WordPressにはすでにそのライブラリがインストールされています。ライブラリをウェブページで利用するためには以下のPHPコードを使います。利用するテーマのheader.phpなどに記述します。 <?php wp_enqueue_script('jquery-ui-tabs'); ?> コンテンツをタブ化する コンテンツをタブ化するにはHTMLとJavaScript、CSSを以下のように記述します。下記のコードサンプルがそのままタブの表示サンプルになって
The requested URL was not found on this server. 您要找的内容已被删除
世界中で使われているCMSの一つwordpress。高い拡張性もその人気の一つですが、今日紹介するのは同じく世界中で使われているjavascriptライブラリjQueryとwordpressを組み合わせて実現するテクニックのチュートリアルを集めたエントリー「30 Tutorials Combining Both WordPress and jQuery」です。 Including jQuery in WordPress (The Right Way) jQueryを正しく、テンプレートに読み込ます方法から、Ajaxを使ってランダムに記事をピックアップ表示させる方法などなど様々なjQueryとWordpressを使ったテクニックが紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■WordPress Featured Post Slideshow
実は昨日から、新しく入れようとしているjQueryのプラグインがうまく動かずずっと悩んでしまって、下書きしていた記事を書き上げる時間がなくなってしまった。 今やっと問題を解決できたので、備忘録として。 jQueryをWordPressで読み込む まずは基本。 WordPressにはjQueryやPrototypeといったメジャーなJavaScriptのライブラリが標準搭載されており、それらを読み込む為の関数が用意されています。 WP関数wp_enqueue_script()を使うと、あらかじめ用意されたライブラリを自動的にヘッダに読み込みます。 5つも引数があるけど、必須なのは$handleのみで、後はオプションです。 具体的にはこのように記述。 $handleに読み込むスクリプト名を入れる。標準搭載のライブラリの場合、jQueryなら"jquery"、jQuery UIなら
WordpressとモバイルPC特化のブログですマウスオーバーのアクションで画像を変化させるという方法はたくさんのサイトで用いられていますが、 今まではCSSで割り当てたりHTMLで直接書いてみたりというのが一般的だったと思います。 ここ近年、jQueryというJavaScriptとHTMLの相互作用を強化する軽量なライブラリが登場したことに よりjQueryが普及してきましたが、jQueryは難しいとか思われがちです。しかし、基本さえ覚えてしまえばCSSを書くよりも簡単な感覚で覚えられますので、一番初歩的な画像のマウスオーバーアクションをjQueryを使って動かす方法を記事にしてみたいと思います。 jQueryでマウスオーバー?画像を変える? つまり、こういう事です。 demo おそらく誰でも目にしたことがあるかと思います。何故、わざわざjQueryで動かすのが良いのか?って
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね! それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
なお、wp_enqueue_script() は functions.php やプラグイン内で書くと良いです。 WordPress にデフォルトで含まれているライブラリ WordPress には以下のライブラリがデフォルトで同梱されているので、以下のライブラリは一番最初に紹介したように jquery とするだけで読み込むことができます。 scriptaculous-root, scriptaculous-builder, scriptaculous-dragdrop, scriptaculous-effects, scriptaculous-slider, scriptaculous-sound, scriptaculous-controls, scriptaculous, Image cropper (not used in core, see jcrop), Image copper,
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterの利用法の一つとしてユニーク なモノがあったので備忘録的にご紹介。 Twitterを簡易的なフィードバックツール にしてしまおう、という内容。今まで通り Twitterに投稿するボタンに、感想を加え るようにします。 普段、TwitterではURLとともに感想が書いてあることが多く、フィードバックのツールとしてTwitterを利用しているWebサイトも少なく有りません。このフィードバックをもっと簡易的にしてみよう、というのが今日の内容です。 サンプルは記事の下のほうにあります。 jQueryを使います。僕は基本的にWordPressを使う人なのでWPにあわせたコードです。便宜変更してください。 $(function(){ var url = "<?ph
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
Custom Homepage A flexible homepage layout adapts to different needs—whether for a blog, magazine, or portfolio. Clean Typography Minimal distractions for a crisp, readable design that enhances user experience. Powerful jQuery Header A sleek, jQuery-powered dropdown menu adds a touch of modern interactivity.
本当に基本的のようで気が引けますが、みなさまご教授ください。 デフォルトのテーマをローカル環境下でカスタマイズしています。 http://pikachoose.com/ こちらで配布されているpikachooseというスライドショーのjqueryプラグインを使用したいのですが、動かずに困っています。 やりたい事: pikachooseを設置したい やった事: ・ダウンロードしたjquery-1.3.2.jsをhtdcos/wordpress/wp-admin/js/の下に置いた。 ・プラグインのHeader and footerを利用して、ヘッダーに以下のコードを書き込んだ。 <script type="text/javascript" src="wp-admin/js/jquery.js"></script> ・ダウンロードしたpikachoose_3.0というフォルダの仲にあったpik
HOME>WEBプログラム覚書>jQuery プラグイン Slide boxメモ jQuery プラグイン Slide boxメモ ちょうどこういうのやりたかったので どんな感じで実装されてるか調べてみた。 クライアント
デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。 そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。 最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。 使用方法 Slide boxからslidebox.js、slidebox.cssを、jQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="slidebox.css" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="slidebox.js"></script> <script> $(document).ready(function
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
Lorem lispum. In blandit turpis. Cras a mi at odio. Vivamus egestas urna. Furce gravida lectus. Lorem lispum. In blandit turpis. Cras a mi at odio. Vivamus egestas urna. Furce gravida lectus. Lorem lispum. In blandit turpis. Cras a mi at odio. Vivamus egestas urna. Furce gravida lectus. Lorem lispum. In blandit turpis. Cras a mi at odio. Vivamus egestas urna. Furce gravida lectus. Slide box - a jQ
This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the detai
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く