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

2022.1.10 更新

皆さまごきげんよう。

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

目次

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

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

2022.1.10 更新

皆さまごきげんよう。

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

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

目次

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

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

2022.1.16 更新

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

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

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

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

ワードプレスをカスタマイズする方法

皆さま、ごきげんよう。
ワードプレスのカスタマイズといえば色々な方法があると思いますが、本日は私のカスタマイズの仕方について語ってみたいと思います。
twenty seventeenをベースにしたこのブログをカスタマイズした時の注意点や、調べ方についての備忘録です。

ベースとなるテーマを決める

“ワードプレスをカスタマイズする方法” の続きを読む

イラストレーターでシームレスなパターンを作ろう

皆さまごきげんよう。
厳しい残暑が続いておりますがですがいかがお過ごしでしょうか?まだまだ日中は暑いとはいえ日の入りが早くなってきて、季節は着々と秋に向かっているのだなぁ..と嬉しいような寂しいような今日この頃です。

さて、本日はイラストレーターでシームレスなパターンを作ってみようと思います♪
“イラストレーターでシームレスなパターンを作ろう” の続きを読む

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

2022.1.16 更新

皆さまこんにちは。

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

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

skrollrってなに?

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

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

アイコンの重要性とデザイン

2022.1.10 更新

「 デザインセンスを身につける」読書レビュー

「デザインセンスを身につける/ウジトモコ著」という本を読みました。

デザインについては、黄金比や三分割法等、デザイン入門書にあるような基本的なものが書かれています。

本書の中で私が一番考えさせられたのがアイコンの重要性についてです。

一億総表現社会の到来といわれるネット時代、SNSのアイコン(プロフィール写真)ひとつで
自分が何者であるかを視覚化出来る。

だからこそ、デザインセンスを身に付けなりたい自分をデザインして、この小さなアイコンの中に表現しましょう、と。

例えばこのアイコン、面倒だからとデフォルトのままでは、どんなに面白い情報を発信していてもスパムにみえて読んでもらえない。

猫や風景のアイコンではあなたがどんな人であるかわからない、結果スルーされやすい。

なるほど。

確かに、自分でも無意識にアイコンの好き嫌いでスルーしたり、逆にどんな人だろうと興味をそそられてポチったり、してました。

たかがアイコンと言えど、SNSの中では名刺の様なものですものね。

今使っているアイコン、今一度見直して真面目にデザインしてみようかな。