-
EC-CUBE | 2017.09.23
【EC-CUBE3】検索フォームで商品コードやフリーエリアの内容を検索できるようにする方法
【EC-CUBE3】検索フォームで商品コードやフリーエリアの内容を検索できるようにする方法 ECCUBE3のデフォルトで用意されている検索フォームには、 カテゴリ検索とフリーワード検索が行える機能が用意されています。 フ
-
WordPress | 2017.09.04
WordPress Popular Postsの人気記事の結果を取得して任意のHTMLの形で出力する方法
トータルの人気記事を表示する場合は、特にプラグインを使用しなくても割と簡単に作れたりするのですが、一定期間内での人気記事を表示する場合はプラグインを使用すると簡単です。 有名なプラグインで言うと「WordPress Po
-
WordPress | 2017.08.27
【WordPress】おすすめ記事をランダムで表示する方法
今回は投稿した記事の中でおすすめ記事を指定して、その中からランダムで表示する方法をご紹介したいと思います。 設定方法 管理画面の設定 まずは、おすすめ記事を指定するためのカスタムフィールドを用意しましょう。 今回は「Ad
-
フロントエンド | 2017.08.12
スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法
今回は、スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法をご紹介したいと思います。 設定方法 HTML
123456<ul class="list"><li><img src="img/img01.jpg"></li><li><img src="img/img02.jpg"></li><li><img src="img/img03.jpg"></li><li><img src="img/img04.jpg"></li></ul>jQuery(JavaSc
-
JavaScript | 2017.08.12
ページネーションにサムネイルを設定したスライダーをslickで作成する方法
今回はページネーションにサムネイルを設定したスライダーをslickで作成する方法をご紹介したいと思います。 設定方法 HTML
12345678910111213141516171819202122232425<ul class="slider slider-for"><li><img src="img/img01.jpg" /></li><li><img src="img/img02.jpg" /></li><li><img src="img/img03.jpg" /></li><li><img src="img/img04.jpg" /></li><li><img src="img/img05.jpg" /></li><li><img src="img/img06.jpg" /></li><li><img src="img/img07.jpg" /></li><li><img src="img/img08.jpg" /></li><li><img src="img/img09.jpg" /></li><li><img src="img/img10.jpg" /></li></ul><ul class="slider slider-nav"><li><img src="img/img01.jpg" /></li><li><img src="img/img02.jpg" /></li><li><img src="img/img03.jpg" /></li><li><img src="img/img04.jpg" /></li><li><img src="img/img05.jpg" /></li><li><img src="img/img06.jpg" /></li><li><img src="img/img07.jpg" /></li><li><img src="img/img08.jpg" /></li><li><img src="img/img09.jpg" /></li><li><img src="img/img10.jpg" /></li></ul></div>css [crayon-6
-
WordPress | 2017.07.31
Smart Custom Fieldsでカテゴリに登録した画像を表示する方法
カテゴリ毎に画像を設定して、その画像を出力する処理を実装する機会があり、その時に使用した「Smart Custom Fields」でカテゴリ毎の画像を出力する方法をまとめておきたいと思います。 カテゴリリストを表示 前提
-
フロントエンド | 2017.07.29
選択した行のHTMLをモーダルで削除確認して削除する方法
選択した行のHTMLを削除確認して削除する方法を今回はご説明したいと思います。 実装方法 HTML
123456<ul class="list"><li><span class="delete">削除1</span></li><li><span class="delete">削除2</span></li><li><span class="delete">削除3</span></li><li><span class="delete">削除4</span></li></ul>JavaScript(jQuery) [crayon-
-
フロントエンド | 2017.07.29
jQueryを使ってシンプルにタブ切替を実装する方法
今回はシンプルにタブ切替を実装する方法をご説明したいと思います。 実装方法 HTML
12345678910111213141516<div class="tab-block"><ul class="tab-list"><li data-tabIndex="1">タブ1</li><li data-tabIndex="2">タブ2</li><li data-tabIndex="3">タブ3</li></ul><div class="tab-area current" data-tabIndex="1">タブ1の内容</div><div class="tab-area" data-tabIndex="2">タブ2の内容</div><div class="tab-area" data-tabIndex="3">タブ3の内容</div></div>JavaScript(jQuery) [crayon-65739b3
-
フロントエンド | 2017.07.17
プラグインを使わずにスマホに対応したパララックスを実現する方法
PCでパララックスを実装する場合は、background-attachmentを使用することで簡単に実現することができます。 ですが、スマホではbackground-attachmentが効かないので、簡単に実現すること
-
フロントエンド | 2017.07.15
レスポンシブにも対応した簡単にコーディングする3パターンのメニュー
今回は同じような仕組みで、ダイアログ形式、ドロワー形式、アコーディオン形式のメニューを作成する方法をご紹介したいと思います。 共通のHTML部分 HTMLは同じ形式です。 メニューの調整は、cssとjqueryで調整しま