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

皆さまご機嫌よう。
以前、画像の右クリック、ドラッグ&ドロップ禁止のプラグインのご紹介をしましたが、私のワードプレスのテーマといつのまにか互換性が無くなってしまったのでしょうか?原因不明なのですが、全く効いていないことに最近気付きました((((( ;゚Д゚)))ガクガクブルブル

そこで今回は、一行でコンテンツをプロテクトしてくれるcssのご紹介です。
“コンテンツをプロテクトしてくれるcss” の続きを読む

javascriptで作ったカウントダウンタイマーをワードプレスに実装する

皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちら javascriptでカウントダウンタイマーを作る

ワードプレスに実装してみる

前回作ったscriptの部分を、新たにjsファイル(○◯.js)にしてFTPサーバの任意の場所に保存します。
“javascriptで作ったカウントダウンタイマーをワードプレスに実装する” の続きを読む

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

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

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

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。
“cssアニメーションで文字を点滅させてみよう” の続きを読む

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

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

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

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

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

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

ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、ページにエラー表示が出る様になってしまいまして(´ω`。)
プラグインは便利ですが、何かの更新の度に必ずしも互換性が保たれる保証はありませんし、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです!

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

スマホでもパララックスを実装してみよう、の巻

皆さまごきげんよう!梅雨も明けいよいよ夏本番、いかがお過ごしでしょうか?

皆さまも、部屋でお仕事や勉強をしている時にBGMをかけたりすると思うのですが、集中力を高めるのにホワイトノイズがいいらしい、ということで私、久々に使ってみて良かったのがこちら、noisliです。説明するまでもないですが、アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるところがいいんです。聞いているだけで心落ち着きますし、ほんとお勧めです。ぜひお試しあれ♪

さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。
“スマホでもパララックスを実装してみよう、の巻” の続きを読む

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

皆さまごきげんよう。
よく、駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。最近のwebではめっきり見かけなくなりましたが、そんな今コレを取り入れたら逆に新しいんじゃないの?!ということで、(笑) 本日はjQueryで電光掲示板のようなもの(ティッカー)を作ってみようと思います。

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

それでは早速やってみましょう。
“jQueryでティッカーを作ってみよう” の続きを読む

ワードプレスの背景に雪を降らせてみよう

皆さまごきげんよう!
暮れも押し迫ってまいりましたが、いかがお過ごしでしょうか?
大晦日までには不要なものを全部捨ててやろう!と張り切っている私ですが、まだ何も手を付けていません(^^;

ところで、最近ネットで魔夜峰央先生の 全埼玉県民が泣いた!伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた(笑)『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう!」なんて本当に出来るのでしょうか?!(^^;A

ま、それはさておき(笑)今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。
“ワードプレスの背景に雪を降らせてみよう” の続きを読む

jQueryで雪を降らせてみよう

皆さまこんにちは!

早いもので今年も残すところあと1ヶ月、光陰矢の如し、ですね。皆さま今年の目標は達成出来ましたでしょうか?
私は残念ながら、未だ何ひとつ達成出来ないままムダに年だけ取るという(笑)ってまだまだあと残り1ヶ月、最後まで頑張りますよ!(^^;A

ま、それはさておき(笑)今日はちょっと季節を感じる、jQueryで雪を降らせてみようの巻です。

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

今回作ってみるものはこちら♪
“jQueryで雪を降らせてみよう” の続きを読む

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

皆さまこんにちは!
暑さ寒さも彼岸まで。ようやく過ごしやすい季節になってまいりましたね!スポーツの秋、読書の秋、色々な秋がありますが、私はやはり「食欲の秋」でしょうか(笑)
さて本日は勉学の秋、jQueryとcssを連携させて、タブでページを切り替えて表示させてみようと思います。
“jQuery でタブを実装してみよう!” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜

皆さまこんにちは!厳しい残暑の候、いかがお過ごしですか?
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜をお送りします。

〜その壱〜を読んでからでないと何のこっちゃ?だと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ
前回の記事はこちらです。

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました(笑)
そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む