Category【パソコン】 [jQuery] 1/1

Amazonと楽天のアフィリエイトを併記する方法

jQuery を使って記事内でAmazonと楽天のアフィリエイトを併記してみました。(例) 『127時間』(1)記事内の記述class名は、アフィリエイト識別用なので任意です。参考サイト:Amazonと楽天のアフィリエイトを効率化するjQuery技...

  • 0
  • 0

FC2で Lightpop 

これまで、大き目の画像は記事内でサイズ指定後、 Popbox を使用して原寸に拡大してきましたが、今回、 動画もオーバーレイ表示させる事が出来る「Lightpop」を使ってみました。 ■ 「Popbox」と「Lightpop」の比較 ○ こちらは Popbox 表示○ こちらは Lightpop 表示 Lightpop がダウンしたので、Lightbox に変更しました。(H29.4.24)...

  • 0
  • 0

jQueryを使った記事の開閉

当ブログでは、開閉機能を色んな箇所で使っています。  □ 続きを読む  □ コメントリスト表示(何故かタブルクリックじゃないと開かない)  □ CM・TBのスクロールバー  □ サイドバーのタイトル表示今回は、jQueryを使った記事の開閉を行う方法を紹介します。 下記の場合に使えるのではないかと思います。 ・ 記事が長文となりコンパクトに纏める場合  (例) 『ATHENA-アテナ-』 雑感 【13話以降の内容を見る】 ・ ネタ...

  • 0
  • 0

「My Recommend」 コーナー改良

「jCarousel Lite」を使った「My Recommend」 コーナーの表示方法を改良しました。□ 表示アイテム数を 「3 → 4」  従前 visible: 3  改良 visible: 4□ 表示方法を 「オート → クリック式」  従前 auto: 800,      speed: 1400  改良 speed: 1000,      easing: "linear"参考サイト:ウェブデザイン工房 jCarousel Lite js...

  • 0
  • 0

画像を自動ドアのようにスライドさせる

画像にマウスオーバーすると、画像が左右に2分割され、画像の下からテキストや画像などを表示させるエフェクト。【サンプル】『阪急電車 片道15分の奇跡』 配役紹介の記事で使ってみました。若干、表示に時間がかかりますが、劇場の開演効果みたいでお洒落です。参考サイト:画像を自動ドアの様にスライド「Image splitting effect with CSS and JQuery」...

  • 0
  • 0

クロスフェードで画像を切り替えスライドショー

CMや行楽地の記事で、画像を切り替えスライドして紹介する際、 これまでは、一部、IE独自のFilter機能を使用していた為、 FirefoxやChromeでは上手く表示出来ていませんでした。 今回、jQuery の innerfade を使用し、 「クロスフェードで画像を切り替え」る方法に変更致しました。 参考サイト:クロスフェードで画像やテキストを切り替えスライドショー         クロスフェードで切り替わる画像(URL)を簡単実装    ...

  • 0
  • 0

画像の拡大縮小

jQueryを使って画像をダブルクリックした地点を中心に拡大縮小 何処でも良いので、画像の端をダブルクリックしてみて下さい。 その箇所が拡大表示されたかと思います。再度ダブルクリックすると 元画像に戻ります。中々、クールですね。 画像:#2149「もみじと水車の情景」のフリー写真素材(フリー写真素材 Futta.NET)...

  • 0
  • 0

jQueryを使ったタブメニュー 

エントリ記事が長くなるのでタブで整理する方法にトライ[目標] タブの組み合わせ ・ 関連記事紹介-関連商品紹介 [H22.09.10.設置完了] ・ コメント投稿欄-コメント一覧 [H22.09.09.設置完了] ・ トラックバックURL-トラックバック一覧 [H22.09.07.設置完了] 3つのタブに纏める。[後記] ・ 関連記事紹介は、「関連記事」と「関連情報」に細分 ・ 関連商品紹介は、「関連DVD」と「関連書籍」に細分使用するの...

  • 0
  • 0

「ページトップへ戻る」リンク 

便利ナビから各記事へは「ページ内をスムーズにスクロール」で移動出来ますが、各記事からページトップに戻るリンクは、追記(more_link)エリア内に埋没しています。本来は各記事の末尾(footer)に入れれば良いのですが、空きスペースがありません。そこで、カテゴリ・アーカイブ・サーチ・タグ・個別記事で共通して使用出来る「ページトップへ戻る」ボタンをページ右下に設置する事にしました。参考サイト:Country Netlife 「ページトップ...

  • 1
  • 0

ページ内をスムーズにスクロール

現在、当ブログは「最新記事」「記事(ページ別)」とも表示件数を 5件にしていますので、1ページの表示の長さがそれほど長くなる事はないと思います。これまではタイトルをクリックすると各記事に直接、移動していましたが、これを jQuery を使いスクロール状況が判るように変更してみました。参考サイト:hatena chips スルスルっと気持ちよくページスクロール        ブログが作りたい!「ページの先頭へ戻る」の常駐表示:C...

  • 0
  • 0

jQuery で ニューススティッカー

以前は”PC版の文字放送”とも言えるブログパーツ「ニューススティッカー」を付けていましたが、他のパーツと干渉し不具合が発生した為、現在は付けておりません。◎ jQuery で ニューススティッカーを流す方法参考サイト:JavaScript + Ajax 実践サンプル集 (907本以上) ニュースティッカーを表示        skuare.net ニュースティッカーを作成する今回は「お薦めカスタマイズ」欄で使用。...

  • 0
  • 0

jQuery にはまる。

画像で特殊効果を出そうと思ったら、jQuery にはまってしまった。Highslide JSでスライドショー が上手くいき、調子に乗り過ぎてしまった。使用してみた jQuery ・ jQuery Cycle Plugin(Easing) → 木曽三川公園 ・ jQuery Cycle Plugin(Custom Transitions) → あじさいまつり ・ jQuery cross slide → サントリー・モルツ ・ jQuery Tooltip → 吹き出し便利やけど、こんなエラーにも遭いましたぁ~~    スクリプトエラー( ...

  • 0
  • 0

[ crossSlide ] 設置例

画像はこちらで、ご確認下さい … ♥サントリービール ザ・プレミアム・モルツ竹内結子 「ぶっちゃけ」篇中元篇は、他にも3篇あります。○ 「親父キャラ」篇 ○ 「小声」篇 ○ 「いただく側」篇」どれも、ほのぼのして楽しい。。。...

  • 0
  • 0