東京在住のWebプログラマが日々成長するためのブログ

YARUMAE

  • About
  • Contact
  • About
  • Contact
  • 【EC-CUBE3】検索フォームで商品コードやフリーエリアの内容を検索できるようにする方法
    EC-CUBE | 2017.09.23

    【EC-CUBE3】検索フォームで商品コードやフリーエリアの内容を検索できるようにする方法

    【EC-CUBE3】検索フォームで商品コードやフリーエリアの内容を検索できるようにする方法 ECCUBE3のデフォルトで用意されている検索フォームには、 カテゴリ検索とフリーワード検索が行える機能が用意されています。 フ

  • WordPress Popular Postsの人気記事の結果を取得して任意のHTMLの形で出力する方法
    WordPress | 2017.09.04

    WordPress Popular Postsの人気記事の結果を取得して任意のHTMLの形で出力する方法

    トータルの人気記事を表示する場合は、特にプラグインを使用しなくても割と簡単に作れたりするのですが、一定期間内での人気記事を表示する場合はプラグインを使用すると簡単です。 有名なプラグインで言うと「WordPress Po

  • 【WordPress】おすすめ記事をランダムで表示する方法
    WordPress | 2017.08.27

    【WordPress】おすすめ記事をランダムで表示する方法

    今回は投稿した記事の中でおすすめ記事を指定して、その中からランダムで表示する方法をご紹介したいと思います。 設定方法 管理画面の設定 まずは、おすすめ記事を指定するためのカスタムフィールドを用意しましょう。 今回は「Ad

  • スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法
    フロントエンド | 2017.08.12

    スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法

    今回は、スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法をご紹介したいと思います。 設定方法 HTML

    1
    2
    3
    4
    5
    6
    <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

  • ページネーションにサムネイルを設定したスライダーをslickで作成する方法
    JavaScript | 2017.08.12

    ページネーションにサムネイルを設定したスライダーをslickで作成する方法

    今回はページネーションにサムネイルを設定したスライダーをslickで作成する方法をご紹介したいと思います。 設定方法 HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <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

  • Smart Custom Fieldsでカテゴリに登録した画像を表示する方法
    WordPress | 2017.07.31

    Smart Custom Fieldsでカテゴリに登録した画像を表示する方法

    カテゴリ毎に画像を設定して、その画像を出力する処理を実装する機会があり、その時に使用した「Smart Custom Fields」でカテゴリ毎の画像を出力する方法をまとめておきたいと思います。 カテゴリリストを表示 前提

  • 選択した行のHTMLをモーダルで削除確認して削除する方法
    フロントエンド | 2017.07.29

    選択した行のHTMLをモーダルで削除確認して削除する方法

    選択した行のHTMLを削除確認して削除する方法を今回はご説明したいと思います。 実装方法 HTML

    1
    2
    3
    4
    5
    6
    <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-

  • jQueryを使ってシンプルにタブ切替を実装する方法
    フロントエンド | 2017.07.29

    jQueryを使ってシンプルにタブ切替を実装する方法

    今回はシンプルにタブ切替を実装する方法をご説明したいと思います。 実装方法 HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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-60037d9

  • プラグインを使わずにスマホに対応したパララックスを実現する方法
    フロントエンド | 2017.07.17

    プラグインを使わずにスマホに対応したパララックスを実現する方法

    PCでパララックスを実装する場合は、background-attachmentを使用することで簡単に実現することができます。 ですが、スマホではbackground-attachmentが効かないので、簡単に実現すること

  • レスポンシブにも対応した簡単にコーディングする3パターンのメニュー
    フロントエンド | 2017.07.15

    レスポンシブにも対応した簡単にコーディングする3パターンのメニュー

    今回は同じような仕組みで、ダイアログ形式、ドロワー形式、アコーディオン形式のメニューを作成する方法をご紹介したいと思います。 共通のHTML部分 HTMLは同じ形式です。 メニューの調整は、cssとjqueryで調整しま

  • 1
  • 2
  • >

© 2016 - 2021 YARUMAE