ブログリニューアル

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

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

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

  2. wordpress

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

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

  3. ブログ

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

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

  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  5. Tutorial

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェットを乗せる方法

    みなさんこんにちは、mayukouです。さて今回は、wordpres…

  6. ブログ

    ポートフォリオサイトをリニューアルしました

    こんにちは。mayukouです。唐突ですが、自分の今の力を目に見え…

コメント

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. 写真

    現像で素人感からプロっぽく!Macの写真アプリが素敵
  2. Illustrator

    スキャンした画像をIllustratorでベクターにする方法2 (追記)
  3. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
  4. Photoshop

    点線もかける!Photoshopでラインを引く方法を新たに発見(ストローク機能)…
  5. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate …
PAGE TOP