ゆーすけのゆーとぴあ ver. 2.1

~ Celeste + α な生活 ~

PC・IT・ホームページ

ホームページ大改造の顛末 part 2

前回の記事で、WordPress移行に際しての準備までを書きました。そこで、今回は実際にWordPressへの移行作業を書いていきたいと思います。
そもそもサイトを構築しているアプリケーションを変更するので、結構大変な(面倒臭い)作業となりました。

daikaizo2-1スタバで編集中
Sony α77 × Vario-Sonnar T* 16-80mm F3.5-4.5ZA (SAL1680Z)

WordPressのインストール

WordPressのインストール場所

何はともあれまずはWordPressのダウンロード&インストールです。ワタクシが利用している「Xサーバー」では、WordPressの自動インストールが可能です。というわけで、この作業はサイトのマニュアルを見ながらサクッと終了♪

ただ、ひとつ気を付けたのが、WordPressをインストールするディレクトリです。
今回の移行作業の肝のひとつとして、「トップページのURLは変更しない」というのがあげられます。
WordPressをインストールするディレクトリを慎重に設定して、トップページのURL自体は変更せずに、でも過去のページも維持できるようにしました。

作業中

また、変更作業中にトラブルが起きて、「過去の記事が全部見れなくなった!?」みたいな悲劇が起こらないように、ある程度変更作業が完了していない間は、旧ページを生かしつつ、別のURLで作業を行い、見た目として問題ないであろうところまで変更できたときに、新ページに移行するという風にしました。
なんとか、設定しているURLを調整しつつ、変なことは起こらずに移行できたと思います。

過去記事の移行

MTからWPへ

次に今まの記事を新ページへコピーしないといけません。600件を超える記事を一個ずつコピペで・・・なんて作業やってられません(笑)。
実際、今回の移行では旧ページ:Movable Type ⇒ 新ページ:WordPressというアプリケーションを跨いだ移行なので、うまくいくのかどうか不安だったのですが、結果から言うと結構簡単に移行できました。

Movable Type側で記事のエクスポートを行い、WordPress側では専用のプラグインを利用することで、さくっとコピー完了です。

2つの記事だけが・・・

ただ、思った以上に新ページのデザインの調整に時間を要したせいで、旧ページのままの状態で2つほど記事を投稿することになりました。
というわけで、「やっぱり南国」と「インドネシアで飲めるビール」については、実は新旧両方のページに2回ずつ書きました・・・。

デザインの調整

WordPressの特徴?

Movable Typeでも最新のバージョンでは採用されているのかもしれませんが、WordPressのひとつの特徴として、「テーマ」というのがあげられます。
この「テーマ」とは何かというと、サイト(or ブログ)のベースとなるデザインのことです。WordPressでは、この「テーマ」が非常に数多く配布されており、単純に無料のテーマをそのまま採用したとしても、結構ちゃんとしたデザインとしてサイトを構築できるようになっています。

今回、このページでは「simplicity2」という無料テーマを使用しているのですが、無料のWordPressテーマの中では非常にポピュラーかつ初心者向けのテーマの一つのようです。

デザインの調整

実際、テーマを選んでインストールするだけで、それなりのサイトになるのですが、せっかくなので旧ページのデザインをできる限り引き継ごうとがんばってみました。
基本的な色使いやメニューバーの内容などは旧ページに近いものになっていると思います。実際、どこをいじればデザインが変わるのか、最初は完全に手探りの状態で始めたので、この辺の設定に結構時間がかかりました(汗)。

結果的には概ね満足のいくデザインにできたのかなと思ってます。

カテゴリーの細分化

今回の改造に際して、カテゴリーも細分化しました。既存のカテゴリーはそのままに、既存カテゴリーの下位により細かいカテゴリーを追加した形です。ですが、既報の通り、まだ完全には変更し切れてません。。。がんばって変えないと(汗)。

その他もろもろ

その他にもろもろデザインを変更しております。SNSでの共有ボタンを設置したり、サイドバーに人気記事欄を作ったり。写真を載せる時のコメント&カメラ情報欄も若干の変更を加えてます。カメラマーク(これ→)とか虫眼鏡マーク(これ→)とかついてるでしょ?
この はweb fontである「Font Awesome」というのを使用しています。文中のリンクにもこんなの→ を使ってますが、CSS3から実装されたこのサービスを利用してみました。なかなか使えそうなので、今後もちょいちょい使っていくかもです。

あと、今回のページデザインでは、すべての投稿に対して「アイキャッチ画像」というものを設定しています。トップページやサイドバーの人気記事欄などで各投稿に表示される写真 or 画像のことなんですが、何も画像を設定しないとデカデカと「NO IMAGE」と表示されることになってしまうので、これからはすべてのページになんらかの画像を設定しようと考えています。
とは言え、全投稿に写真を挿入するわけにも行かないので、今までは自分で撮影した写真しか使ってなかったのですが、これからはフリー素材とかも活用していこうかと。一応、過去記事の中で写真を使用していない記事に関しても少しずつフリー素材を割り当てていってるのですが、これも一つずつ手作業で行っているので、少しずつ少しずつ変わっていくと思います(笑)。

・・・というわけで

これからもペースは遅いですが、ブログを続けていきますので、よろしくおねがいいたします!

LEAVE A REPLY

*
*
* (公開されません)

COMMENT ON FACEBOOK