数日前に当ブログのデザインを変更しました。（それに伴い、ブログ名も変更しています。）
枠や見出しなど、これまで適当で文章が読みづらかったのが、だいぶ見やすくなったのではないかと思います。
今回は自分へのチャレンジとして、デザインからWordPressのテーマまで一から作ってみました。
デザインの作成
もともとデザインが得意ではないので、完成して見返したり、他のブログと見比べたりすると、やっぱり「みんなデザインが上手い」と思ってしまいます。
他のブログに負けないようにと息巻いてデザインを作りこんでもキリがなくなるので、とりあえず一区切りついた段階でデザインを決めてWordPressに組み込んでみました。
デザインで気をつけた点は「本文が読みやすく」なので、本文と本文以外の境目や、タイトル・見出しの見分けがはっきりするように意識してみました。
それ以外は、作りこんでも深みに嵌りそうだったので、基本シンプルになるように、やっぱり適当に作ってみた感じです。
以下、デザインした部分
・ロゴ
・メニュー
・メインカラム
・サイドカラム（ウィジット部分）
・見出し
上記を全体的にバランスを見ながら、デザインしていきました。
WordPressのテーマの作成
作成したデザインを、まずは通常のサイトと同じようにHTML＋CSSにコーディングしました。
それからWordPressのテーマに変換していきます。
とはいっても、ブログにWordPressを使ってはいますが、テーマを一から作ったことはないので、どうすればいいのかわかりません。
そこで以下の2つのサイトを参考にしました。
とても丁寧に説明しているので、全くの初心者の方でもなんの問題もなく作成できました。
ドットインストール
WordPress入門 (全23回)
プログラミングを3分の動画で教えてくれる学習サイト。
動画で解説しながら教えてくれるので、今何をしているのかが一目瞭然で、見ているとおりにコードを書くだけでプログラムが完成しているという驚きの体験を得られます。
WordPressのテーマ作成についてもレッスンがあったので、一から教えていただきました。
★動画ですんなりわかりやすい
ウェブデザインレシピ
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
一つのテーマに対して一つの記事で解説が完結している完成度の高いブログ。
こちらも同じく、初心者の方向けにWordPressのテーマ作成について解説してくれている記事があったので、上記ドットインストールと合わせて読むと理解度が高まり助かりました。
★初心者にもわかりやすい詳しい解説
実際に参考にして作成するまでの流れ
上記、2つのサイトで説明されている箇所に若干の差があるので、両方みて作成するのがいいと思います。
全くの初めての状態だと、ドットインストールのほうが動画でわかりやすい（個人的には）ので、まずはドットインストールを見て、CSSのid、classを動画と合わせながらながらWordPressテーマに変換していきます。
テーマの作成に慣れてきたら、次にウェブデザインレシピを見て、ドットインストールで説明されていなかった部分を補完するようにテーマを整えていきます。
と、上記の流れで、なんの問題もなくテーマの作成が出来ました。
特に引っかかった点もないので、こちらで何か気をつけた方がいい点を挙げることもないくらいです。
（ローカル環境にXAMPPを使用していて、パーマリンク設定の時にリンク切れを起こしたのは別のお話）
まとめ
ブログのデザイン変更については、以上で一段落します。
WordPressはプラグインなど拡張性が高いので、今後も気になる点を細々直していきますが、今回、一からWordPressテーマを作成したことで、いろいろ理解しやすい下地ができたと思います。
実際、ウェブデザインレシピの他の記事で、WordPressのカスタマイズについていろいろ解説してくれていますが、function.phpの編集など以前は敬遠していた内容もすんなり読めるようになりました。
これからも、使いやすくなるように、少しずつブログのカスタマイズを続けていこうと思います。
それでは、今日のところはこの辺で。
追伸：いろいろ参考にして作っていくなかで、部分的に参考元のサイトに似てしまった部分もあるかと思いますが、ご了承ください。。
コメント