この記事の目的
1.簡単にローカル環境にWordpressを設定する。
2.Gitでバージョン管理ができるように設定。
3.簡単にコードを書けるようにエディターを入手する
4.簡単にサイトを作るためにWordpressでbootstrapを使えるようにする。
5.ちょっとした動きなどを簡単に作るためにwow.jsとanimate.cssを使えるようにする。
6.製作がさらに捗るようにツールを入手する
7.実際に作っていく
1.簡単にローカル環境にWordpressを設定する
XAMPP（ザンプ）を使った開発環境の構築、とかではなく、以下のInstantWordpressを使えば５分でローカルに開発環境を作ることができる。（Windowsのみなので、Macの場合はMAMP等で設定が必要）
InstantWordpressのインストールと設定方法などは無数に記事があるため割愛。
設定方法などの記事。
https://nelog.jp/instant-wordpress
Instant WordPressのダウンロードは以下より。
http://www.instantwp.com/
2.Gitの設定
Gitを使えるようにすることでバージョン管理ができるようになるため、開発環境がかなり便利になる。
Gitについての簡単に解説は以下の記事を参照。
Gitって？
個人でバージョン管理をするなら以下の設定で簡単にできる。
Windowsで一番簡単なGit導入方法とは？
3.エディターを入手する
使いやすいものを入手する。
おすすめはこちら
【高機能エディタ】 ATOMが一番使いやすいかもしれない
4.簡単にサイトを作るためにWordpressでbootstrapを使えるようにする
フレームワークを読み込むようにしておけば、簡単に今風のデザインでレイアウト作成ができるので、bootstrapの設定をしておく。
【wordpress】 BootStrapを使ってwordpressテーマを自作する方法1
5.ちょっとした動きなどを簡単に作るためにwow.jsとanimate.cssを使えるようにする。
上記と同じくcssのフレームワークを使ってちょっとしたアニメーションをクラス指定のみで実装することができるように、以下wow.jsとanimate.cssの設定をする。
【HTML/CSS】 簡単にアニメーション効果を与えるAnimate.cssとwow.jsの使い方
6.製作がさらに捗るようにツールを入手する
ツールは探すといくらでもあると思うが、特に使いやすいツールを２つ紹介。
clibor
クリップボードをいくつも記録しておくことができるので、コピペがかなり使いやすくなる。定型文の読み込みも容易。
http://forest.watch.impress.co.jp/library/software/clibor/
screen presso
スクショを撮って注釈を加えるときに便利なツール
https://nelog.jp/screenpresso
gimp
photoshopのフリーソフト版のような立ち位置のソフトで、使い方などは似ている。photeshopを触ったことがある場合は使いやすいと思うが、そうでない場合は学習コストがかかるが、覚えて損はないと思う。
http://forest.watch.impress.co.jp/library/software/gimp/
