3年半振りにサイトを大改装しました。

2013-03-23ノルウェー


タイトルにもあるとおり、3年半振りにサイトを改修しました。
着手したのは昨年10月 少しずつ水面下で作り直しをしていたので気がつけば約半年かけてました。
前のスタイルで始めたのが2009年。この3年半でネット環境も大きく変わり、スマホ・タブレットなどのモバイルデバイスのシェアが大きく膨らんでいました。
というわけで、サイトも一応モバイル対応しています。とはいえまだまだ発展途上なのでデザインも荒削り、不具合等があるとは思いますが、ぼちぼち手入れして行きたいと思います。

今回取り入れた点

いちおう、管理人はシステム屋もやっているので、今回はちょっとシステム的な話しを交えて変更点を備忘としてざっと・・・
(自分用のまとめなので、???な方もいらっしゃるかとは思いますが・・・)

1:カテゴリーをスリム化しました。

カテゴリー画像
今回一番したかったのが、このサイトの方向性を明確にすること。現在進行中のプロジェクトを主体としたコンテンツ構成にしました。
一つ目が「ノルウェー」ここでは北欧の小国ノルウェーのいいとこ取りを目指してみます。(ノルチョコ計画もこの一端)
二つ目が「旅育」子連れ旅をもっと一般化して日本を元気にしようと言うプロジェクト
三つ目が「造景」と名前は昔あった某雑誌名をそのままですが、地域づくりを支援することができないかと色々考えて行きます。
この3つは全く異なる様ですが、私の頭の中では上手くまとまってきています。(頭の中を整理するのに何度もマインドマップを書いたりプレゼンしたりしてましたが)
それ以外の記事は「コラム」としてまとめています。
各カテゴリーの説明はそれぞれを参照して下さい。

2レンタルサーバーを変更

さくらロゴ
ここからが、からくり的なことになります。
レンタルサーバーを3年半お世話になったチカッパ(いつの間にやらロリポップに買収されてた)からさくらインターネットへ変更。変える予定はなかったのですが、後述する「するぷろ」を使いたいと言うのがあったり、再構築するにあたって本番環境で試行したかった(当初はさくらのお試し期間を利用)など諸々の理由から変更しました。この辺りは完全に気分転換ですね。でも月々の支払いは安くなった。(今日からさくらのサーバーに接続されてます。春ですしね・・・)
今回の移行で独自ドメインを持つことの強みを感じました。お金を払ってでも独自ドメインに拘るべきですね。フムフム

3テーマを変更とレスポンシブル化

Welcome wrapper
以前はSEO重視?とか言われたのでそれ向けのテーマを使用していたのですが、今回はシンプルで一見ブログっぽくない感じにしたく出会ったのがのがスウェーデンの ARCSINという方が作ったSimple Organizationというテーマ。これをベースにいじり倒したました。
また、ブラウザの横幅を変えてみて下さい。レイアウトが変更します。思い切ってレスポンシブデザインを導入しました。本当はモバイルファーストで作りたかったのですが元のテーマがデスクトップ用なので、半分モバイルファーストです。ちなみにCSSグリッドシステムと言うからくりを利用しています。(試行錯誤でやっているので不具合あったら教えて下さい。ちなみに私はIE9以上を持っていないので崩れるIE8でしか確認していません。見つけたらご報告お願いします。)

4どこでも手軽にブログ更新。するぷろ導入

するぷろ
多くのブロガーサイトで絶賛されている、携帯から手軽にブログ記事を書けるアプリ「するぷろ」。そもそも改修を思い立った一番の要因は、このアプリがなぜか旧サイトでは新規投稿は上手く行くが、更新が全くできず(この時点でアプリ代¥350を支払っていた)悔しかったのが原因。そこでサイトの作り直しを実行し、気がつけばレンタルサーバーまで変更していましたとさ。と言うのも、ロリポップとするぷろの相性が悪いと言う話しもあったので・・・で上手く行ったのかと言うと、当初はダメでした。と言うのも記事の一つに含まれていた怪しげな外字が影響していたから。外字問題は怖いですホント・・・
それに気がつくきっかけになったのはここのおかげでHTMLの出来具合まで採点してもらいました。

5ローカル環境も充実

mamplogonetbeanslogo
サイトを再構築するにあたり、開発環境としてMAMPを導入しました。一つインストールするだけで、サーバー環境を数分で構築で来てしまう優れもの。もちろんローカルなのでさくさく動きます。またMAMP+SugerSyncを活用して自宅の2台(MBAとiMAC)のPCからのの開発を実現したので、色々勉強になりました。とはいえ本番運用に移ったのでこれからは使用頻度減りますね。
テーマをレスポンシブルにカスタマイズするに当たって使用したIDEはNetBeansと言うソフト。こちらもPHPをいじるのには見やすく重宝しました。

※おまけ
gimplogoinkspacelogo
よく、画像編集はどうしているの?と聞かれるのですが、私はお金がないので次のフリーソフトを利用しています。
GIMP ・・・ PhotoShopの代わりに使えます。
INKSPACE ・・・ こちらはイラストレーターの代わり。
ブログで使う画像程度ならばこの二つで充分です。

今回は改修後初回と言うことで、改修の経緯とどうやってここを作ったかを種明かししました。それでは今後の更新にご期待下さい!