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で対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む

Gatsbyでfaviconを変更する方法

Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。

faviconはブラウザのタブなどに表示されるアイコンです。

続きを読む

gatsby-imageで画像を表示する方法

Gatsbyを使って画像を表示する方法です。dev.toに参考になる記事があったのでこちらをもとに設定しました。

続きを読む

Gatsby + netlifyでフォームを送信する方法

netlify上でGatsbyを使ってフォームを作る方法を調べたのでメモしておきます。
続きを読む

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

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

続きを読む

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

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

githubにプッシュする際Permission denied (publickey)エラーが出る場合の対策

githubのリポジトリにpushする際に公開鍵に関するエラーが出てpushできなかったのでメモしておきます。

Pushing to git@github.com:ユーザー名/リポジトリ名.git
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

githubの公開鍵設定の項目を読んで以下の設定を試しました。

~/.ssh/config の設定を以下に設定するとpushできました。

Host *
 AddKeysToAgent yes
 UseKeychain yes
 IdentityFile ~/.ssh/id_rsa

私の場合はconfigの設定を自分でカスタマイズしていたのがエラーの原因になっていたようです。

Coreserverでwww付きURLをwwwなしのURLに301リダイレクトするための.htaccessの書き方

Coreserverでwww付きURLからwwwなしのURLのページに301リダイレクトする際の.htaccessファイルの書き方です。

下記のスクリプトを記述して.htaccessという名前で転送元のドメインのトップディレクトリに設置します。
example.comをご自身のURLに変更してください。

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^(.*)$ http://expamle.com/$1 [R=301,L]