これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ

ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
サイト読み込み時
ヘッダー
コンテンツ
- 6.中心に水平線を入れる/CSS
- 7.均等に並べる/段組み/CSS
- 8.コンテンツが現れた時にアニメーションさせる/jQuery
- 9.マウスホバーで画像を拡大しキャプションを出す/jQuery
- 10.マウスクリックで画像を拡大する/jQuery
- 11.画像を様々な形で切り抜く/CSS
- 12.ボタンエフェクト/CSS
- 13.動きのあるチャート/jQuery
- 14.クリック領域を作る/svg
- 15.Googleマップを表示
サイト読み込み時
1.画像読み込み時、ローディング画像を表示/jQuery

コンテンツをロードするまでローディング画像を表示させる一番簡単な方法。ローディング画像をIDで囲い、ローディングが終わったタイミングでhide()
で消しています。
2.読み込み時に文字を動かす/jQuery

FlashのようにJavaScriptでアニメーションを実現する書き方でsetTimeout
を使っています。jQueryでフェードインなどを○秒後に実行する場合はsetTimeout
とopacity
を使います。
- 【初心者でもできる!】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | DX.univ
- jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 | BlackFlag
ヘッダー
3.文字の拡大・縮小/jQuery

コーポレートサイトで使われていることが多かった文字のサイズ調整は、Text Resizerを使うと実現できます。
4.入力補助/jQuery

オートコンプリート機能を実装。サーチボックスに頭文字を打ち込むと、候補を表示する機能。単語を追加する必要はありますけど、サイト内で検索される単語は限られてくるので、使えるんじゃないかと思います。
5.伸縮するサーチボックス/jQuery

検索窓にフォーカスすることで伸縮させるプラグイン。サーチボックスを目立たせたくないときやコンパクトにしたいときに便利かなと。
コンテンツ
6.中心に水平線を入れる/CSS

CSS で表現した、見出しなんかで見かけるテキストの左右に水平線を配置するflexible boxなどを使ったパターン。:before と :after 擬似要素で水平線を表現しています。
7.均等に並べる/段組み/CSS

display:table-cell
を使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。display: table-cell
は、border-rightなどで区切り線を入れたときにコンテンツ量に合わせて同じ高さで表示してくれます。
8.コンテンツが現れた時にアニメーションさせる/jQuery
スクロールして、コンテンツが見えたときにアニメーションを開始させる方法。最初にクラスをつけたコンテンツを半透明にしておいて、スクロールしたときに処理を行います。
9.マウスホバーで画像を拡大しキャプションを出す/jQuery

画像にマウスを乗せると、画像を拡大した上に、テキストを出す方法はこちらからデモと一式ダウンロードできます。
10.マウスクリックで画像を拡大する/jQuery

こちらは画像をクリックしたり乗せたりすることで画像を拡大させるjQuery プラグイン。
11.画像を様々な形で切り抜く/CSS

画像を円で切り抜く方法は沢山ありますが、こちらは文字や星など様々な形でマスクする方法です。
12.ボタンエフェクト/CSS

cssで表現するボタンのホバーエフェクトまとめ。transition
を使い滑らかな動きにしています。
- Creative Button Styles | Codrops
- Buttons - A button library built with Sass and Compass
- CSSのみで実装するボタンデザインやホバーエフェクト 20+α | NxWorld
13.動きのあるチャート/jQuery

動きを出した見栄えの良いグラフを作るならChart.jsがおすすめ。canvasを利用して表示させています。もう一つは横グラフを簡単に表現することができるjqPlot。
14.クリック領域を作る/svg

地域名を作り領域をクリックさせる地図を作成するお仕事が会社でもあったのでメモ。クリック領域を簡単に作ることができます。
15.Googleマップを表示

Google Maps API v3を使い、サイトに地図を表示する基本的な方法。アクセスページなどに。
スポンサード リンク
関連記事
- WordPressプラグインの自動更新通知メールを停止させる
- WordPress:pre_get_postsを用いてカテゴリページや検索結果の表示を調整する
- WordPress:タイトルを自在にカスタマイズする方法
- プラグインを使わずにWordPressで関連記事を出す方法
- WordPressプラグイン「MW WP Form」の使い方と住所自動入力(郵便番号で動かない場合)
- WordPressでカスタムポストを追加するシンプルな方法
- WordPress管理画面のユーザーページに項目を追加する
- よく使うWordPressのif文(条件分岐)まとめ
- WordPressでパンくずリストを出す方法
- WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ
[…] 7. Webサイト制作:これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ […]