カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法 | TechMemo
カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法をご紹介いたします。 WordPressでの絞り込み検索といえば、有料プラグインの「FE Advanced Search」が有名です。FE Advanced Searchを導入すれば、簡単に絞り込み検索が実装できるかと思いますが、お値段59,800円とそこそこの費用がかかってしまうんですよね。 実際に自分で実装してみたところそこまで難しくはなかったので、有料プラグインを購入せずに絞り込み検索を実装したいという方向けに、カスタムタクソノミーのチェックボックスによる絞り込み検索の実装方法を解説したいと思います。 カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法 絞り込み検索フォーム フォーム部分は、以下のように記述します。 <form method="get" id="search-form" acti
背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」
lazysizesは、画像を遅延読み込みすることができるLazyload系のJavaScriptライブラリです。通常の画像だけでなく背景画像も遅延読み込み可能です。また、jQuery非依存で単体で動作します。 挙動については、以下デモページよりご確認いただけます。 デモページを見る lazysizesの使い方 ステップ1. lazysizesのダウンロードと設置 GitHubからlazysizesをダウンロードして、lazysizes.min.jsをサーバー上に設置します。 ファイルを設置したら、HTMLの</body>の直前に以下を追加します。 <script src="lazysizes.min.js"></script> ファイルパスは適宜変更してください。 ステップ2. 画像のマークアップ 画像のHTMLは、src属性にプレースホルダー画像(ダミー画像)、data-src属性に本来
スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」 | TechMemo
ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量でわずか8.8KBしかありません。 動きについては、以下デモサイトでご確認いただけます。 デモページを見る 今回は、このScrollRevealを使ってパララックス効果を加える方法をご紹介したいと思います。 ScrollRevealの導入手順 ステップ1. ScrollRevealのダウンロードと設置 まずはGitHubからScrollRevealをダウンロードします。ダウンロードしたファイル一式を解凍し、scrollreveal.min.jsをサーバーにアップロードしてください。 サーバーにファイルを設置したら、scrollreveal.min.jsを読み込みます。 <s
jQueryを使ってスマホの時だけ左サイドバーをメインコンテンツの下に配置する方法 | TechMemo
例えば、以下のようなレイアウトのPCサイトがあったとき、これをレスポンシブ化してスマホ対応する場合、あなたならどうやって対応しますか？ 以下のようにコーディングされていれば、contentとsidebarの横幅を広げてワンカラムにすることですんなりスマホに最適化できますので、特に迷うことはないと思います。 <div class="content"> メインコンテンツ </div> <div class="sidebar"> サイドバー </div> 問題は以下のパターンです。左サイドバーなので、以下のようにコーディングされていることが多いと思います。 <div class="sidebar"> サイドバー </div> <div class="content"> メインコンテンツ </div> これをCSSで回り込みさせてレイアウトするのが王道かと思います。 .sidebar{ float
指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」 | TechMemo
ちなみにWordPressの場合は、以下のように記述します。 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.bgswitcher.js"></script> <script type="text/javascript"> jQuery(function($) { $(document).ready(function(){ $(".header-wrapper").bgswitcher({ images: [ "<?php echo get_template_directory_uri(); ?>/images/bg1.png", "<?php echo get_template_directory_uri(); ?>/images/bg2.png", "<?
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSセレクタの詳細度を確認できるWebサービス「Specificity Calculator」