ブログのデザインを一新!シンプルさが際立つフラットデザインで作ってみました

Douraku flatDesign

ブログを始めた当初にポチポチとデザインを修正していたのですが、思いきってフルリニューアルしちゃいました!


フラットデザインなドウラク

お世辞にも完成したとは言えない状態でブログを運営していたのですが、「このままではダメだろ!」と一念発起してデザイン制作。

どうせつくるならオリジナルっしょ!という事でwordpressのオリジナルテーマに挑戦!

デザインコンセプトは流行りのフラットデザイン。

フラットデザインはパーツの作り込みが細かくない分作るのは簡単(その分、余白などに気を使わないとヘボくなる)なので結構早めにデザインは完成しました。

フラットデザインのコンセプトを踏襲してジャンプ率高めのレイアウトを心がけました。

WPのオリジナルテーマ作りは実は簡単・明瞭

オリジナルテーマを作るには一通りサイトとしてコーディングする必要があります。

その後、wpで使える形に変換していく。というのが基本的な流れです。

wpで使える形にするのって難しそう。なんて思っていた頃もありました…

既存テーマはわかりにくい

以前のデザインは既存テーマのTwentyTenFiveをイジっていました。

既存ファイルのどのソースコードがブログのどの部分なのか位置を割り出してCSSなどでレイアウト、装飾等としていました。

既存テーマの改変ということを経験してのオリジナルテーマ作りだったのですが、オリジナルテーマ、イージーでした。

なぜ最初からオリジナルテーマでやらなかったのか?と思うくらい簡単。

既存テーマを改変するにあたって1番手こずった所はすでに書かれているPHPでどう表示しているのかが分からない箇所が多かった所です。

特にテンプレートタグとテーマ自体のfunctionなどが入ってくるともう意味が分からない状態になってしまいます。

オリジナルテーマは自分の手で作り込める

オリジナルテーマで作成すると必要なコードしか使わない、自分で作り上げるから入力されているコードが何を表示して、どこに表示されるかがすぐに分かります。

「オリジナルテーマってなんだか難しそう…」なんて思っていたのですが、その逆でした。

オリジナルテーマ作りに躊躇されている方がいらっしゃいましたら、是非挑戦してみてください!

オリジナルテーマ作りの際、参考にしたサイト

みんな知ってるドットインストール。

今回のオリジナルテーマ作りの際に参考にさせていただきました。

ここの動画を見るだけでwp用テーマが簡単に作れちゃいます!

次はスマホ用も作成せねば…

PC用はまだまだ完全でない箇所が多いので今後も修正していくとして、スマホ用のリニューアルもしていきます。

PC用のベースがあるのでさほど苦労はしないと思いますが、できれば早めに作りたいと思っています。

何をどう作ったかは随時アップ

今回のフラットデザインで制作した箇所、コードを導入した際に苦労した点などなどを記事にしていこうと思います。

オリジナルテーマを作ろうと考えている方に少しでも役にたてるような記事を書きたいと思います!

実はそろそろ1年

ドウラクを開始してからそろそろ1年が経とうとしています。

1年の節目にデザインを固められたのはよかったです。

新たな気持ちでブログ道を突っ走りたいと思います!