ワードプレスの任意の要素ににp5.jsを実装する

2022.1.10 更新

皆さまごきげんよう。

本日は前回の記事、「ウェブサイトの任意の要素ににp5.jsを出力する」の実践編として、ワードプレスの任意の要素にp5.jsを表示させてみようと思います!(最初から読んでみたい方はこちら↓も合わせてご覧くださいませ)

目次

  1. p5のsketch.jsファイルを用意する
  2. sketch.jsファイルをphpファイルに読み込ませる
  3. ワードプレスに外部ファイルを読み込ませる
  4. まとめ
“ワードプレスの任意の要素ににp5.jsを実装する” の続きを読む

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

2022.2.12 更新

皆さまごきげんよう。

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

jQueryで画像を書き換える

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

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

目次

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

時間経過で自動的に背景画像が変わる!jQueryを使った背景画像の切り替え方

2022.1.10 更新

皆さまごきげんよう。

今回はjQueryを使って背景画像を時間で切り替える、ということをやってみます。

目次

“時間経過で自動的に背景画像が変わる!jQueryを使った背景画像の切り替え方” の続きを読む

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

2022.2.12 更新

Photo on Foter.com

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

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

目次

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

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

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

ウェブサイトに雪を降らせる!jQueryの背景アニメーションの作り方

2022.1.10 更新

皆さまごきげんよう。

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

目次

  1. cssをワードプレス用に書き換える
  2. ワードプレス用にjsファイルを作る
  3. ワードプレスに外部ファイルを読み込ませる
“ウェブサイトに雪を降らせる!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を使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む

skrollrでパララックスのランディングページを作ってみよう〜追記あり〜

2022.1.16 更新

皆さまこんにちは。

本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみます。

まずはこちらにDEMOを作ってみましたのでご覧ください。
(※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )

skrollrってなに?

パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。

“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む

ワードプレスに外部ファイルを読み込ませる方法

2022.1.10 更新

本日はワードプレスに外部ファイルを読み込ませる方法についての備忘録です。

ワードプレスで外部ファイルを読み込ませるためには、ワードプレス用のphp関数である、wp_enqueue_script を使います。

今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルを、このブログの本文に対して指定してみようという試みです。

目次

  1. jsファイルをダウンロード後、外部ファイルをテーマフォルダにセットする
  2. 自分用の設定を書くためのjsファイルを作る
  3. 竹取の縦書きの設定をする
  4. wp_enqueue_scriptで外部ファイルを読み込ませる
  5. @import urlで外部cssを読み込ませる
“ワードプレスに外部ファイルを読み込ませる方法” の続きを読む

©2012 freyjasrm.com