パララックス効果で作成されているサイトやプラグインは沢山ありますが、今回はとっても簡単なJQueryコードで作成されているPARALLAX || roXonのマウスの動きに合わせて画像が動くパララックス効果を紹介します。 …
REED MORE →
マウスの動きに合わせて画像が動くパララックス効果
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング …
REED MORE →
JQueryで背景画像を動かすアニメーション効果
JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。この記事を元 …
REED MORE →
スクロールで背景画像を別々に動かすパララックス効果
通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果 …
REED MORE →
背景画像をフルスクリーンで簡単スライドショー
背景画像をフルスクリーンでスライドショー出来る方法を紹介します。JQueryのプラグインは使わないで簡単なコードだけでスライドショーしますので設置も簡単で軽量だと思います。 背景画像をフルスクリーンで簡単スライドショーの …
REED MORE →
Google APIのサイト内検索機能を使い関連記事を表示
Google APIでブログの関連記事を表示することは出来ないかと思い探していたらWebparkさんの記事にGoogle AJAX Search APIで関連記事を表示(FC2ブログなど)と言う記事がありました。その記事 …
REED MORE →
CSSだけで背景をフルスクリーンYouTubeにする
背景にYouTubeを設置するとインパクトあるサイトが簡単に作成できます。 YouTube動画は自動再生になってますのでサイトが表示したら動画が自動で再生されます。又記事をスクロールしても動画は移動されないので常に動画が …
REED MORE →
アメブロ(html5版)のスタイルシートカスタマイズ・改造
以前アメブロ(xhtml版)のカスタマイズは紹介していますが、今回はアメブロ(html5版)のカスタマイズを紹介します。以前のアメブロと違いhtml5版で気になるのはヘッダー広告が目立ちすぎてる事なんかじゃないかと思いま …
REED MORE →
はてなブックマークブログパーツの人気記事にランキング画像を付けて表示
ランキング画像の付け方は以前紹介したWordPressの人気ランキングなどにスタイルシートでランキング画像表示と記事の内容がダブってしまう部分がありますが、今回は、はてなブックマークの紹介も含めてランキング画像の付け方を …
REED MORE →
可変スタイルとMedia Queriesの組み合わせは便利だけど難しい
可変スタイルとMedia Queriesを組み合わせてスタイルシートを作成すればスマートフォンやタブレットのブラウザサイズに合わせてスタイル幅を可変させレイアウト変更することがスタイルシートのみで出来ます。かなり便利なん …
REED MORE →
