WordPressテーマを自作した時にお世話になったサイト一覧
このブログではアフィリエイト・アドセンス広告を利用しています
当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。
WordPressテーマを自作するにあたって、たくさんのサイトやブログに助けて頂きました。ありがとうございます！
自分の備忘録も兼ねて、お世話になったサイトをご紹介していきたいと思います。
目次（読みたいところへジャンプ！）
テーマ作成の基本でのお役立ちサイト
WordPress技術情報サイト
WordPress日本語ローカルサイト
ここ無しではWordPressサイトすら作れません。自動インストールが嫌いなので、こちらのサイトから最新版をダウンロードして使っています。
人気のプラグインやテーマを探したり、ドキュメントで関数やタグの確認もできます。
WordPressの技術情報は、世界中のブログやサイトで紹介されていますが、最終確認のために必ず公式サイトで確認するようにしています。
フレームワークサイト
ものぐさな私は、なるべく簡単にテーマが完成するようBootstrapを始めとするフレームワークを活用することに決めました。これからWordPrssテーマを作りたいと考えてる方にもオススメですよ。作業時間が半減します。
Bootstrap
フレームワークといえば、Bootstrapというぐらいの絶対的存在ですね。WordPressテーマもBootstrapベースに作られているものも多く目にします。
Bootstrap3日本語リファレンス
使い方の細かいところを忘れた時の教科書。日本語翻訳助かります！
Code部 初心者でも簡単！Bootstrap3のグリッドシステムを始めから丁寧に
Bootstrapのグリッドシステムが一番わかりやすく説明されている記事です。ここに載っている表に何度も助けられています。いつも「mdとsmとxsのどれがどれだっけ？」となってしまうことが多くて…みなさんはそんなことありませんか？私がアホなのかしら。タブレットサイズから縦並びにしたい時などにおさらいさせてもらっています。
Foundation
フレームワークといえば・・・という2強ですね。
9bar フロントエンドを快適に進める為のフレームワーク5選 ～CSS編
9barさんの記事で、BootstrapとFoundation以外にも、おしゃれで使いやすいフレームワークがあることを発見することができました。いろんなフレームワークを使ってテーマを作ってみたいな♪
うぇぶはっく わずか6.9KBの超ミニマルなCSSフレームワーク「Milligram」を使ってみた！
うぇぶはっくさんの記事で、ミニマルな「milligram」というフレームワークを知りました！すごく好み！Less is moreを感じさせる洗練されたフレームワークです。
結果的には、慣れ親しんだBootstrapを使うことにしました…ヘタレですみません。次回は「milligram」でテーマを作ります。その時は、作る過程から公開していきます。そのうち、自作テーマも無料で公開していきたい。
フォントサイト
Fontawsome
目にしたことがない人なんていないんじゃないでしょうか。絵の下手な私が大変お世話になっているアイコンフォントの王様です。
Fontawsome chearsheet
Fontawsomeの公式サイトのチートシートよりこっちの方が使いやすいので、よく利用しています。アイコンを選んでボタンを押すと、コードがコピーされます。なんて親切！
Google Fonts
サイトをおしゃれに見せたい時には、Googleフォントでアクセントとなるタイトル文字を変えています。一覧で字体が見れて使いやすいサイトです。
テーマ作成で行き詰まった時のお役立ちサイト
テーマを作成していて「こんなときどうしたらいいの？」と思った時は即ググりました。ほんとうにたくさんのブログやサイトの丁寧
な説明や他にはない技術情報に助けられました。今回特にお世話になったサイトです。
タブレットとスマートフォンの時にhoverが効かないことに、今更ながら気付きました…そうですよね、クリックじゃなくてタッチですもんね。こちらの記事で無事解決しました。
http://qiita.com/icoxfog417/items/b0594efcf46e7eeb2821
スマホなら、メニューをスワイプで出したり閉まったりしたいですよね？私はそんな機器の特性を活かしたユーザーインターフェースが大好き。
どうやって実現したらよいか迷っていた時に、こちらの記事でTouchSwipeを導入することに決めました。全部試してみたんですけど、TouchSwipeが使いやすく感じました。不安な実装と書かれているところが気がかりではありますが。引き続き動作確認を続けたいと思います。
http://miha5.com/2014/08/4870/
人気記事をPV数順にランキング表示する時に参考にさせていただきました。カスタムフィールドを活用することで、他の解決方法よりコード量が少なくて導入しやすいですよ。
https://webkikaku.co.jp/blog/htmlcss/img-link-click/
スマホで次の記事・前の記事ボタンが全く効かないところ、「スマホ リンク 効かない 原因」で検索して見つけました。こんなニッチな悩みでも、世界で一番利用されているWordPressなら答えがあるのが心強い。こちらの記事で無事解決しました。
タブレット表示にはあまり悩まなかったのですが、スマホになるとイメージする表示にならないところで多々つまづいてしまった時、コサエルさんのこの記事で、一気に悩みが解決！サイトデサインもシンプルでCoolest！
http://rinare.com/wordpress-source-code-syntax-highlight-gist/
プラグインをなるべく減らしたいと思って解決方法を探していたところ、「Crayon Syntax Highlighter」などのコード表示プラグインの代わりにGithubを使えばいいという導入しやすくて素晴らしい答えをいただきました。早速、初めての記事で利用しています。
CSSやJavaScriptの動作結果まで見せたい時には、Codepenを活用しています。
「記事内に追加する画像にクラスをいちいちつけるなんてめんどくさい」と思っていたところ、HUBWORKSさんの記事で即時解決。これでブログ記事作成も時短！
http://webdrawer.net/css/transform.html
ロゴhover時に拡大したかったのですが、回転や移動は知ってたけど拡大って使ったことなかった時に勉強させていただきました。例があるのでわかりやすい説明になっています。
Bootstrapを活用するなら、アイキャッチ画像のimgタグにクラスを追加する必要が出てきます。memocalilogさんのこの記事がわかりやすくて助けて頂きました。女性らしい上品なデザインのサイトなので一見の価値あり！
「こんなフェミニンで素敵なデザインのサイト管理人はきっと美人に違いない」と確信しています。
他にも、「JavaScriptをWordPressで書く時って囲まなきゃいけなかったよね、でも忘れた！」「あれ？Divタグの背景画像が反映されない」なんていうちょっとした時にも、Web上にヒントや答えがあってすごく助けていただきました。
みなさんの教えがなければ、WordPressテーマは形にならなかったに違いありません。
この場を借りて心からの感謝を伝えさせていただきます。ありがとうございました！そしてこれからもお世話になります。
