ウェブデザイナー、
子育てとフリーランス

公開以来、初めて当ブログをリニューアルいたしました。
とはいえ、テイストや構造はそのままにレイアウト変更だけですので、あまり変わった印象はないかもしれません。
最低限のリニューアルですが、気分的にもリフレッシュになりました！

リニューアルで考えたこと

以前からどうリニューアルしようかなーと考えてはいたのですが、妙に長いブログ名にしてしまったために、シンプルなデザインにしないともっちゃりするなーと悩みました。
前のものも気に入っていたのと、kunugi designのロゴカラーを活かしたものにしたかったので、背景画像などはそのままで、少しレイアウトにアクセントをつけて変更するだけにしました。

Google AdSenceのバナーは構築時のままだったので見直してみると、最近はレスポンシブでバナーの形状が変化する設定があるのを知りました。
以前はスマホで閲覧するとバナーの横幅が長くてレイアウトが崩れたりしておりまして（汗）、制作する上ではこういう外部サービスの機能もいろいろ自分で試してみないとわからないことがあるなーと思ったりしました。
「続きを読む」の直後にバナーを入れたかったのですが、タンプレートにでは出来なさそうだったので「Master Post Advert」というプラグインで対応しました。
（このプラグインで指定するバナーはレスポンシブタイプでは動かなかったので固定幅のバナーを設定しました。）

以前はカテゴリリストはサイドバナーに埋もれていたのですが、メニューとして独立させました。
今更ですが、メニューがある方がどんなことが書いてあるブログか一目でわかりやすいですね。。
ヘッダー付近にあることで、SEO的にも良いかと思います。

フォントは本体サイトのA1明朝と、GoogleフォントのQuattrocento、本文のゴシックは游ゴシックを使用しています。すべて自分が好きなフォントです！
ロゴをGaramondで作っているのですが、GoogleフォントのEB Garamondは日本語と組み合わせると少し読みにくい。。このQuattrocentoは数字の可読性も高く、少しGaramondにも似ている気がして使わせていただきました。
以前は本文もすべてA1明朝にしていたのですが、やはりゴシックの方が可読性が高いなーと思い、本文の日本語だけはゴシック体にしました。

WordPressリニューアルの手順

あまり案件でWordpressを触らないもので、Wordpressのリニューアル自体がまだ２回目でした(⌒-⌒; )
参考になるものではないですが、、自分の忘備録として手順を記載しておきます。
今回はテーマだけを変更するのが目的でしたので、「ローカルにWordpressを入れてテーマの動作確認」→「本番にテーマファイルだけ更新」という手順で行っています。

1.MAMPでローカル環境を作る

私はMacなので、XAMPPよりMAMPが良いというネットの情報を鵜呑みにしてMAMPをインストールしました。
MAMPに関してはこちらのサイトが詳しくてわかりやすかったです！
MAMPの使い方と設定

2.ローカル環境にデータベースを作成

テストブログ用にMySQLデータベースを新規に作成します。
上記と同じサイトの解説を参考にさせていただきました。
MAMPのphpMyAdminでMySQLデータベースの作成 – MAMPの使い方

3.ローカル環境にWordpressをインストール

WordPressの最新版をダウンロードして、テスト環境にインストールします。

サーバーからxml出力しローカル環境にインポート、
FTPで必要ファイルをダウンロードしローカル環境に移動

本番環境のデータベースをローカルのテスト環境にコピーする方法もあると思うのですが、データベースとかいじるの怖い〜。
なのでエクスポート＆インポート機能を利用しました。
画像などのuploadフォルダ、テーマフォルダをダウンロードします。
プラグインはインポートできないのでローカル環境で改めてインストールする必要がありました。
サイト移転時にWordPress記事をXML形式でエクスポート＆インポートする手順

ローカル環境でテーマを変更

HTMLはあらかじめWinやMacで動作確認しておいたものをテーマに移植しました。
大きなレイアウト崩れもなく、ホッ。

ローカルで作成したテーマや新たに作成したCSSファイルなどを本番環境にコピー

今回は構造変更もなく、テーマのコピペだけだったのでメンテナンスモードにもしませんでした。
本番環境のテンプレートを更新し、プラグインを少し調整したら完成です♪

今回はSassを初めて使ってコーディングをしてみました。次回はSassについてもブログに書きたいと思います。

今年こそは、kunugi designのサイトの方もリニューアルしたいです！（毎年言ってる）