先日、Simplicityというテーマを作りました。
その作成の過程において、いろいろなツールやサービスを利用しました。そのおかげで、かなり作業がはかどりました。
それで今回は、テーマ作成開始時から現在まで、「テーマ作成のために用いたサイトで便利だったもの」や「他のものを使ったので使いはしなかったけど便利そうなサイト」のまとめです。
もちろんテーマのカスタマイズに使うにも便利なものたちばかりです。
photo by Sean MacEntee
目次
コード編集
Instant WordPress
5分とかからずにWordpressローカル環境構築することができます。やはりテーマをいじるならローカル環境です。
詳しくは以下を参照してください。
Windowsに「Instant WordPress」で超簡単にWordpressローカル環境を構築する方法
Sublime Text
Sublime Text: The text editor you’ll fall in love with
Emmetを利用して少ない文字数で、大量のコードを書くために使用。CSSを書くには、これがないと書く気が起きない。
Emmetチートシート
Emmetは、使いこなせれば、HTML＆CSSの編集に絶大な威力を発揮しますが、短縮コードを覚えていないと意味がありません。当然僕は、すぐ忘れてしまうので、こういったカンニングペーパーに頼ることになります。
HTML・CSSクイックリファレンス
HTMLやCSSの使い方に迷ったらとりあえず調べる。
color-sample.com
テーマに使用する色選びに迷ったら。
日本語版 WordPress チートシート
昨日書いたコードすらすぐに忘れてしまう僕には必需品。とりあえずこれだけ押さえておけば、テーマの70％は作れそう。その他に、WordPressテンプレートタグ チートシートなどもある。
WordPress日本語フォーラム
テーマ作成に行き詰まったら、もちろん質問してもOKなんだけど、フォーラム内をサイト内検索すると、大抵の解決策は出てきます。ブラウザから、手軽にサイト内検索するには、以下のブラウザ拡張を使用すると簡単にできます。
ChromeやFirefoxで手軽にGoogleのサイト内検索をする方法
HTML整形ツール
インデントの崩れた、HTMLを綺麗に整形したいときに使用。
ProCSSor（CSS整形ツール）
「ProCSSor（現在サービス中止）」
スタイルシートを、好みの書式で整形することができるツールです。
CSS整形ツール「ProCSSor」が便利、CSS記法を綺麗に統一し最適化してくれる
HTML特殊文字
HTML特殊文字もすぐに忘れるのでカンニング。
正規表現チェック
正規表現をコードに書く前に、手軽に動作チェック。
その他の正規表現ツールは以下。
WEB便利ツール
Web制作やシステム開発に便利な無料ツール集です。
Whois、diff、IPアドレス確認、画像リサイズ、パスワード生成、各種エンコードなどの開発中突然利用したくなるツールが揃っています。
テスト・テンプレートチェック
Firebug
HTMLの要素チェックや、スタイルのチェックなどに。Chromeなら開発者ツール。
WordPressテーマユニットテストデータ（日本語版）
いろいろなHTMLタグの表示チェックなどに。利用すると、わざわざチェック用の投稿をする手間を大幅に省けます。Wordpressを利用する時に想定される使い方に対応した、記事がインポートするだけで作成できます。テーマをテストするには絶対に入れたい。
Google構造化データテストツール
URLを入力するだけで、構造化データマークアップを手軽にチェックすることができます。
W3C HTML5 バリデーション
The W3C Markup Validation Service
HTML5の記述におかしなところがないか、チェックしてくれます。
Nu Html Checker
こちらも、HTML5チェッカーです。個人的にはこちらの方が使いやすくて好みです。
HTML5 Outliner
ChromeのHTML5アウトラインを手軽にチェックできる拡張。WEBツールとして利用できるHTML 5 Outlinerもあります。
HeadingsMap
HTML5のアウトライン構造だけでなくセクション情報もチェックできるブラウザ拡張です。Firefoxアドオン、Chrome拡張としてそれぞれ利用できます。
テーマバリデーションサービス
The Web Template Verification Service
WordPressテーマ的におかしなところがないかチェックする時に使用。
Theme Check
WordPress › Theme Check « WordPress Plugins
WordPress管理画面から、プラグインでテーマをチェックすることができます。すべてを修正するのは難しいけど警告部分くらいは直したい。
AntiVirus
WordPress › AntiVirus « WordPress Plugins
テーマのウイルスチェック。一応チェック。
noindex、nofollowのチェック
noindex、nofollow、nofollowリンクなどをチェックできるChrome拡張。FirefoxだとSeerobotsアドオンが便利。
サイトのnoindex、nofollowを手軽にチェックできるChrome拡張＆Firefoxアドオン
Xdomain(エックスドメイン)
ドメイン取得＆無料レンタルサーバー Xdomain(エックスドメイン)
無料でWordpressをインストールして使用できるサーバー。ローカルでテーマを開発していても、サーバーにアップロードしたときにエラーが出ることがあるので、サーバー上でもチェック。
PageSpeed Insights
テーマで使用されている、画像圧縮をチェックしたり、スマホのユーザーエクスペリエンスなどのチェックに。
モバイルフレンドリーテスト
今や、PCよりモバイル端末から閲覧されているサイトも多いかと思います。モバイル対応されていないサイトは、Googleのモバイル検索順位に影響をおよぼします。
モバイルでのGoogle評価を落とさないためにも、カスタマイズした後などはチェックしたほうがいいかも。
GTmetrix
GTmetrix | Website Speed and Performance Optimization
タイムライン機能などで読み込みに時間のかかっているもののチェックに。
レスポンシブチェック
Responsive Checker
Responsive Checker ｜ レスポンシブデザイン検証サービス
いろいろな端末の状態から、レスポンシブデザインをチェックすることができます。
Responsive Design Testing
240～1024ピクセル幅のサイズを一気にチェックすることができます。
Demonstrating Responsive Design
Demonstrating Responsive Design
いろんな端末を動的にチェックすることができます。
SNS
Twitter Card validator
Card Validator | Twitter Developers
Twitterカードの仕様を見たり、HTMLタグのチェックに。
Facebookデバッガー
Facebook OGP用のタグが正しく入力されているかなどのチェックに。
WEBアイコンフォント
Font Awesome
Font Awesome, the iconic font and CSS toolkit
画像のアイコンを使うよりも、リクエスト数は減るし、軽くて表示も早いし、手軽だし、色も変えられるしで、テーマにワンポイント置きたい時に便利。
Genericons
Genericons – a free, GPL, flexible icon font for blogs!
個々のアイコンは、実際にテーマで使ったわけではないけど、こちらもよさそう。
Foundation Icon Fonts 3
Foundation Icon Fonts 3 | Playground from ZURB
こちらも良さげなアイコンフォント。
IcoMoon
IcoMoon App – Icon Font & SVG Generator
自作のアイコンフォント作成に。Iconvau.ltでも手軽に作成できます。
Perfect Icons
Perfect Icons – A social icon creation tool.
シェア用のアイコンボタンをアイコンフォントで手軽に作れる。
画像編集関係
TinyPNG
TinyPNG – Compress PNG images while preserving transparency
テーマに使用するPNG画像を圧縮するために使用。ドラッグ＆ドロップするだけで画像を圧縮することができます。
画像によってはサイズを50％以上削減できるものもあります。テーマに使用するPNG画像は、少しでも、サーバーの負担を減らせるようこのサービスで圧縮。
JPEG & PNG Image Compression
JPEG & PNG Image Compression – Media4x
こちらはJPEG画像を圧縮するために使用しました。
Favicon Maker
画像から手軽にファビコンを作成。
PNGify Me
PNGify Me | Icon Creator, Generate and Download Icons, Mobile Icons
2000種類以上のPNGアイコンをカスタマイズしてダウンロードできる。
画像など
今回のテーマでは、画像はほとんど使用しなかったけど、画像を使う場合は。
著作権表記無しで使用できる高解像度の画像
クレジット不要なので、手軽に使えます。
- Morguefile.com
- freeimages
- PublicDomainPictures.net
- Pixabay
- picjumbo
- Unsplash
- jay mantri
- Foodie’s Feed
- Pexels
- Picography
- ぱくたそ/PAKUTASO
- 写真AC
※利用、改変は、サイトのライセンスを必ずチェックしてください。
アイコンなど
画像のアイコンを探すなら。
まとめ
ここで紹介したものを利用することによって、作業を楽に進めることができました。
テーマ作成は、少しコードを書いてはチェック、書いてはチェックの繰り返しです。目視でソースをチェックしていると、いつまでたっても終わらないので、いろいろ使うことによってかなりチェック時間を短縮することができました。
