JavaScript

WordPressの編集画面での差し替えた画像が古い状態で表示される?(画像キャッシュ) とりあえずのメモ

WordPressの編集画面での差し替えた画像が古い状態で表示される?(画像キャッシュ)

WordPressの画像キャッシュ問題により、差し替えた画像が古い状態で表示されることがあります。これは、ブラウザのキャッシュと画像URLの仕様が主な原因でした。キャッシュが読み込まれないように、functions.phpに管理者用に JavaScriptのコードを追加して、動的に画像URLにタイムスタンプを付与するようにしました。WordPressの画像キャッシュ問題WordPressでサイトを運営しているのですが、差し替えた画像ファイルをプラグイン(Media Clean...
AIプログラミングでタイピング練習ゲームを作った AIの話題

AIプログラミングでタイピング練習ゲームを作った

HTMLとCSS、JavaScriptでシンプルなタイピング練習ゲームを作りました。インストール不要でブラウザから動作し、シンプルで読み込みが早いことを目指しました。(公開サイト)AIプログラミングで工夫した点(仕様書とファイル構成)Claude 3.5 Sonnetで作成していったのですが、すぐにチャットの文字数上限になってしまいます。続きをプログラムしようにも、一からやり直しになってしまいます。そこで、チャット上限に近づいたら、「プログラム仕様書とファイル構成」を.md(...
アカウント登録の練習用ダミーページを作った(PHP) とりあえずのメモ

アカウント登録の練習用ダミーページを作った(PHP)

アカウント登録の練習用ダミーページをPHPで作成しました。このページでは、データを実際に送信せずにローカルで処理し、パスワード入力やフォーム検証の練習ができます。アカウント登録の練習用ダミーページを作ったブラウザで開いてパスワード入力を練習するためのページを作りました。練習用ページでは、実際のデータは送信されず、ローカルで処理されます。データの非保存:フォームのsubmitイベントをJavaScriptで制御し、実際にはデータを送信せず、ローカルで処理しています。フォーム検証...
WordPressにSVG画像をアップロードできるようにした(functions.php) とりあえずのメモ

WordPressにSVG画像をアップロードできるようにした(functions.php)

WordPressではセキュリティ上の理由からSVGファイルのアップロードが制限されています。functions.phpにカスタム関数を追加すれば、ブログエディタでのSVGアップロードを許可できます。ただし、アップロードを許可する場合、リスクも認識しておくことが大事です。「このファイルタイプ(SVG)をアップロードする権限がありません」WordPressにSVGファイルをアップロードしようとしたらエラーになりました。このファイルタイプをアップロードする権限がありません。fun...
[JavaScript]目次の開閉状態をCookieで記憶させた とりあえずのメモ

[JavaScript]目次の開閉状態をCookieで記憶させた

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。ちらつき防止のためのCSSも設定しました。JavaScriptコード前回は、サイドバーに目次を追加しました。チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。/** 2024-08-30 チェックボックスの状態を保存す...
[Electron]連続コピーアプリを作ってみた(monclip) Mac

[Electron]連続コピーアプリを作ってみた(monclip)

Electronを使用してMac用のクリップボード記録アプリを作成しました。このアプリは、コピーした内容を自動的に記録していき、まとめて編集・利用できるようにします。ネットショッピングやレポート作成時の情報収集に便利で、簡単な操作で使用できます。クリップボード記録アプリを作った自分のMac用に「クリップボード記録ツール(monclip:Monitor Clipboard)」を作りました。パソコンで文字をコピーするたびに、その内容を自動的に記録してくれます。(ダウンロード:動作...
[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した(functions.php) とりあえずのメモ

[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した(functions.php)

WordPressのブロックエディタに「書式のクリア」のショートカットキーを追加しました。functions.phpとcustom-editor.jsを使用して、Command+Jで「書式のクリア」をできるようにしました。「書式のクリア」のショートカットキーを追加したいWordPressのブロックエディターにControl+Spaceでテキストの書式をクリアするショートカットキーとして「Command+J」を追加しようと思います。ブロックエディタの「書式のクリア」は、そのほか...
[偽roundcube]「Password key expired(パスワードキーの有効期限が切れました)」という詐欺メールが届いた とりあえずのメモ

[偽roundcube]「Password key expired(パスワードキーの有効期限が切れました)」という詐欺メールが届いた

roundcubeのアイコンで「パスワードキーの有効期限が切れました」というメールが届きましたが、これはフィッシング詐欺の可能性が高いです。送信者のメールアドレスやリンクのURLに不自然な点がありました。けっこう、cPanelを狙い撃ちにした迷惑メールか届くから、メールアドレスがそういう名簿に乗ってしまったんだろうね……。「パスワードキーの有効期限が切れました」とは?このメールは、一見すると重要なお知らせのように見えます。しかし、セキュリティ上の緊急性を煽っているメールには、...
ネット広告と広告ブロッカーの難しさ(権限の強さとビジネスの脆弱性) インターネット小話

ネット広告と広告ブロッカーの難しさ(権限の強さとビジネスの脆弱性)

インターネットを閲覧していると「詐欺まがいの悪質な広告」が増えています。対策の1つとして「広告ブロッカー」がありますが、どの広告ブロッカーを選ぶかは難問です。広告ブロッカーの要求するアプリ権限は大きいため、開発元が不審な動作を加えないかチェックする必要があるからです。広告ブロッカーの技術的なアプローチ広告ブロッカーには、大きく2通りのやり方があります。広告ブロッカーの種類コンテンツフィルタリングブラウザ内で動作するページ内の特定の要素を消すDNSフィルタリングネットワークレベ...
[WordPress]管理者ログインしていないときだけ実行するJavaScriptを追加した(分離) ホームページ運用

[WordPress]管理者ログインしていないときだけ実行するJavaScriptを追加した(分離)

以前に、下にスクロールするとヘッダーメニューを半透明にするスクリプトを入れました。しかし、自分がログインしているときは不要なのでオフにすることにしました(画面録画するときに撮影範囲がわかりにくい)。環境:WordPress, Cocoon, Cocoon子テーマいったん javascript.jsの以下のコードを削除して、管理者ログインしていないときに限定します。/** * 2024-07-04 管理者ログインしていないときのスクリプトを分けた * 下にスクロールするとヘッダ...
子どもにとってのViscuitの魅力(プログラミング学習) とりあえずのメモ

子どもにとってのViscuitの魅力(プログラミング学習)

小学3年生の子どもがプログラミングに興味を示したので、3つの候補(Scratch、Processing、Viscuit)を見せてみました。子どもが最も興味を示したのは Viscuit。ルールの小さな変更が大きな変化をもたらすダイナミックさが子どもにとって面白いようで、夢中で遊んでいます。「自分で作ったルールによって動く世界」。思い通りにならないことも学びにつながるのかも。YouTube動画でも話しています。プログラミング言語を選ぶ最近、小学3年生の子どもが「パソコンでプログラ...
【解説】入力しやすいパスワードを考えてくれるツールを作った(パスワードエントロピーと入力) #非営利

【解説】入力しやすいパスワードを考えてくれるツールを作った(パスワードエントロピーと入力)

ツール本体へ(広告なし・軽量版)パスワードは毎回 ランダムに生成されます。気に入ったパスワードをタップするとコピーできます。ほかのパスワード候補に変える function generatePasswords() { const symbols = "!@#$%^&*()_+"; const letters = "abcdefghijkmnopqrstuvwxyz"; const numbers = "23456789"; let passwordsList = ""; for...
[JavaScript]全選択で記事部分だけになるようにした とりあえずのメモ

[JavaScript]全選択で記事部分だけになるようにした

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。window.getSelection()テーマのjavascript.jsに以下のコードを追加しました。document.addEventListener('keydown', function(event) { if ((event.ctrlKey || event.metaKey) && event.key === 'a') { event.preventDefault(); const articl...
[Electron]今日の日付カレンダーアプリを作った(Calectron) とりあえずのメモ

[Electron]今日の日付カレンダーアプリを作った(Calectron)

Electronを使用して、Windows 7のガジェットにあったカレンダーのようなアプリケーションを作成しました。このアプリケーションは、今日の日付と曜日を表示するだけのシンプルなものです。macOS風にデザインを変更し、タイトルバーを削除して、ウィンドウ全体をドラッグできるようにしました。Windows 7のカレンダーのようなアプリを作ったElectronで Windows 7の「ガジェット」にあったカレンダーのようなものを作りました。ただ、今日の日付・曜日を表示するだけ...
[JavaScript]下にスクロールするとヘッダーメニューを半透明にするようにした プログラミング

[JavaScript]下にスクロールするとヘッダーメニューを半透明にするようにした

Xのタイムラインを見ていたら、画面のメニューバーの透過度が上下のスクロールに応じて変化していることに気づきました。少し下にスクロールすると半透明になり、少し上にスクロールすると元に戻っています。自分のサイトのヘッダーメニュー(mobile-header-menu-buttons)でも、このような処理をするように、JavaScriptを作りたいと思います。画面内の情報の表示範囲が増えるからです。javascript.jsとstyle.css機能ユーザーがページを下にスクロールす...
なぜオンライン版ExcelでエクスポートしたPDFが「JavaScriptの機能を使用している」の?(自動印刷処理) とりあえずのメモ

なぜオンライン版ExcelでエクスポートしたPDFが「JavaScriptの機能を使用している」の?(自動印刷処理)

オンライン版Excelからエクスポートした PDFで、JavaScriptの機能が使用されているという警告が表示されました。これは、PDFを開いたらすぐに印刷できるスクリプトが埋め込まれているためです。しかし、PDF内のJavaScriptにはセキュリティ上の懸念もあり、なるべくならオフにしておきたいです。追記:2024-08-01「印刷」から「PDFとしてエクスポート」したときには JavaScriptが埋め込まれているものの、「エクスポート」からPDFをダウンロードした場...
詐欺サイトはスマホを狙う(ユーザーエージェント) とりあえずのメモ

詐欺サイトはスマホを狙う(ユーザーエージェント)

クレジットカードなどの利用照会を装うメールから偽サイトに誘導する詐欺が横行しています。ところが、パソコンからアクセスすると適当な大手サイトにリダイレクトされました。スマートフォンからアクセスしたときだけ偽のログインページを表示するように、「ユーザーエージェント」という情報を使っていました。詐欺メールがスマートフォンを狙うのは、コンピュータ関係に詳しくない利用者が多い、と考えられているからでしょう。スマートフォンは手軽に使い始めることができますが、情報セキュリティについて自分で...
いかがわしいサイトを見てしまったけれど「大丈夫」?【アプリ サンドボックス】 Android

いかがわしいサイトを見てしまったけれど「大丈夫」?【アプリ サンドボックス】

一般的には「もし、いかがわしいサイトを見たとしても、特に個人情報を入力したり、何かを『許可』していない」なら、「あまり心配はない」と言えます。これは、スマートフォンの基本システムやブラウザは、プログラムが他の領域にアクセスできない設計(アプリ サンドボックス)になっているからです。むしろ気をつけたいのは、焦っていろいろ操作することです。慌ててセキュリティアプリを入れようとして、間違って「ウイルス(マルウェア)」を入れてしまうことが多いからです。YouTube動画でも話していま...
フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI] とりあえずのメモ

フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI]

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。js-iframe-trackerを無効したら解決しました。iframeTrackerは、リンククリックを計測するためのjQueryプラグインです。フォームの要素にラベルが関連付けられていませんPSIで「input#focus_retriever」にラベルがない、と表示される。フォームの要素にラベルが関連付けられ...
[Cocoon]「pinit_main.js」を削除するには?(Pinterest) SNS

[Cocoon]「pinit_main.js」を削除するには?(Pinterest)

Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。CocoonのSNSシェアの Pinterestが有効だと、フッターに「」の読込みが挿入されていました。 <?php //Pinterestシェアボタン用のスクリプト if (is_singular() && (is_top_pinterest_share_button_v...
「カスタム検索(サイト内検索)」スクリプトを除外した(cse.google.com/cse.js) とりあえずのメモ

「カスタム検索(サイト内検索)」スクリプトを除外した(cse.google.com/cse.js)

カスタム検索のスクリプト(cse.google.com/cse.js)が重そうです。asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリンクを設置することにしました。遅延読込みのdeferとasyncまずは、スクリプトの読込みを遅延させることを考えました。<div class="gcse-searchbox-only"></div><script defer src=""></s...
[PHP] 不要なCSS/JavaScriptを無効化する(wp_dequeue_style, wp_dequeue_script) とりあえずのメモ

[PHP] 不要なCSS/JavaScriptを無効化する(wp_dequeue_style, wp_dequeue_script)

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45sスクリプトサイズ0.77MB0.69MB不要なスタイル・スクリプトを見つける前回は、不要なプラグインを無効化しました。今回は不要なスタイル・スクリプトを削除していきます。前回はこちら。スタイル・スクリプトを一覧するショートコードは、過去に作っ...
[JavaScript] showOpenFilePickerがエラーになる(Uncaught (in promise) DOMException) とりあえずのメモ

[JavaScript] showOpenFilePickerがエラーになる(Uncaught (in promise) DOMException)

ファイル読み取りのため、以下のコードをそのまま実行したら動きませんでした。 const pickerOpts = { types: [{ description: 'Texts(.txt)', accept: {'text/*': ['.txt']} }], multiple: false, } let fileHandle; [fileHandle] = await window.showOpenFilePicker(pickerOpts); const file = aw...
[phina.js] JavaScript でユーザー端末のファイル入出力をするには とりあえずのメモ

[phina.js] JavaScript でユーザー端末のファイル入出力をするには

JavaScriptでは、ウェブ上のデータと違ってユーザー端末内のファイルには、直接アクセスできない仕組みになっています。これは、自分で作ったプログラムを検証する場合でもそうです。そのため、ローカル環境のファイルにアクセスするには、自前のウェブサーバでアクセス可能にするか、ブラウザから読み込み・保存する必要があります。今回は、ブラウザからのファイル入出力を見てみます。Blobオブジェクトのダウンロード文字列をテキストファイルとして保存するなら、仮想的なリンクを作って、リンクの...
[phina.js] ゲーム内で表示できるオブジェクトの基本 とりあえずのメモ

[phina.js] ゲーム内で表示できるオブジェクトの基本

前回は phina.js の土台となるシーン構成を概観しました。今回は シーンの要素となる基本的なオブジェクトをざっと見ていきます。参考資料は、「phina.js Tips集 上巻」です。ゲーム内で表示するオブジェクト前回の各サンプルで使われていたオブジェクトは・Label テキストを配置・Sprite 画像を配置・Button テキストと枠を配置でした。シンプルな項目なら、そのまま生成して配置します。 var label = Label('Hello, phina.js!'...
[phina.js] シーン管理の基本 とりあえずのメモ

[phina.js] シーン管理の基本

phina.jsのシーン遷移については、「<シーン編>|phina.js Tips集 下巻」が詳しいです。特徴的な部分をまとめます。phina.jsでは暗黙のうちにデフォルトのシーンが用意されているので、ちょっと戸惑いました。phina.jsの Hello Worldコード久しぶりに phina.js で遊んでみることにしました。JavaScriptだけでブラウザ上でゲームが動くのはやっぱり手軽です。しかし、プログラムの処理の流れをすっかり忘れています。まずは、シーンの概要と...
MRIやCTの画像ディスクをパソコンで見るには?【DICOMの閲覧】 Windows

MRIやCTの画像ディスクをパソコンで見るには?【DICOMの閲覧】

病院で画像診断のディスクをもらいました。パソコンに入れたところ、「このディスクに対して行う操作を選んでください」と表示されています。どうすればいいのでしょうか?Windows PCなら、同梱されている専用ビューワ「AOC Stackato」で画像データを閲覧できます。CD-ROMの自動再生「AOC_Stackato の起動」というのは、CD-ROM内の自動再生プログラムです。プログラムの表示を見ると、「専用ビューワ(AOC Stackato)」か「Webブラウザ」で画像診断デ...
【未解決】埋め込んだTwitterのフォントサイズを小さくしたい(けど、いったん断念)[WordPress] SNS

【未解決】埋め込んだTwitterのフォントサイズを小さくしたい(けど、いったん断念)[WordPress]

ただ、ツイートの埋め込みの文字サイズを本文に揃えたいだけなのに、めちゃくちゃ大変……。Twitterのツイートは、「ツイートを埋め込む」からコードを表示して、HTMLに埋め込むことができます。ところが、枠の幅や文字サイズなどは、ウェブサイトと異なるスタイルが適用されます。結論としては、あれこれ調べましたが、諦めました。「埋め込みツイート」が Twitterの仕様変更に依存しているので、サイト側で変更してもすぐに元に戻ってしまうからです。「twitter-tweet」のクラスを...
Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】 ニッチな話題

Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】

レンダラープロセスから、メインプロセスで処理を移した後、レンダラープロセスに処理を戻すには、どうすればよいかハマったのでメモをしておきます。結果としては、IPC通信とasync, awaitという非同期の関数を利用することで、解決しました。プロセス間通信と処理の流れやりたいことは、・UIの実行ボタンが押して、・端末のファイル操作を行い、・終わってからUIに貯めた入力データをクリアする、ということです。UIに関するデータは、レンダラープロセスにあります。ただ、node.jsの処...
[JavaScript]JQueryとdocument、どっちを使う?【HTML5】 インターネット小話

[JavaScript]JQueryとdocument、どっちを使う?【HTML5】

インターネットの情報の特徴として、新しい情報も過去の情報も混在しています。過去の情報を元にした新しい記事もあるため、「何が最新なのか」わかりにくい面があります。JavaScriptでウェブページの要素にアクセスしようと、インターネットで検索すると、「JQueryを使った方法」と「document」を使った方法が出てきます。そこで悩むのが、いったい どっちを使う方がよいのか、ということです。JQueryとgetElementBy〜例えば、idセレクタからDOM要素にアクセスする...
Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】 ニッチな話題

Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】

Electronでスクリプトを書いていたところ、Node.jsのAPIとDOM要素を結びつけるのに迷いました。main.jsではDOM要素にアクセスできず、HTMLから読み込んだスクリプト(renderer.js)ではNode.jsのAPIにアクセスできないからです。「プロセスモデル | Electron」をもとに、それぞれの役割の違いを見てみましょう。ポイントmain.jsは、メインプロセスを管理。renderer.jsは、レンダラープロセスを管理。preload.jsは、...
久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】 ニッチな話題

久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】

Macで動く自作ツールをJavaScriptでプログラムするために、Electronを使っていました。久しぶりにプログラムを修正しようとしたら、electronコマンドが通りません。改めて環境を構築しました。ポイントelectronのインストールで「sudo npm install -g electron --unsafe-perm=true --allow-root」でオプションを付加しないとエラーになったElectronが見つからないElectronは、「HTML5やJa...
ウェブページのスクリプトがマルウェアを「組み立てる」危険とは?【HTMLスマグリング】 インターネット小話

ウェブページのスクリプトがマルウェアを「組み立てる」危険とは?【HTMLスマグリング】

Microsoft Security Intelligenceによると、近年 「HTMLスマグリング(HTML Smuggling:HTMLの密輸)」というサイバー攻撃の手法が増えているそうです。「ウェブページのJavaScriptが、コンピュータ内にマルウェアを構築する」という話を見て、「ウェブページを見るだけで、マルウェアが保存されてしまうのか」と思ってびっくりしました。ただ、「見るだけで感染する」というわけではなさそうです。注意点は「フィッシング詐欺」と一緒。怪しいメー...
使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights] インターネット小話

使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights]

ブログのページを高速化したいけど、どこを削ったらよいかわからない💦とりあえず、「使用していないJavaScriptの削減」について、よくわからなかったことを、よくわからなかったなりにメモしておきます。PageSpeed Insightsの使用していないJavaScriptの削減PageSpeed Insightsをみると、「改善できる項目」に「使用していないJavaScriptの削減」があります。PageSpeed Insights項目の詳細をみると、Google Adsen...
どうして Windows XP でインターネットに接続できないの?【JWordプラグインが破損】(Let’s note CF-W7の場合) インターネット小話

どうして Windows XP でインターネットに接続できないの?【JWordプラグインが破損】(Let’s note CF-W7の場合)

家のパソコンをインターネットにつなごうとしたら、「プラグインが破損」というメッセージが表示されて進まないの。どうしてなのかな?よく、「古いパソコンはセキュリティの問題があって、インターネットにつないではいけない」と言われますが、なんか腑に落ちないですよね。今回は、Windows XP パソコンでインターネットに接続できなかった事例をもとに、実際にどんな問題点があるのか、みてみましょう。ポイントJWord プラグインは、サービス終了しているので、アンインストールする。Inter...
phina.jsで将棋盤ゲームのプログラミングした話 [JavaScript] ニッチな話題

phina.jsで将棋盤ゲームのプログラミングした話 [JavaScript]

先日、スマホで操作できる将棋盤プログラムを作りました。デザイン将棋盤↑ こちらから動かせます。phina.jsライブラリプログラミング言語は JavaScriptで、phina.jsというライブラリを利用しました。公式サイトHome | phina.jsせっかくなので、駒を自分でkeynoteでデザインしました。Keynoteで駒をデザインしたけっこう、図形の結合なんかを組み合わせるだけで、それっぽくできるんだね。すぐにコードを動かせるのが魅力言語にJavaScriptを選ん...
やっとLiteSpeed Cache 3.5.2がリリースされたので更新してみた 【Javascript読込みの最適化設定】 ニッチな話題

やっとLiteSpeed Cache 3.5.2がリリースされたので更新してみた 【Javascript読込みの最適化設定】

ここまでのあらすじを振り返ってみると、LiteSpeed Cache 3.5.0.1がリリースされたのが、2020年9月29日でした。その後、すぐに(2020年9月30日)JQueryの遅延読みで不具合が見つかり、LiteSpeed Cache 3.5.0.2として以前のバージョンにいったん戻されます。当初はすぐに修正される見通しでしたが、しばらく、そのままになっていました。最近ようやく動きがありましたので、メモしておきます。LiteSpeed Cacheの更新履歴を読んでみ...
LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】 ニッチな話題

LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】

ほとんどタイトルが全てなんですが、LiteSpeed Cacheプラグインのアップデートについてメモしておきます。プラグインのアップデート一つでこんなに変わるんですね。LiteSpeed Cacheのバージョンが3.5.0.1にアップグレードされたLiteSpeed CacheはWordPressのプラグインで、mixhostサーバーではサイトスピード向上のために利用することができます。最近(2020年9月29日)バージョンが3.4.2→から3.5にアップデートされました。そ...
遅延読込みでコードハイライトが機能しない【LiteSpeed  Cache】 ニッチな話題

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。なんか見た目にカラフルでいいですよね。cocoonでコードがハイライトしないところが何故かうまく表示されません。まずは、表示されたコードブロックを見てみてください。このように、コードブロックがあるのにjavascriptの色分けがされていません。まずはHTMLを検証してクラスを確認する検証でHTMLを見てみると、ちゃんとjavascriptのクラ...
リンクを表示するとスタンプが押されるCSSアニメーション ニッチな話題

リンクを表示するとスタンプが押されるCSSアニメーション

今回は「押すのが心地よいリンク」というのを考えてみました。それが、画面に表示すると、スタンプが押されるアニメーションです。枠の中にマウスをポイントしてみてください。 どうでしょうか? 押したくなります?HTMLコードポイントは、my-stampとstamp2というクラスです。my-stampが枠全体、stamp2が中のイラストを指しています。<figure class="wp-block-image size-large is-resized my-stamp"> 読んだよ ...