jQueryで背景画像を時間で切り替える

2022.2.12 更新

皆さまごきげんよう。

本日は前回の続きになりますので、ぜひご覧ください。

jQueryで画像を書き換える

jQueryでワードプレスの背景画像を時間で切り替えを実装してみます。

今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。

目次

  1. ワードプレスのテーマフォルダの中にjsファイルを作る
  2. header.phpに外部ファイルの読み込みコードを書く
  3. jsが動かない時の対処法
  4. srcとsrcsetとは
“jQueryで背景画像を時間で切り替える” の続きを読む

javascriptで作ったカウントダウンタイマーをワードプレスに実装する

2022.2.12 更新

Photo on Foter.com

皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちらからどうぞ↓

javascriptでカウントダウンタイマーを作る

目次

jsファイルをワードプレスに実装する

前回作ったscriptの部分を、新たにjsファイル(◯◯.js)にしてFTPサーバの任意の場所に保存します。

“javascriptで作ったカウントダウンタイマーをワードプレスに実装する” の続きを読む

javascriptでカウントダウンタイマーを作る

2022.2.12 更新

Photo on Foter.com

皆さまごきげんよう。
いきなりですが、メニューバーの右上の辺りをごらんください。
いつの間にか「2020東京五輪まであと◯日」というものが出現しております!(2022現在は万博カウントダウンに変更しております)
本日はjavascriptでカウントダウンタイマーを作ってみます。

目次

  • javascriptで時間を取得する
  • setIntervalとsetTimeoutの違い
  • jQueryでhtmlファイルに出力する
“javascriptでカウントダウンタイマーを作る” の続きを読む

jQueryでティッカーを作ってみよう

2022.1.23 更新

皆さまごきげんよう。

よく、駅などで右から左へ情報が流れてくる電光掲示板がありますよね。

ひと昔前のwebではよく見かけたアレを、今取り入れたら逆に新しいんじゃないの?ということで、 本日はjQueryで電光掲示板(ティッカー)を作ってみようと思います。

流す文章が一つのみなら css3 のアニメーションでも良いのですが、文章がいくつかあり、その文章が増えたり減ったりする場合、jQueryでプログラムを書いておくと便利なのです。

それでは早速やってみましょう。

目次

  1. css3でアニメーションの設定をする
  2. jQueryで関数を作る
  3. setTimeout関数でタイマーをセットする
“jQueryでティッカーを作ってみよう” の続きを読む

jQueryで座標を取得してみよう

2022.1.23 更新

皆さまごきげんよう。

本日はjQueryで座標を取得してみます。

今回作るものは、マウスカーソル (タッチデバイスでは指) を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。

zahyo-wp01

目次


1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.コード

“jQueryで座標を取得してみよう” の続きを読む

ワードプレスの背景に雪を降らせてみよう

2022.1.10 更新

皆さまごきげんよう。

本日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。

目次

  1. cssをワードプレス用に書き換える
  2. ワードプレス用にjsファイルを作る
  3. ワードプレスに外部ファイルを読み込ませる
“ワードプレスの背景に雪を降らせてみよう” の続きを読む

jQueryで雪を降らせてみよう

2022.1.29 更新

皆さまごきげんよう。

本日はjQueryで雪を降らせてみようの巻です。

今回はdivを雪の一粒に仕立て、jQueryでランダムな数値を取得・複製し、それをcssのアニメーションでループさせて雪を降らせてみようと思います。

今回作ってみるものはこちらです。

目次

  1. htmlファイルを作る
  2. windowsサイズを取得する
  3. ランダムな数値を取得して、forで繰り返し処理を行う
  4. cssでアニメーション設定をする
“jQueryで雪を降らせてみよう” の続きを読む

jQuery でタブを実装してみよう

2022.1.30 更新

皆さまごきげんよう。

本日はjQueryとcssを連携させて、タブでページを切り替えて表示させてみます。

今回作ってみるものはこちら↓

jq-tab

目次

  1. jQueryの本体を読み込む
  2. jQueryでcssのクラスを追加してみよう
  3. style要素にjQueryの読み込み前と読み込み後のcssを書く
  4. ダブルクリックでページが切り替わって表示されるためのjQueryを書く
“jQuery でタブを実装してみよう” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜

2022.1.23 更新

皆さまこんにちは。
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみます。

〜その壱〜を読んでいただくと理解が深まりますので、ぜひ目を通してみてくださいませ

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その 壱

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました。

そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。

“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜

2022.1.23 更新

皆様こんにちは。

本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみようと思います。

前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでいただくとより理解が深まりますので、ぜひ目を通してみてくださいませ。

さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。

ちなみにmasonryとは石工[れんが工]職、石[れんが]造りの建造物、石造建築っていう意味なんですね。

“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む

©2022 freyjasrm.com