[B! WordPress][jQuery] hayasi-nのブックマーク

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

作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。エンジニア速報は Twitter の@commteで配信しています。もくじサイト読み込み時１．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ

hayasi-n 2014/05/19

リンク

jQuery.autopagerで次ページを読み込む間にローディングアイコンを表示させよう - Design Color

2.ローディングアイコン読み込んでいる間に表示させるローディングアイコンを用意しましょう！私はこちらのサイトでローディングアイコンを作成しました！細かい設定ができるジェネレーターです！ 3.「次のページへのリンク」を取得する関数「オートページャー」とは、分割されている「次のページ」を今みているページ内に継ぎ足して読み込んでくれるものです。なので、「読み込むべき『次のページ』とは何ページ目なのか」を指示してあげなければならないですよね。 ※オートページャーの場合は「前のページにもどる」ことは考慮していないので、「次のページへのリンク」だけでOKです。例えば一番簡単な方法だと「現在のページ + 1」で次のページの値が取得できます。以下はものすごくシンプルにした「次のページへのリンク」を取得する関数の例です。 <?php function nextpage(){ //現在のページを取得

hayasi-n 2013/10/28

リンク

サイトをスマホ対応した時に意識したこと5つ - Design Color

もくじサイト幅はリキッドレイアウト&リンク領域は大きめに動画やGoogleマップも画面サイズに応じて伸縮するようになるべく画面遷移をしないように PC版のデザインでも見れるように最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめにサイト幅は基本的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか！しかも、スマホを横向きにするとまた解像度が変わってきます。なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。（とはいえ、タグやはてブのリンクまでは大きくできなかったのですが）一部を除いては基本的にはリンク要素は「44px以上」

hayasi-n 2013/08/06

リンク

すごい便利！WordPressでブログをリニューアルするときに役立つ３０

作成：2013/06/17 更新：2014/11/01 WordPress > 先日コムテブログをひっそりとリニューアルしたわけですがカスタマイズしたい部分を調べるだけで膨大な時間がかかってしまいました。今回はWordPressでブログをリニューアルしたり新たに立ち上げたりするときに参考にすると助かるサイトをまとめさせていただきました。既存のサイトをレスポンシブ化したり、スムーススクロール、タブ、ロールオーバーを簡単に実装したり、高速化にセキュリティ対策。やらなきゃいけないことをしっかりメモ。リニューアルのおかげでアクセスも1.3倍ほど上がったので、集客効果もあり。是非お試しを！エンジニア速報は Twitter の@commteで配信しています。もくじレスポンシブに対応させる１．レスポンシブ対応なCSSの書き方２．Adsenseタグを改変してレスポンシブ対応させる３

hayasi-n 2013/06/25

リンク

レスポンシブでクールなドロップダウンメニュー実装例:phpspot開発日誌

Drop-Down Navigation: Responsive and Touch-Friendly Osvaldas Valutis レスポンシブでクールなドロップダウンメニュー実装例次のようなレスポンシブなドロップダウンメニューのデモです。デモページはこちら。シンプルですがかなり良い感じに動いているみたいです。そのまま使うのもいいですし、１から実装する際の参考にしてみてもよいかもしれませんね。関連エントリレスポンシブな画像ギャラリーが作成できるjQueryプラグイン HTMLメール用のレスポンシブテンプレート「Antwort」レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」レスポンシブなパララックス効果付きサイトを作るフレームワーク「Coo

hayasi-n 2013/04/25