• トップページ
• CSS

GatsbyでSassを使う

GatsbyでSassを使う方法を調べてみました。

インストール

npm install --save node-sass gatsby-plugin-sass

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タグが収まっています。

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

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

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

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

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

続きを読む

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

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

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

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

カラーミーショップのカートの中のステップ画像を変更する方法

古い記事のため現在とは状況が異なる場合があります。ご注意ください。

カラーミーショップのカートの中の買い物のステップ画像（カートの中、お客様情報の入力、配送設定の入力、お支払い方法の設定、確認、完了）の画像を差し替える方法です。

続きを読む

Macで.epubファイルの中身を確認する方法

.epubファイルは基本的にはZipファイルです。
そのため、拡張子を.zipに変えて解凍してやれば中身を確認することができます。

Macのアーカイブユーティリティーで解凍すると、.cpgzなどの拡張子書き換わってループして、いつまでも解凍できないことがあります。

その場合は、Unarchiverなどのほかの解凍ソフトで試してみると良いでしょう。

以下のように内容を確認することができます。