ブログリニューアル

wordpress

ブログリニューアルしました。そのときやったことなど。


3連休まっただ中!ちょっといつもよりグダグダな生活です。
福岡はあいにくの雨ですしね。

今回、あまり満足してなかった現状のデザインを打破するために、一年ぶりにリニューアルしました。※まだ今も構築中なので、おかしな部分があるかもしれませんので、温かい目で見ていただけると幸いです。

スポンサードリンク

 

 

 

さて、リニューアル前と後でどのように変わったか見ていきましょう。

リニューアル前のデザイン

以前のブログデザイン

グランジ&オーガニックな感じで表現していました。これを公開したのは、約一年ほど前になります。これに飽きて、ほかにも無料のテンプレートなど使っていました。

 

リニューアル後のデザイン

新しいデザイン

 

デザイン変更のポイント

読みやすくすっきりさせたフラットデザイン。
ホワイトスペースを活かして、カフェの落ち着き感を表現しました。
アクセントカラーの赤色ベースで、多色使わない。

 

これにより、カフェのサードプレイス感(家でもない職場でもない第3の居場所)を表現できたかな…

 

 

制作にかかった時間は…

デザイン…1日
コーディング…3、4日
テンプレート化(wordpress組み込み)…2時間

でした。
意外とテンプレート化に時間をかけませんでした。
といっても、まだ細かい設定終わっていませんが(笑)。

コーディング

コーディングでは、レスポンシブデザインを採用しています。
ブレイクポイントは、1024px、880px、620px、480pxという感じです。

 

wordpress組み込み

WordPress構築に参考にしたサイトはweb design recipeさん。

以下がそのリンクです。

wordpressテンプレート化

http://webdesignrecipes.com/first-time-wordpress-origin-theme/

ぱんくずリスト

http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/

これらのページを見ればwordpressブログを作ることができます。

仕事でも、いろいろテンプレートを作ったので、このときはこのタグを使う、など設定を覚えていたのも早くなった理由かもしれません。

参考にした本

さらに、この本はいつも手元にあります。


オリジナルテンプレートを作るときは、この本もいつも参考にしています。
高度なことは書いてなく、個人用ブログなどシンプルなオリジナルテンプレートを作りたい!という時にオススメです。

記事のコメントってどうやって表示するんだったかな?とか、ページャー付けるにはどうしたらよかったかな?なんていう細かいパーツを形成していくときに、辞書的な感じで使っています。

ブログテンプレート作成の時は、Web design recipeさんと合わせていつもこの本を開いています。

最後に

ということで、休日などの合間をぬってデザインを一新しました。
以前書いていた一年前ほどからのブログ記事も消えてしまいましたが、逆にゼロからスタートできるということで、がんばろうと思います。

これからも少しずつ手を加えていくとは思いますが、なんとかリニューアル終えてよかったです。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法

    こんにちは。mayukouです。何度か著者である立花さんのブログ記…

  2. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!

    みなさんこんにちは、mayukouです。過ごしやすい日が続きますが…

  3. wordpress

    wordpressバックアップツールの決定版!All in one Migration のプレミアム…

    こんにちは、webデザイナー5年目のmayukouです。wordpr…

  4. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  5. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  6. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuoka vol.7」に参…

    みなさんこんにちは、mayukou です^_^知識に投資することって…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介
  2. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  3. グッズ

    第二の脳になる?Kindle Paperwhite wifiを一週間使ってみての…
  4. デザイン

    楽天ショップのデザインの参考に!おしゃれな楽天ヘッダー7選
  5. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
PAGE TOP