YARUMAE

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

<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

 <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

<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

<div class="tab-block">
  <ul class="tab-list">
    <li data-tabIndex="1">タブ１</li>
    <li data-tabIndex="2">タブ２</li>
    <li data-tabIndex="3">タブ３</li>
  </ul>
  <div class="tab-area current" data-tabIndex="1">
    タブ１の内容
  </div>
  <div class="tab-area" data-tabIndex="2">
    タブ２の内容
  </div>
  <div class="tab-area" data-tabIndex="3">
    タブ３の内容
  </div>
</div>