iOSでvideoタグの動画を自動再生する方法

iOSのSafariでvideoタグで指定した動画を自動再生させる方法をメモしておきます。

<video src="ビデオファイルのパス" autoplay playsinline muted loop>
<img src="画像ファイルのパス" alt="動画を表示しない時の画像">
</video>

 ビデオ内のオーディオデータが無い、またはオプション指定でmutedにしていないと自動再生できないようです。 

Contact form 7のHTMLタグの幅を指定する

Contact form 7を使っている際にモバイル表示でinputタグが画面幅よりも長くなってしまうことがあります。そのような場合に幅をCSSで指定する方法をメモしておきます。

@media screen and (max-width:768px) {
	.wpcf7-form input{width: 100%;} 
	.wpcf7-form textarea{width: 100%}
	.wpcf7-form .wpcf7-submit{width: 100%;}
}

以上のように任意のメディアクエリ内で幅を指定することで正しい長さにすることができます。

正しいサイズのinput

画面の幅の中にうまくinputタグが収まっています。

WordPressでシンタックスハイライトするのにPrismを使う

元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。

Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む

WordPressでテーマのURLを表示させたい場合

WordPressのテーマディレクトリ(フォルダ)の中にJavaScriptや画像を置いて表示させたい場合に、テーマ内でテーマのURLを自動的に表示できると便利です。

続きを読む

Chromeでハードリロードする方法

Google ChromeでWeb開発する際にいつまでもキャッシュが残って更新内容が表示されない場合があります。このような場合に便利なのがハードリロードです。
続きを読む

Internet Explorer 11でwidthを設定したTableの横幅が適用されない現象の対策

Internet Explorer 11でTableのwidthをCSSで設定しているにもかかわらず横幅が無視されてレイアウトが崩れる現象の対応策をメモしておきます。

TableタグのCSSプロパティーのtable-layoutをfixedにします。

/*Tableタグのクラスが.tableの場合*/
.table {
width: 1000px;
table-layout: fixed;
}

【PHP】スマートフォンでファイルがアップロードできない場合の対策

PHPを使ったフォームでファイルをアップロードした際にDBやログなどにアップロードされたはずのimage.jpgやA7AC099-42AC-4AE5-B166-CC6B536548B0.jpeg というようなファイル名が記録されているのに、ファイルの実体がアップロードされていないということがあります。
そのような場合にチェックすべき点と対策方法をまとめてみました。 続きを読む

jQueryでHTMLファイル内にあるリンクのリストを作る

HTMLのサイトマップなどからリンクを抜き出して一覧を作る方法です。
URLのリストなどをExcelで作りたいときなどに便利です。

続きを読む

iPhoneのSafariからファイルをアップしたときにPHPのTMP_NAMEがなくなる問題

iPhoneのSafariからファイルをアップロードした際にPHPで指定したTMP_NAMEが空になってしまっていることがありました。
この現象について調査したところ、stackoverflowで同様の現象に関する質問がありました。
続きを読む

WordPressの子テーマが壊れていますと表示される場合

WordPressの子テーマが壊れていいます、というエラーが出た場合にチェックしたい箇所をメモっておきます。
子テーマのstyle.cssが以下のように設定されているかを確認しましょう。
続きを読む