2022.2.12 更新
皆さまごきげんよう。
本日は前回の続きになりますので、ぜひご覧ください。
jQueryでワードプレスの背景画像を時間で切り替えを実装してみます。
今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。
jQueryで背景画像を時間で切り替える
時間経過で自動的に背景画像が変わる！jQueryを使った背景画像の切り替え方
2022.1.10 更新
皆さまごきげんよう。
今回はjQueryを使って背景画像を時間で切り替える、ということをやってみます。
目次
“時間経過で自動的に背景画像が変わる！jQueryを使った背景画像の切り替え方” の続きを読むjavascriptで作ったカウントダウンタイマーをワードプレスに実装する
2022.2.12 更新
Photo on Foter.com
皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちらからどうぞ↓
目次
jsファイルをワードプレスに実装する
前回作ったscriptの部分を、新たにjsファイル（◯◯.js）にしてFTPサーバの任意の場所に保存します。
javascriptでカウントダウンタイマーを作る
2022.2.12 更新
Photo on Foter.com
皆さまごきげんよう。
いきなりですが、メニューバーの右上の辺りをごらんください。
いつの間にか「2020東京五輪まであと◯日」というものが出現しております！（2022現在は万博カウントダウンに変更しております）
本日はjavascriptでカウントダウンタイマーを作ってみます。
目次
- javascriptで時間を取得する
- setIntervalとsetTimeoutの違い
- jQueryでhtmlファイルに出力する
ワードプレスをカスタマイズする方法
2022.2.6 更新
皆さま、ごきげんよう。
本日はワードプレスのカスタマイズの方法について、
このブログをカスタマイズした時の注意点や、調べ方についての備忘録です。
1.ベースとなるテーマを決める
“ワードプレスをカスタマイズする方法” の続きを読むjQueryでティッカーを作ってみよう
2022.1.23 更新
皆さまごきげんよう。
よく、駅などで右から左へ情報が流れてくる電光掲示板がありますよね。
ひと昔前のwebではよく見かけたアレを、今取り入れたら逆に新しいんじゃないの？ということで、 本日はjQueryで電光掲示板（ティッカー）を作ってみようと思います。
流す文章が一つのみなら css3 のアニメーションでも良いのですが、文章がいくつかあり、その文章が増えたり減ったりする場合、jQueryでプログラムを書いておくと便利なのです。
それでは早速やってみましょう。
目次
“jQueryでティッカーを作ってみよう” の続きを読むjQueryで座標を取得してみよう
2022.1.23 更新
皆さまごきげんよう。
本日はjQueryで座標を取得してみます。
今回作るものは、マウスカーソル (タッチデバイスでは指) を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。
目次
1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.コード
ウェブサイトに雪を降らせる！jQueryの背景アニメーションの作り方
2022.1.10 更新
皆さまごきげんよう。
本日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。
目次
“ウェブサイトに雪を降らせる！jQueryの背景アニメーションの作り方” の続きを読むjQueryで雪を降らせてみよう
2022.1.29 更新
皆さまごきげんよう。
本日はjQueryで雪を降らせてみようの巻です。
今回はdivを雪の一粒に仕立て、jQueryでランダムな数値を取得・複製し、それをcssのアニメーションでループさせて雪を降らせてみようと思います。
今回作ってみるものはこちらです。
目次
“jQueryで雪を降らせてみよう” の続きを読むjQuery でタブを実装してみよう
2022.1.30 更新
皆さまごきげんよう。
本日はjQueryとcssを連携させて、タブでページを切り替えて表示させてみます。
今回作ってみるものはこちら↓
目次
- jQueryの本体を読み込む
- jQueryでcssのクラスを追加してみよう
- style要素にjQueryの読み込み前と読み込み後のcssを書く
- ダブルクリックでページが切り替わって表示されるためのjQueryを書く
Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜
2022.1.23 更新
皆さまこんにちは。
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみます。
〜その壱〜を読んでいただくと理解が深まりますので、ぜひ目を通してみてくださいませ
Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その 壱 〜
さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました。
そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。
Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜
2022.1.23 更新
皆様こんにちは。
本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみようと思います。
前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでいただくとより理解が深まりますので、ぜひ目を通してみてくださいませ。
さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。
ちなみにmasonryとは石工［れんが工］職、石［れんが］造りの建造物、石造建築っていう意味なんですね。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む