ウェブサイトの任意の要素ににp5.jsの描画を出力する方法

2022.1.10 更新

皆さまごきげんよう。

本日は前回の続き、p5.jsで作ったスケッチを任意の要素に出力してみようと思います。

前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法

目次

  1. p5でsketch.jsファイルを作る
  2. htmlファイルを作る
  3. 任意の要素ににp5.jsを出力する
“ウェブサイトの任意の要素ににp5.jsの描画を出力する方法” の続きを読む

コンテンツをプロテクトしてくれるcss

2022.1.10 更新

皆さまごきげんよう。
以前、画像の右クリック、ドラッグ&ドロップ禁止のプラグインのご紹介をしたのですが、

画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark

うちのテーマと互換性が無くなってしまったのか、原因不明なのですが、このプラグインが全く効いていないことに最近気付きました((((( ;゚Д゚)))

そこで今回は、一行でコンテンツをプロテクトしてくれるcssをご紹介します。

“コンテンツをプロテクトしてくれるcss” の続きを読む

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でカウントダウンタイマーを作る” の続きを読む

cssアニメーションで文字を点滅させてみよう

2022.1.16 更新

皆さまごきげんよう。
サイトのどこかに小さな動きがあると一瞬目を惹きますよね。
本日はcssで文字を点滅させてみようと思います。

1.CSS animationを使って文字を点滅させる

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。

“cssアニメーションで文字を点滅させてみよう” の続きを読む

position: sticky; がスクロールで要素を固定するのに便利すぎた件

2022.1.10 更新

皆さまごきげんよう。
本日は、CSSのposition: sticky; がとても便利だったのでご紹介します(^^)

ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、何故かエラー表示が出る様になってしまいました。

●最近入れてみたプラグイン

そこで、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです。

それがposition: sticky;です!

“position: sticky; がスクロールで要素を固定するのに便利すぎた件” の続きを読む

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

2022.1.23 更新

皆さまごきげんよう。

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

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

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

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

目次

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

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

2022.1.10 更新

皆さまごきげんよう。

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

目次

  1. cssをワードプレス用に書き換える
  2. ワードプレス用にjsファイルを作る
  3. ワードプレスに外部ファイルを読み込ませる
“ウェブサイトに雪を降らせる!jQueryの背景アニメーションの作り方” の続きを読む

jQueryで雪を降らせてみよう

2022.1.29 更新

皆さまごきげんよう。

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

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

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

目次

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

©2012 freyjasrm.com