ブログリニューアル

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. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  2. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法

    みなさんこんにちは、mayukouです。みなさんはwordpr…

  3. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン

    近頃、調子に乗ってwordpressにいろいろプラグインを入れてパワー…

  4. Web Design

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

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

  5. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

コメント

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Illustrator

    webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法
  2. illustration

    対面打ち合わせ一切なし!イラスト制作の仕事の流れ
  3. ブログ

    色々宣言!?2016年の振り返りと来年の抱負
  4. Photoshop

    アナログにも負けない水彩画風表現を!Photoshopで混色しながら色を塗る方法…
  5. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
PAGE TOP