5G時代にwebで何をする？迷走中の私の備忘録的徒然日記。東京都在住。
皆さまごきげんよう!
今日はCSSのposition: sticky; がとても便利だったので備忘録としてご紹介します(^^)
ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、ページにエラー表示が出る様になってしまいまして(´ω｀。)
プラグインは便利ですが、何かの更新の度に必ずしも互換性が保たれる保証はありませんし、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです！
それがposition: sticky;です！
“position: sticky; がスクロールで要素を固定するのに便利すぎた件” の続きを読む
明けましておめでとうございます。
今年はもっと更新頻度を上げていくことを目標に（と毎年言っている感(；＿△＿)=3 ﾄﾞﾃｯ) どうぞよろしくお願いいたします。
さて、本日は今年最初にインストールしたプラグインをご紹介したいと思います。
もしサイトにUPした絵や写真などを知らず知らずに盗用されていた、なんてことになっていたら気分悪いですよね。
最近は画像の上で右クリックしたり、ドラッグアンドドロップが出来ないサイトも増えてきたように思います。
せっかく苦労して作った画像や写真を盗用されないためにも、自分で出来る最低限の防衛対策はとっておきたいもの。それがプラグインをインストールするだけで簡単に出来ますのでぜひ取り入れてみて下さい♪
“画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark” の続きを読む
皆さまこんにちは♪
本日はロリポップサーバーで独自SSLの設定をしてみます！
今や個人のブログであっても、SSL化していないサイトでは接続するのが心配…と思われてしまいますよね。。
今まではサイトをSSL化するには追加料金を払わなければならなかったのが、今年の7月に無料の独自SSL「Let’s Encrypt」を、基本のご利用料金のみで全プランで常時SSL化が可能、とのこと！
ということで、遅ればせながら早速ロリポップでワードプレスのサイトを無料でSSL化してみます。
（ちなみに私のワードプレスはマルチサイトになっておりますので、その手順で書いております。）
“ロリポップでワードプレスをhttps化しよう” の続きを読む
皆さまごきげんよう♪
最近家電屋さんにて、かねてから気になっていたwacomの液タブを実際に触ってみまして…あまりの好感触に、思い切って買ってしまおうか？！と頭を悩ませている今日この頃でございます(^^;
さて、背景画を一から描くのってかなり大変ですよね。。
そこで今日はphotoshopを使って写真をサクッとイラスト風に加工してみたいと思います！
皆さま、新年明けましておめでとうございます！今年はもう少し更新頻度を上げていくことを目標に、ユルく頑張ります(笑)
どうぞよろしくお願いいたします m(__)m
さて、ワードプレスの今年のテーマ、twenty seventeenが出ましたね〜！
当サイトはこれまでtwenty fourteenの子テーマでずっとやってきたのですが、2017を試してみると…これがシンプルかつトレンドも押さえてあったりと、なかなか使い勝手が良さそうなので、暫くこちらのテーマに変えて色々カスタマイズしてみようと思っています。
ということで本日はテーマの変更に伴い、最近入れてみたプラグイン2種類をレビューいたします。
“最近入れてみたワードプレスプラグイン、Q2W3 Fixed Widget、Yet Another Related Posts Plugin” の続きを読む
皆さまごきげんよう(^^)ゞ
今年は秋に入ってからも毎週のように来る台風、晴れない、暑い、など過ごしにくい日が多かったですが、ようやく気温も下がり一気に秋らしくなってまいりました。皆さまいかがお過ごしでしょうか？
さて、本日は”動く静止画”こと、シネマグラフをフォトショップでサクッと作ってみたいと思います♪
簡単に言うと、動画の上に一部を透明にした静止画を被せて、透明の部分から下の動画の一部が見えるようになっているGIFアニメ画像です。時が止まった中、一部だけが動き続けているという不思議な感じが出せるんです。それでは早速作ってみましょう。
“フォトショップでシネマグラフを作ってみよう、の巻” の続きを読む
皆さまごきげんよう。
厳しい残暑が続いておりますがですがいかがお過ごしでしょうか？まだまだ日中は暑いとはいえ日の入りが早くなってきて、季節は着々と秋に向かっているのだなぁ..と嬉しいような寂しいような今日この頃です。
さて、本日はイラストレーターでシームレスなパターンを作ってみようと思います♪
“イラストレーターでシームレスなパターンを作ろう” の続きを読む
皆さまごきげんよう！梅雨も明けいよいよ夏本番、いかがお過ごしでしょうか？
皆さまも、部屋でお仕事や勉強をしている時にBGMをかけたりすると思うのですが、集中力を高めるのにホワイトノイズがいいらしい、ということで私、久々に使ってみて良かったのがこちら、noisliです。説明するまでもないですが、アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるところがいいんです。聞いているだけで心落ち着きますし、ほんとお勧めです。ぜひお試しあれ♪
さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。
“スマホでもパララックスを実装してみよう、の巻” の続きを読む
皆さまごきげんよう。ジメジメとうっとおしい季節、いかがお過ごしですか？
これから梅雨明けも間近に控えて、夏が大の苦手な私が最近気になっているのが「空調ざぶとん」って云うんですか？お尻にヒンヤリ空気を運ぶという、ファンが付いた座布団です。どの程度の音がするのか？気になるところですが、これを会社で使いたい(笑)。あと冷房服。すごく着てみたい(笑)。
さて、今まで使っていたコードをハイライトさせるプラグイン、「Crayon Syntax Highlighter」が一体いつ頃からなのか？なぜか今まで通りに表示されなくなっていまして、まぁ、動作が重かったこともありますし、この度これに代わるプラグイン「WP Code Highlight.js」を使ってみることにしました。
“コードをハイライトさせるワードプレスプラグイン「WP Code Highlight.js」を使ってみた” の続きを読む
皆さまごきげんよう。
本日はスマホで普通に撮った写真をフォトショップ(cs6を使用)を使って色々と加工してみようと思います。どれも2、3ステップで出来るとっても簡単なものばかり！ではさっそくやってみましょう(^^)/
皆さまごきげんよう。
よく、駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。最近のwebではめっきり見かけなくなりましたが、そんな今コレを取り入れたら逆に新しいんじゃないの？！ということで、(笑) 本日はjQueryで電光掲示板のようなもの（ティッカー）を作ってみようと思います。
なにもわざわざjQuery使わなくてもcss3のアニメーションでいいんでない？とも言えますが、流す文章が一つのみならそれで良いのですが、リストになった文章がいくつかあり、それが増えたり減ったりする場合、jQueryでプログラムを書いておくと便利です。
それでは早速やってみましょう。
“jQueryでティッカーを作ってみよう” の続きを読む
どうも！前回からちょっと間が空いてしまいましたが、すっかり花粉の季節ですね(>< ); 皆さまいかがお過ごしでしょうか？私はマスクとメガネの日々を過ごしております。マスクとメガネ、二つも耳に掛かっていると本当にストレスなんですよね(´･ω･`)…
さて、今回はjQueryで座標を取得してみようの巻です。
マウスカーソル(タッチデバイスでは指)を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。
このような物を作ってみます。↓
目次
1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.ソース
“jQueryで座標を取得してみる” の続きを読む