プログラミング

【JavaScript】任意の位置へスクロールさせる方法

概要 JavaScriptで任意の位置へスクロールさせる方法はいくつかある。document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。(Microsoft Edgeなど)要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。要素.scrollIntoView() window.scrollTo...

2020.08.27

JavaScript

CSS

【CSS】nth-of-type(n)はクラスに指定しても効かない？

概要よく勘違いしてしまうのだが、CSSの擬似クラスnth-of-type(n)はクラスに指定した場合でもnの対象としてカウントされるのは要素(タグ)である。サンプル <ul> <li class="hoge">11111</li> <li>22222</li> <li class="hoge">33333</li> <li class="hoge">44444</li> <li class="...

2020.08.20

CSS

【WordPress】続きを読む(moreタグ)が効かない・機能しない原因

概要 WordPressのエディタには「続きを読む」というものがある。ブロックエディタでは「レイアウト要素」の中にあり、記事の続きやネタバレしてしまうような内容を隠すために使われる。「続きを読む」をクリックすると以下のようになる。しかし、これは対応しているテーマでしか機能しない。公式テーマのTwenty NineteenやTwenty Twentyであれば正常に動作するが、第3者が作成したテー...

2020.08.13

WordPress

Node.js

npm runコマンドとnpxコマンドの使い方

npm runコマンド (npm srcipts)とは？ Node.jsをインストールすると、npm run xxxで任意のコマンドを実行できるようになる。これはnpm scriptsと呼ばれ、任意のコマンドのショートカット（エイリアス）を定義することができる機能である。 npm runコマンド (npm srcipts)の使い方 package.jsonのscriptsに実行したいコマンドを定義...

2020.08.06

Node.js

PHP

Zend Framework2をPHP7.3で動作させる

概要 Zend Framework2.4はPHP7.2で動作するが、PHP7.3では動作しない。PHP7.3で動作させるには、Zend Framework2.5にアップデートする必要がある。 Zend Framework2.4まではアーカイブページ（）からダウンロードすることができたが、Zend Framework2.5はComposerを使ってダウンロードする必要がある。手順 1. Compo...

2020.07.10

PHP

【JavaScript】スクロール量(位置・座標)の取得方法

Windowのスクロール量 window.pageYOffsetで取得することができる。ただし、IE8以前は非対応のためdocument.documentElement.scrollTopとする必要がある。よって、(window.pageYOffset || document.documentElement.scrollTop)と書くことで、クロスブラウザ対応することができる。 window.a...

2020.05.22

JavaScript

【脱jQuery】JavaScriptだけで要素のwidth, heightを取得・設定する方法

jQueryのwidthメソッド、heightメソッドをJavaScriptだけで実装する方法をまとめました。 width, heightの取得 jQuery const width = $('#hoge').width(); const height = $('#hoge').height(); JavaScript // borderとscrollbarの高さをめない場合 const widt...

2020.05.11

JavaScript

【脱jQuery】jQueryのliveメソッド、 onメソッドをJavaScriptだけで記述する方法

概要【脱jQuery】JavaScriptだけでイベント処理を行うでは、既に存在する要素のイベントハンドラを定義したが、jQueryのonメソッド（古いバージョンではliveメソッド）は要素が後から追加された場合でもイベントハンドラが実行される。これをJavaScriptだけで実現させる場合、以下のようにdocumentオブジェクトに対してaddEventListenerでイベントハンドラを登...

2020.04.16

JavaScript

【WordPress】PHPプログラムからサーバ上のファイルをメディアライブラリへ登録する方法

概要 media_handle_sideload関数を使用すると、既にWEBサーバ上にアップされているファイルをメディアライブラリに登録することができる。 media_handle_sideload関数 media_handle_sideload(連想配列, 投稿ID(省略可))※連想配列はキーname, tmp_nameを持つ media_handle_sideload関数を使用するには、以下の...

2020.04.09

WordPress

【JavaScript】ブラウザバック(戻るボタン)を無効化する方法

概要 JavaScriptのHistory APIでブラウザの戻るボタンを無効化することができる。サンプル window.history.pushState(null, null, null); window.addEventListener("popstate", function() { window.history.pushState(null, null, null); return; ...

2020.04.08

JavaScript