jqueryプラグイン コンテンツスライダー myContentSliderの使い方

ブログアイキャッチ画像041

read more

軽量でレスポンシブ対応のコンテンツスライダーmyContentSliderを紹介したいと思います。このjqueryプラグインは、画像をスライド表示させるのではなく、背景画像の上にテキストをスライドさせます。画像のスライドの後にテキストをスライドさせるプラグインもありますが、テキストだけというのも良いかなと思います。

続きを読む»

css tableで背景色を交互に変える方法

ブログアイキャッチ画像040

read more

cssの擬似クラスnth-childを使用して、テーブル(表)の行または列の背景色を交互に変えて視認性をアップさせます。行や列を追加・削除しても自動的に背景色を変えてくれるのでとても便利です。nth-childはIE8以下では未対応ですが、マイクロソフトはIE8のサポートを終了したので、これからは使用していこうと思います。

続きを読む»

背景画像のスライドショーjquery mb bgndGalleryの使い方

ブログアイキャッチ画像039

read more

この背景画像のスライドショーのjqueryプラグインは、ズームの画像切り替えエフェクトがかっこいいので気に入っています。古くからあるプラグインですが、最近バージョンアップされたので書き留めておきます。
続きを読む»

CSSでマウスホバー時に画像に吹き出しを表示

ブログアイキャッチ画像038

read more

cssのみで作成したマウスホバーエフェクトで、画像にマウスを重ねると画像の上又は下に吹き出しが表示されます。写真の内容についての説明をする時に使えるかもしれません。

続きを読む»

jQueryプラグインの設置方法

ブログアイキャッチ画像037

read more

このブログでもjQueryのプラグインを紹介していますが、jQueryプラグインの詳しい設置方法を書いていなかったので、jQuery本体の読み込み、プラグインの読み込み、プラグインの初期化の順で説明します。

続きを読む»

グーグルマップAPI v3を使って地図を表示

ブログアイキャッチ画像036

read more

Googleが提供している「Google Maps JavaScript API」を使って地図を表示します。
APIを使用することで埋め込み式よりも色々なカスタマイズが出来ます。ここではスクロールズームを無効にしたシンプルな地図を表示します。

続きを読む»

Lightbox風jQueryプラグインのDarkboxの使い方

ブログアイキャッチ画像035

read more

軽量でレスポンシブ対応のDarkboxを紹介したいと思います。名前はダークですが、全然そんな感じはなく、ポップアップ開始と終了時のアニメーションが良い感じです。

続きを読む»

CSSでラジオボタンの大きさを変える方法

ブログアイキャッチ画像034

read more

以前CSSでチェックボックスの大きさを変える方法を書きましたが、今回はラジオボタンの大きさを変える方法を書き留めます。

続きを読む»

CSSとjqueryでトップへ戻るボタンの作り方

ブログアイキャッチ画像033

read more

ページをスクロールするとウィンドウの右下に表示されるトップへ戻るボタンの作り方を書き留めます。CSSでサンプルボタンを作成しましたので、そのまま使用しても良し、改良しても良いです。

続きを読む»

WordPressのサイドバーにアイキャッチ画像付きで最近の投稿を表示する方法

ブログアイキャッチ画像032

read more

wordpressのテーマを修正しなくてもサイドバーに最近の投稿を表示することはできますが、アイキャッチ画像が表示されません。そこでプラグインを使用しないでアイキャッチ画像を表示できるように作成しました。

続きを読む»