gatsby-plugin-page-transitionsはv2対応してないのでビルドが通らない

gatsbyのページ遷移アニメーションをつけるプラグインgatsby-plugin-page-transitionsは廃止されたAPIを使用しているのでgatsby buildコマンドでのビルドが通りません。(gatsby developは通ります。)

Netlifyにもデプロイできないので使うのをやめました。ちなみにエラーメッセージは以下の通りです。

error 
Your plugins must export known APIs from their gatsby-browser.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby Browser APIs

- The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API.

GatsbyでSassを使う

GatsbySassを使う方法を調べてみました。

インストール

npm install --save node-sass gatsby-plugin-sass
続きを読む

WordPressのGutenbergで記事のパーマリンクを設定する方法

WordPressの投稿の編集をGutenberg(グーテンベルク)で行う際に、パーマリンクの設定欄がわかりづらかったので、設定方法をメモしておきます。

記事タイトルをクリックすると表示されます。

GutenbergでのPermalink設定

Gatsbyで作ったサイトをGoogle Search Consoleに登録する

サイトをGoogle Search Console(サーチコンソール)に登録する場合、適切なGoogle Analyticsタグが入っていればすぐに登録できます。しかし、Gatsbyで制作したサイトにgatsby-plugin-google-analyticsでGoogle Analyticsのタグを入れている場合うまく登録できませんでした。

今回はGoogle Analyticsのタグを使わずにSearch Consoleに登録する方法を試してみました。

続きを読む

gatsby-plugin-sitemapを使う

Gatsby.jsでサイトマップを作成するプラグインgatsby-plugin-sitemapの設定方法です。

続きを読む

GitUpでuser.nameやuser.emailに関するエラーが発生する場合の対策

GitUpでCommitする際にuser.nameやuser.emailのエラーが出ることがあります。gitで名前やEmailを設定していないためです。以下のコマンドでこれらの値を設定できます。

続きを読む

PHPのcheckdnsrrでDNSレコードの存在が正しく確認できない場合の対策

PHPのcheckdnsrrでDNSレコードを検索してサーバーの存在を確認することができますが、場合によって存在するサーバーが正しく認識されないことがあります。

続きを読む

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