シンタックスハイライターのPrismを使っているのですが、Reactのコードを掲載するときにコンポーネント内のHTMLタグが残っていると消えてしまいます。
<と>でタグの<と>を置換すると正しく表示されます。
CodePenでご覧ください。
Font AwesomeというアイコンのフォントセットをReactで使うための方法を紹介します。
react-fontawesomeというnpmパッケージを使用します。
yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
まずApp.jsの中で必要なライブラリをimportします。
free-brands-svg-iconsは有名な会社のアイコンのセットで”apple”や “microsoft”や “google”などと表示することでそのアイコンを表示できます。
free-solid-svg-iconsにはUIに使うアイコン一式が入っています。
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons
library.add(fab, faCheckSquare, faCoffee)//あらかじめ使用するアイコンを追加しておく
そして、実際にアイコンを表示するコンポーネントでは以下のようにアイコンを呼び出します。
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Icons = () => (
<div>
チェック:<FontAwesomeIcon icon="check-square" />
コーヒー:<FontAwesomeIcon icon="coffee" />
Apple:<FontAwesomeIcon icon={['fab', 'apple']} />
Microsoft:<FontAwesomeIcon icon={['fab', 'microsoft']} />
Google:<FontAwesomeIcon icon={['fab', 'google']} />
</div>
)
export default Icons
実行すると以下のようになります。(上記ソースのままだと横並びになります。)
CodeSandBoxを使用した動作サンプルはこちらです。
npm install --save node-sass gatsby-plugin-sass
続きを読む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タグが収まっています。
元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。
Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む
WordPressのテーマディレクトリ(フォルダ)の中にJavaScriptや画像を置いて表示させたい場合に、テーマ内でテーマのURLを自動的に表示できると便利です。
Google ChromeでWeb開発する際にいつまでもキャッシュが残って更新内容が表示されない場合があります。このような場合に便利なのがハードリロードです。
続きを読む
WordPressの子テーマが壊れていいます、というエラーが出た場合にチェックしたい箇所をメモっておきます。
子テーマのstyle.cssが以下のように設定されているかを確認しましょう。
続きを読む
古い記事のため現在とは状況が異なる場合があります。ご注意ください。
カラーミーショップのカートの中の買い物のステップ画像(カートの中、お客様情報の入力、配送設定の入力、お支払い方法の設定、確認、完了)の画像を差し替える方法です。
.epubファイルは基本的にはZipファイルです。
そのため、拡張子を.zipに変えて解凍してやれば中身を確認することができます。
Macのアーカイブユーティリティーで解凍すると、.cpgzなどの拡張子書き換わってループして、いつまでも解凍できないことがあります。
その場合は、Unarchiverなどのほかの解凍ソフトで試してみると良いでしょう。
以下のように内容を確認することができます。