【Visual Studio Code】コードフォーマッタ Prettierを使う方法

Pretterで何ができるか？

コードのインデントや改行、セミコロンの有無などのフォーマットをファイル保存時に自動で行います。問題があるコードではエラー表示をしてくれます。

エラー時の表示
続きを読む

Google ChromeでSVGファイルが表示されない場合の対策

Photoshopで書き出したSVGファイルがChromeで表示されない場合の対策方法を紹介します。

SVGファイルをテキストエディタで開き、img/pngとなっている部分をimage/pngに修正します。

PrismでReact(jsx)のコードの HTMLタグが消える際の対策方法

シンタックスハイライターのPrismを使っているのですが、Reactのコードを掲載するときにコンポーネント内のHTMLタグが残っていると消えてしまいます。

対策方法

&lt;と&gt;でタグの<と>を置換すると正しく表示されます。

Prismでjsxを選択したときにHTMLタグが表示されない

サンプルコード

CodePenでご覧ください。

Reactでfont awesomeを使う

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

実行すると以下のようになります。(上記ソースのままだと横並びになります。)

font awesome
実行結果(スタイリング済)

動作プログラムサンプル

CodeSandBoxを使用した動作サンプルはこちらです。

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

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

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

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

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

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

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

続きを読む

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

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

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

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

© 2019 atnr.net. All rights reserved.