ブログリニューアル

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. ブログ

    明けましておめでとうございます。今年の抱負

    みなさんこんにちは、mayukou です。年が明けてだいぶ経ちました…

  2. jetpack

    wordpress

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

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

  3. Web Design

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

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

  4. Web Design

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

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

  5. Web Design

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

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

コメント

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  2. デザイン

    お店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
  3. iPad Pro

    今や欠かせない存在!iPad Pro “9.7を購入して、約3ヶ月が…
  4. jetpack

    wordpress

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

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つの…
PAGE TOP