- 【WordPress】ループ処理の最初と最後で違う出力をする方法 ワードプレスのテーマファイル「index.php」や「archive.php」などで、投稿をループして表示させる際に、最初の投稿または最後の投稿で違う処理をする方法を紹介します。 ループの最初だけ違う処理 ワードプレスのデフォルトの機能「$… 【WordPress】ループ処理の最初と最後で違う出力をする方法続きを読む →
- 【CSS】重なり順(z-index)の値が下の要素をクリックする方法 ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックしたいボタンなどの要素が背面になってしまうケースがあります。 このままだとボタンがクリックできずに困るので、なんとかして前面の… 【CSS】重なり順(z-index)の値が下の要素をクリックする方法続きを読む →
- 【jQuery】ページのスクロールに応じて要素を表示する[Scrolla]の使い方 Webページのスクロールに合わせて要素を表示させるjQueryプラグイン[Scrolla]を紹介します。 同様の機能を持つプラグインでは[ScrollReveal]や[jquery.inview]または[WOW.js]などが有名ですが、これ… 【jQuery】ページのスクロールに応じて要素を表示する[Scrolla]の使い方続きを読む →
- 複数のjQueryライブラリ併用時のコンフリクト(衝突)を回避する jQueryプラグインをいくつか同時に使っていると、稀に正しいコードを記述しているはずなのに動かないという事態に陥ります。 これはjQuery同士がコンフリクト(衝突)しているのが原因です。 コンフリクト(競合)とは バージョンの違うプラグ… 複数のjQueryライブラリ併用時のコンフリクト(衝突)を回避する続きを読む →
- 【jQuery】テキストで背景を切り抜く[TextHoler.js]の使い方 今回ご紹介する[TextHoler.js]を使うと、テキストで背景画像をマスキングして切り抜き表示してくれます。 まずはサンプルをご覧ください。 DEMO : https://on-ze.com/demo/jquery-textholer…. 【jQuery】テキストで背景を切り抜く[TextHoler.js]の使い方続きを読む →
- 【ICON】使いやすいSVGアイコンセット[Zondicons]が便利そう。 ジャンルを問わず様々なWebデザインに使えるSVGアイコンセット[Zondicons]が便利そうです。 公式サイトでは、ポートフォリオ、マップ、アプリ、テキストエディタなどでの使用例が紹介されています。 クセがないので汎用的に使えそうですね… 【ICON】使いやすいSVGアイコンセット[Zondicons]が便利そう。続きを読む →
- 【iPhone】標準ブラウザのSafariでネット接続できない時でもウェブサイトを閲覧する方法 今日はiPhoneがオフラインや圏外の状態でネット接続できない場合でもWebページを閲覧できる便利なテクニックを紹介します。 利用するのはSafariのリーディングリストの機能。 コレ、かなり便利なんですが、ご存知ですか? リーディングリス… 【iPhone】標準ブラウザのSafariでネット接続できない時でもウェブサイトを閲覧する方法続きを読む →
- 【ADS】挑戦と勝利。最強と戦場。 Twitter界隈で話題になっていた面白い広告を見つけたので紹介します。 本日、1月24日〜1月29日に開催される『GI全日本王者決定戦』のポスター広告。 こちらは「挑戦」という文字が中央に大きく描かれていますが、上下を逆にして見てみると…… 【ADS】挑戦と勝利。最強と戦場。続きを読む →
- エックスサーバーでWordPressを「http」から「https」にSSL化する手順 既にご存知の方も多いかと思いますが、エックスサーバーでは独自SSLを無料かつ無制限で利用できるようになっています。 嬉しいサービスですよね。 XSERVER : https://www.xserver.ne.jp 今日はそのエックスサーバー… エックスサーバーでWordPressを「http」から「https」にSSL化する手順続きを読む →
- 映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見… 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →
- Mac に Windows の標準フォント「メイリオ」をインストールしてみた。 今回は Windows にインストールされている標準フォント「メイリオ」を Mac で使う方法を説明していきます。 メイリオは Windows では最初から使えるフォントで、Webサイトはもちろん、WordファイルやPowerPointファ… Mac に Windows の標準フォント「メイリオ」をインストールしてみた。続きを読む →
- 【jQuery】シンプルなパララックス効果を実装できる[parlx.js]の使い方 今日ご紹介する[parlx.js]はパララックス効果を手軽に導入できるjQueryプラグインです。 サンプルは以下に用意してあります。 DEMO : https://on-ze.com/demo/jquery-parlx.js/ データファ… 【jQuery】シンプルなパララックス効果を実装できる[parlx.js]の使い方続きを読む →
- 【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ[Emergence.js]を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプ… 【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。続きを読む →
- 【JavaScript】親要素の大きさにテキストをフィットさせる[Fitty]の使い方 今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ[Fitty]の使い方を紹介します。 レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。 百聞は一見に如かず。 ま… 【JavaScript】親要素の大きさにテキストをフィットさせる[Fitty]の使い方続きを読む →
- 【jQuery】リアルな波紋模様を再現する[jQuery Ripples]を使ってみる。 マウスの動きに合わせて波紋を描くjQueryプラグイン[jQuery Ripples]の使い方を紹介します。 まずは実際にウェブページに組み込んだサンプルを用意しましたのでご覧ください。 ONZE DEMO : https://on-ze…. 【jQuery】リアルな波紋模様を再現する[jQuery Ripples]を使ってみる。続きを読む →
- 【jQuery】モーダルウィンドウ実装する超秀逸[Modaal]プラグインの使い方 このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです! まずは実際の挙動を確認してみましょう。 DEMO : http://humaan.com/modaal/ 「VIEW EXAMPLE」をクリックすると、… 【jQuery】モーダルウィンドウ実装する超秀逸[Modaal]プラグインの使い方続きを読む →