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

2022.1.10 更新

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

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

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

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

それがposition: sticky;です!

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

photoshopで写真を背景イラスト風に加工してみよう

2022.1.23 更新

皆さまごきげんよう。

背景画を一から描くのってかなり大変ですよね。
そこで本日はphotoshopを使って写真をサクッとイラスト風に加工してみたいと思います。

目次

  1. 元画像の色相・彩度を調整する
  2. 線画を抽出する
  3. 細部をぼかす
  4. 色調補正のレイヤーを作る
  5. 仕上げ
“photoshopで写真を背景イラスト風に加工してみよう” の続きを読む

photoshop画像加工のバリエーション

2022.2.6 更新

皆さまごきげんよう。

本日はスマホで普通に撮った写真をフォトショップ(cs6使用)を使って色々と加工してみます。

どれも2、3ステップで出来るとっても簡単なものばかり!ではさっそくやってみましょう(^^)

目次

  1. ミニチュアジオラマ風に加工する
  2. 一眼レフ風に加工する
  3. トイカメラ風に加工する
  4. ズーミングしたように加工する
“photoshop画像加工のバリエーション” の続きを読む

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で座標を取得してみよう” の続きを読む

ウェブサイトに雪を降らせる!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で雪を降らせてみよう” の続きを読む

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

2022.1.30 更新

皆さまごきげんよう。

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

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

jq-tab

目次

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

ロリポップで複数ドメインにワードプレスをインストールしてみよう

2022.1.23 更新

皆さまこんにちは。
本日は、ロリポップで複数のドメインにワードプレスをインストールしてみます。

ロリポップの説明がややこしかったので、備忘録として書き留めておきたいと思います。

複数ドメインにワードプレスをインストールする前に、念のため今あるサイトのバックアップを取っておきましょう。

●ワードプレスのバックアップを取る方法

目次

“ロリポップで複数ドメインにワードプレスをインストールしてみよう” の続きを読む

©2012 freyjasrm.com