HTMLのビデオプレイヤーで、ピクチャーインピクチャーやダウンロードのメニューを消す方法

html5のビデオタグを使うと、デフォルトでは上画像のように右側にメニューボタンが表示されてしまいます。メニューボタンをクリックすると、ダウンロードとピクチャーインピクチャーが表示されます。これを消すには、

WordPress 5の記事編集エディタを元に戻す方法！ブロックエディター → Classic Editor（公式プラグイン）

いよいよWordPress5.0が提供開始になりました。今回のアップデートで多くの人が戸惑うのが、編集画面のエディタがこれまでとは違うデザインになってしまったこと。新しい編集画面になることで、これまで使っていた便利な

WordPressのショートコード（自作コードにも対応）を削除して抜粋文を得る方法（文字数指定、htmlタグ除去、改行除去）

WordPressのショートコード除去といえば、strip_shortcodes()が用意されています。しかしstrip_shortcodes()は自分で作成したオリジナルのショートコードを除去してはくれません。デフォルトで登録されているショートコードしか削除

Edgeでdisplay : flex が適用された要素の上下マージンや上下パディングが効かない時の解決方法

Edgeでdisplay:flex;に指定した要素にflex-wrap:wrap;を使ったところ、上下マージンが効いていないことが判明。解決策は「疑似要素」を使うことでした。解決策は以下のとおり。.item::after { content: ''; display: block; margin: 10% 0 0;}

ランディングページの教科書 売上をガンガンあげるWeb制作 8つのコツ

良書との噂をききつけ久しぶりに紙の本を買ってみました！ランディングページ（LP）や商品紹介系ブログで成果を出したい方に特にオススメのノウハウ本です！今回読んでみたのは、Web制作やアフィリエイト業界の有名人

jQueryで画像の幅や高さの取得が不安定な場合は、ページ読み込み実行処理の書き方に注意！

jQueryを使った画像の幅と高さの取得について、なんども同じことをやってしまっているので解決策をココにメモしておきます。結論からいうと、jQuery使用時に画像の幅や高さの取得が不安定になってしまうのは、「ページ読

FTPパッケージ「Remote-FTP」で動作不良が発生！Atomパッケージがオカシイ場合の対処方法

最近、SublimeTextからAtomにエディタを乗り換えたのですが、便利なFTPパッケージ「Remote-ftp」で不具合が発生してハマったので解決方法をメモしておきます。まず、この現象が発生すると、↑Remoto-FTP関連のメニューがすべて効

WordPressから送られる全メールをすべて一括で停止する方法

新規ユーザーの登録時や、メールアドレスやパスワードの変更、コメントやトラックバックなどのタイミングで送信される「すべてのメール」を一括で停止する方法です。以下をwp-config.phpに追記します。function wp_mail(){}WordPr

キーボードの方向キーが取得できない場合は、イベントが「keypress」になっていないか注意！

キーボードの方向キー（十字キー、矢印キー）が取得できなくてハマってしまったので解決方法をメモしておきます。この現象は以下例のようにイベントリスナーを「keypress」に設定している時に発生します。document.addEventLi

曖昧になりがちなインライン要素とインラインブロック要素とブロック要素の違い

曖昧で間違えやすいCSSのdisplayプロパティの、「display:inliine;」と「display:inliine-block;」と「display:block;」の違いについてまとめてみました。主な違いとしては上図の表のとおりです。表だけだと把握しづらいと思いますので以

CSS3のbox-shadowが効かない場合はposition:relative;で解決！

box-shadowをかけた要素に、影が出ない場合の対処方法です。結論からいうとこの現象は、後に続く要素のbackgroundが指定されている場合（colorでもimageでも）に発生します。header { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);}headerにbox-shadow

WordPress管理画面のダッシュボードに自作の更新・新規追加フォームのウィジェットを追加する方法

「トップページの一部だけをシンプルに更新できるように」というような要望があったときに便利な更新システムをダッシュボードウィジェットに追加する方法です。functions.phpに以下をコピペすると、上画像のフォームが

プログラミング学習用パソコン「Raspberry Pi」を試してみました！Raspberry Pi3 Model B ボード＆ケースセット

1万円以内で購入できるプログラミング学習用のミニパソコン「Raspberry Pi」を試してみました！今回購入したのは「Raspberry Pi3 Model B ボード＆ケースセット (Element14版, Clear)-Physical Computing Lab」というラズパイ本体と、「Raspberry

EdgeだけにCSSを適用するCSSハック

Microsoft Windows10のデフォルトブラウザ「Edge」だけにCSSを適用したい場合のCSS HACKです。@supports (-ms-accelerator:true) { セレクタ { プロパティ : 値 ; } .hoge { color:red; } }これでEdgeだけにCSSが適用されるようになります。上記の例だと

悪い癖がつく前に読んでおきたい本！Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

慣れ親しんだ技術のCSSですが、学び直しの意味を込めてCSS設計について書かれた本書を読んでみました。まず、本書が対象としているのは中級者〜上級者である点に注意が必要です。内容の必要性、必然性を理解するにはあ

jQueryを使った自作スムーススクロールでエラーが出る場合の対処法

「Uncaught Error: Syntax error, unrecognized expression: a」とエラーが表示されてしまう場合の解決策です。このエラーは、ページ内のアンカーリンククリック時にスムーズなスクロール移動を実現する以下のようなjQueryを使ったコード

Google Apps Script 使い方メモ

各種のGoogleサービスをJavaScriptを使って、さらに便利にカスタマイズするための言語「Google Apps Script」を勉強したので学習メモを残しておきます。基本//アクティブなスプレッドシートvar ss = SpreadsheetApp.getActiveSpreadsheet();//選

非推奨のquery_postsをやめてWP_Queryで記事を取得するイマドキWordPressループの書き方

いつのまにやら非推奨になってしまっていたquery_posts()を使った記事取得から、WP_Queryを使った方法にアップデートするメモです。従来のquery_postsを使った記事の取得$args = array('post_type'=>'post');query_posts( $args );if(have_posts()) : whil

video要素の動画の長さ（duration）の取得がうまくいかない場合の解決方法

video要素に指定された動画の長さ（duration）の取得でハマったので解決策をメモしておきます。結論からいうと、「setInterval」を使って、durationを取得できるようになるまで待機（ループ）させることで解決しました。var timer

HTMLのリストマーカーのサイズ・色・位置をCSSで変更する方法

liタグのリストマーカー（丸点）の色やサイズ、位置などをCSSで変更する方法です。li { list-style-type: none;}li:before { content: ''; width: 6px; height: 6px; display: inline-block; border-radius: 100%; background: #20B97B; position: relative; left: -15px; top: -3px;}