5G時代にwebで何をする？迷走中の私の備忘録的徒然日記。東京都在住。
皆さまごきげんよう!
今日はCSSのposition: sticky; がとても便利だったので備忘録としてご紹介します(^^)
ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、ページにエラー表示が出る様になってしまいまして(´ω｀。)
プラグインは便利ですが、何かの更新の度に必ずしも互換性が保たれる保証はありませんし、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです！
それがposition: sticky;です！
“position: sticky; がスクロールで要素を固定するのに便利すぎた件” の続きを読む
皆さまごきげんよう♪
最近家電屋さんにて、かねてから気になっていたwacomの液タブを実際に触ってみまして…あまりの好感触に、思い切って買ってしまおうか？！と頭を悩ませている今日この頃でございます(^^;
さて、背景画を一から描くのってかなり大変ですよね。。
そこで今日はphotoshopを使って写真をサクッとイラスト風に加工してみたいと思います！
皆さまごきげんよう(^^)ゞ
今年は秋に入ってからも毎週のように来る台風、晴れない、暑い、など過ごしにくい日が多かったですが、ようやく気温も下がり一気に秋らしくなってまいりました。皆さまいかがお過ごしでしょうか？
さて、本日は”動く静止画”こと、シネマグラフをフォトショップでサクッと作ってみたいと思います♪
簡単に言うと、動画の上に一部を透明にした静止画を被せて、透明の部分から下の動画の一部が見えるようになっているGIFアニメ画像です。時が止まった中、一部だけが動き続けているという不思議な感じが出せるんです。それでは早速作ってみましょう。
“フォトショップでシネマグラフを作ってみよう、の巻” の続きを読む
皆さまごきげんよう。
厳しい残暑が続いておりますがですがいかがお過ごしでしょうか？まだまだ日中は暑いとはいえ日の入りが早くなってきて、季節は着々と秋に向かっているのだなぁ..と嬉しいような寂しいような今日この頃です。
さて、本日はイラストレーターでシームレスなパターンを作ってみようと思います♪
“イラストレーターでシームレスなパターンを作ろう” の続きを読む
皆さまごきげんよう！梅雨も明けいよいよ夏本番、いかがお過ごしでしょうか？
皆さまも、部屋でお仕事や勉強をしている時にBGMをかけたりすると思うのですが、集中力を高めるのにホワイトノイズがいいらしい、ということで私、久々に使ってみて良かったのがこちら、noisliです。説明するまでもないですが、アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるところがいいんです。聞いているだけで心落ち着きますし、ほんとお勧めです。ぜひお試しあれ♪
さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。
“スマホでもパララックスを実装してみよう、の巻” の続きを読む
皆さまごきげんよう。
本日はスマホで普通に撮った写真をフォトショップ(cs6を使用)を使って色々と加工してみようと思います。どれも2、3ステップで出来るとっても簡単なものばかり！ではさっそくやってみましょう(^^)/
皆さまごきげんよう。
よく、駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。最近のwebではめっきり見かけなくなりましたが、そんな今コレを取り入れたら逆に新しいんじゃないの？！ということで、(笑) 本日はjQueryで電光掲示板のようなもの（ティッカー）を作ってみようと思います。
なにもわざわざjQuery使わなくてもcss3のアニメーションでいいんでない？とも言えますが、流す文章が一つのみならそれで良いのですが、リストになった文章がいくつかあり、それが増えたり減ったりする場合、jQueryでプログラムを書いておくと便利です。
それでは早速やってみましょう。
“jQueryでティッカーを作ってみよう” の続きを読む
どうも！前回からちょっと間が空いてしまいましたが、すっかり花粉の季節ですね(>< ); 皆さまいかがお過ごしでしょうか？私はマスクとメガネの日々を過ごしております。マスクとメガネ、二つも耳に掛かっていると本当にストレスなんですよね(´･ω･`)…
さて、今回はjQueryで座標を取得してみようの巻です。
マウスカーソル(タッチデバイスでは指)を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。
このような物を作ってみます。↓
目次
1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.ソース
“jQueryで座標を取得してみる” の続きを読む
皆さまごきげんよう！
暮れも押し迫ってまいりましたが、いかがお過ごしでしょうか？
大晦日までには不要なものを全部捨ててやろう！と張り切っている私ですが、まだ何も手を付けていません（^^;
ところで、最近ネットで魔夜峰央先生の 全埼玉県民が泣いた！伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた（笑）『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう！」なんて本当に出来るのでしょうか？！(^^;A
ま、それはさておき（笑）今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。
“ワードプレスの背景に雪を降らせてみよう” の続きを読む
皆さまこんにちは！
早いもので今年も残すところあと1ヶ月、光陰矢の如し、ですね。皆さま今年の目標は達成出来ましたでしょうか？
私は残念ながら、未だ何ひとつ達成出来ないままムダに年だけ取るという(笑)ってまだまだあと残り1ヶ月、最後まで頑張りますよ！(^^;A
ま、それはさておき(笑)今日はちょっと季節を感じる、jQueryで雪を降らせてみようの巻です。
今回はdivを雪の一粒に仕立て、jQueryでランダムな数値を取得・複製し、それをcssのアニメーションでループさせて雪を降らせてみようと思います。
今回作ってみるものはこちら♪
“jQueryで雪を降らせてみよう” の続きを読む
皆さまこんにちは！
暑さ寒さも彼岸まで。ようやく過ごしやすい季節になってまいりましたね！スポーツの秋、読書の秋、色々な秋がありますが、私はやはり「食欲の秋」でしょうか（笑）
さて本日は勉学の秋、jQueryとcssを連携させて、タブでページを切り替えて表示させてみようと思います。
“jQuery でタブを実装してみよう！” の続きを読む
皆さまこんにちは！
本日はロリポップで複数のドメインにワードプレスをインストールしてみます。
ロリポの説明を読んでも意外とややこしかったので、備忘録として書き留めておきたいと思います（笑）
複数ドメインにワードプレスをインストールする前に、念のため今あるサイトのバックアップを取っておきましょう。
“ロリポップで複数ドメインにワードプレスをインストールしてみよう” の続きを読む