WordPressに簡単にGoogleマップを設置できるプラグイン Simple Map
WordPressの記事に簡単に地図を挿入するプラグインです。 設定等はなく、書くショートコードで色々カスタマイズする事ができます Simple Mapの基本的な使い方 http://wordpress.o […]
マウスオーバーで回転する3Dなボタン 3D button flip
3D button flip マウスポインターを乗せるとクルッと回転して、別の側面を表示する3Dなボタンです メニューなどで並べて表示したときに、楽しそうかなと思います rotateを使って3D表現されています SCSS […]
短いコードだけどカッコいいSVGを使った、マウスオーバーのアニメーション SVG Animation
SVG Animation 動作が止まっているときはRERUNしてください、それでもうまくいかない場合はこのリンク先で見れます シンプルながら、SVGを活かしたカッコいいアニメーションです サイトのロゴにこのアニメーショ […]
CSSでマウスオーバーで文字がスライドして入れ替える方法
CSSのline-heightとネガティブマージンを使って手軽に文字を入れ替える方法です さらにtransitionを使ってアニメーション化します HTML コード <div> <p>TEXT 0 […]
BracketsのコードヒントでCSSのPosition stickyが候補に表示されてたので調べてみた
CSSのposition sticky まだ試験段階のもので、標準で動作することは基本的なくてGoogle Chrome CanaryとFirefox Nightlyで、機能を有効にすることで試すことが可能のようです S […]
レスポンシブなCSSで作られた円形の画像ギャラリー circle image gallery (pure CSS version)
circle image gallery (pure CSS version) CSSだけで作られた円形の画像ギャラリーです 周りの回転している画像にマウスポインターを乗せると中央の画像が切り替わるものです レスポンシブ […]
AdSenseが簡単に設置できるWordPressプラグイン Google Publisher Plugin（google公式）
Google公式のWordPressプラグイン Google Publisher Pluginはウェブマスターツールでのサイトの確認と、AdSenseの管理が簡単に行えるプラグインです Google Publisher […]
少し奇抜なCSSだけで作られたメニュー Pure Css3 Menu
Pure Css3 Menu 好みは結構分かれそうなデザインのCSSだけで作られたメニューバーです ドロップダウンのあるメニューで、奇数と偶数でデザインを分けてギザギザな表示になっています – […]
WordPressのプラグインで現在の検索エンジンでの表示順位を収集して確認できるSEO Rank Reporter
SEOがどれほど進んでいるのかをチェックするできるWordPressのプラグインがあります。 このプラグインを利用することで、現在の検索結果の順位を3日ごとに収集して表示してくれるものです SEO Rank […]
画像の移り変わりが楽しい3Dアニメーション Grid Animation Effects
Grid Animation Effects ANIMATEのボタンをクリックしたら、表示されているサムネイルがランダムに3Dアニメーションします。 この例ではクリックでアニメーションさせていますが、ページを開いた時にア […]
CSSだけで作られた、ゲームボーイがアニメーションで出来上がる
ゲームボーイをCSSで描いて、それをアニメーションで少しずつ出来上がっていく様子です ゲームボーイの内部もアニメーションで作れれていて見ていて楽しい 実用的なWEB制作には、あまり使えるシーンが無いのですが、CSSでここ […]
CSSだけで作られた立体感のある黒ベースの光が回るローディング
CSSだけで作られたローディングです CSSだけで作成されたローディングで、光が回っているのですが、ちゃん光の反射も表現されていて立体感があります。しばらく見てられるぐらいカッコいいです ローディングが止まっている場合は […]
暗闇の中、懐中電灯で紙を照らしているかのようなWEBサイトのアイディア
マウスポインターがライトとなってページを照らすアイディア 通常のWEBサイトでこんなことされたら、たまったもんじゃないんですが遊びとしてはとてもおもしろいです 電気のスイッチなんかを作って、全体を明るくするなんて工夫を加 […]
メガネのレンズがあるところだけクリアに画像が見えるCSSの画像フィルターblurを使ったアイディア
CSSのblurを使ったメガネのレンズの部分をクリアに見せるアイディア メガネを使えばこんなに綺麗見れますよっていう宣伝につかったり、メガネの部分を虫眼鏡にして遊べるWebサイトを作ったりと使えそうですね […]
CSSだけでピアノの鍵盤をメニューに仕立てたデザイン
Piano Menu ピアノの鍵盤をメニューに使った、CSSだけで作られたものです 面白いアイディアですね、あと鍵盤をマウスオーバーすると、それぞれから音が鳴ればもっと楽しいですね あとは、このままではメニューとは気づか […]
WordPress メインループ以外のget_postsで各記事の抜粋the_excerpt()を表示できるようにする方法
WordPressの各記事の抜粋はthe_excerpt()を使えば表示できるのですが、メインループ以外ではそのままでは行かないみたいです get_postsでthe_excerpt()を使えるようにする一 […]
スマホ・タブレットに適したレスポンシブなドロップダウンメニュー
画面の幅によって自動で変形するメニューです スマホやタブレットにも最適なデザインに変動します Treehouse Contest – Responsive Nav 3段階で表示が変わります 第一 […]
9つの画像のマウスオーバーでキャプションを表示させるアイディア
Some hover effect ideas カードタイプの画像にマウスオーバーをした時に表示するアニメーションのアイディア集です 9つのパターンがあり、どれも実用性のあるものとなっています 個人的には4番目、6番目が […]
better pop up blockerを使っているとWordPressで画像のアップロード関連がうまくいかない時がある
いつの間にかWordPressで画像のアップロードがうまくいかないようになったので、原因はWordPressのプラグインとかテーマのfunctions.phpの設定の問題かなと思って、結構悩んだんですが、原因はbette […]
操作が気持ちいい 子メニューがスライドインしてくるサイドバーメニュー ｛HTML・CSS｝
Sidebar Thing サイドメニューをマウスオーバーすると、子メニューがスライドインして上に重なるように表示されます またスライドインするアニメーションもちょうどいい具合で気持ちいい CSSだけで実装可能です &n […]
