月別アーカイブ: 9月 2011

SEO効果を捨てずにwordpressを移行したまとめメモ

Posted on by
返信

先日、このブログをサーバー＆ドメイン移行した際にSEO効果を捨てずに移行したメモを下記に残します。
ＳＥＯ効果を捨てずにと特に根拠はないのですが、実際に自分が移行して、数日間たつのですが、アクセスは減っていないため問題ないと判断したのでメモしておりますｗ

今回自分が移行した内容は下記。

http://e-com.webhop.net/wordpress/
自宅サーバー＋DDNS（マンションタイプの光のため固定ＩＰじゃないから）
※CentOSを使ったＬＡＭＰ環境

　↓↓

https://matsudapress.com
さくらVPS＋お名前.com
※CentOSを使ったＬＡＭＰ環境

実際に移行した作業

  1. 移行先のサーバー契約＆ドメイン取得とＤＮＳの設定
  2. 移行するデータのバックアップを取る。移行先にwp-contentディレクトリだけコピー
  3. wordpressのエクスポート機能を利用してエクスポートし、移行先にインポート
  4. 移行先で実際にwordpressが正しく動いているか確認する。

    おそらくデータ移行後も投稿データ内の画像データのパス名が旧ドメインのパスに向いているとおもうので、こちらは直接投稿データのＤＢを書き換えます。
    下記のようにsqlの便利なreplaceをつかって旧ドメイン→新ドメインへ書き換えを行います。
    ※SQLはターミナルや、phpmyadminなどから実行できます。
    ※wordpressのメディア機能などを利用している場合はwp-content/uploadsディレクトリなども移行させておいてください。
    ※wp_などテーブル名は、環境によって異なるのでwp-config.phpのprefixを確認してください。

    update wp_posts set post_content=replace(post_content,'古いURL','新しいURL')
update wp_posts set guid=replace(guid,'古いURL','新しいURL')
update wp_options set option_value=replace(option_value,'古いURL','新しいURL'
  5. あとは移行先のプラグインなどカスタマイズ設定を手直し
    SEOプラグインやソーシャル機能のプラグインなど、色々ありますが（汗
  6. そして無事移行先のwordpressが問題ない状況になったら移行元のURLから新しいURLにリダイレクトする設定をします。
    今回はwebサービスとしてapacheを利用しているので、apacheの.htaccessを利用したリダイレクトを行います。
    ※今回の設定はmod_rewriteと.htaccessが利用できる必要があります。
    移行元のwordpressのルートディレクトリに下記のように.htaccessを設置します。
    自分の場合だと http://e-com.webhop.net/wordpress/　に下記.htaccessを設置。

    Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) https://matsudapress.com/$1 [R=301,L]

    この方法であれば正しく単一記事のＵＲＬも引継ぎます。
    http://e-com.webhop.net/wordpress/?p=100
    ↓　（ちゃんとパラメータを保持してます）
    https://matsudapress.com/?p=100

    また、この301リダイレクトの方法はgoogleのヘルプにものっており、正しい方法と思われます。 http://www.google.com/support/webmasters/bin/answer.py?answer=83105

  7. 上記301リダイレクトより、より速やかにgoogleに移転告知したいのであれば、
    google webmasterツールのアドレス変更機能を利用するといいみたいです。
    ただアドレス変更機能はルートドメインのみになっており、今回の自分みたいに
    http://e-com.webhop.net/wordpress/　とサブドメインを利用していたり、パスをきっているとダメなようなので注意が必要。
    ※今回は新しくサイトと追加しました。

    ウェブマスターツール　アドレス変更

    上記のように変更できません。

    ただこれ見て思ったのが、ルートドメインはSEO的に結構優待されるのでは！とおもってしまいました。

    いままでhttp://e-com.webhop.net/wordpressは自分が持っているほかのドメインのサイトよりアクセスが大きい方だったのですが、いっこうにpagerankがあがりませんでした。

    なのに、他のドメインでルートドメインのものはこのブログの10分の１のアクセスしかないなのに、pagerankがあがったのでルートドメインは重要な役割があるのかもしれませんｗ
    すみません、あくまで推測ですｗ

  8. 移行元と移行先のサーバーで並行稼動期間をもたせて、旧ドメインにアクセスしても新しいドメインへ流れさせます。
    あとはタイミングをみて旧サーバーをクローズしようと思ってます。

奥行きのある３Ｄにみせるjqueryライブラリ『smart3d』を使ってみました！

Posted on by
返信

先週の休みにせっかくこのブログをリニューアルしたので、
ＴＯＰのヘッダー画像にギミックを入れてみました！

画面上部の画像の上でマウスを動かすと奥ゆきがあるように動きます。

最近googleのトップロゴもよくギミックがつかわれていますが、まけじと何か新しいのを入れようと思い色々さがしたところ『jquery.smart3d』というライブラリを発見！

『jquery.smart3d』
http://4coder.info/en/code/jquery-plugins/smart3d/

奥ゆきを出し３Ｄっぽくみせることができるライブラリです。
いくつか用意した画像を何枚もかさねています。png画像を利用して、blurをかけてそれっぽくしてます。
インスパイアされたのはバイオハザード４のこのシーン↓（汗

バイオハザード４インスパイア

 

ただ背景が白くて奥ゆきがあるというだけですが、、（汗

・・・・・利用方法も簡単で、下記ライブラリとjqueryを読んで

<script type="text/javascript" src="/js/jquery_smart3d/jquery.smart3d.js"></script>

あとは、jqueryで下記のように記述し

<script type="text/javascript">
    $(document).ready(function() {
        $('#smart3d-head').smart3d({ last_is_static: true });
    });
</script>

htmlで下記のように表示した画像を指定する。とてもシンプルにできています。

<ul id="smart3d-head" style="display:none">
                                <li><img src="/images/headers3d/back1160.jpg" /></li>
                                <li><img src="/images/headers3d/matsudapresslogo3d.png"  /></li>
</ul>

一応ＩＥにも対応してます。
またmedia queriesでスマホなどの画面サイズ小にも対応するため、
画面サイズが大きくないとこのギミックが表示されないようにしました。
※onloadで読み込んでいるので、読み込みが完了してから上部画像みていただけると幸いですｗ

 

ずっとプログラマーとしてやってきたので、
最近デザインももっと勉強しなきゃと日々危機感を感じている今日この頃。。

リニューアル!! ルートドメインへ変更＆MediaQueriesでスマートホンレイアウトに対応しました。

Posted on by
返信

今回サイトのサーバー移行と一緒に、いままで無料のDDNSで利用していたサブドメインを、
独自ドメインを取得してルートドメインに変更しましたｗ

http://e-com.webhop.net/wordpress/　→　https://matsudapress.com

また、移行先もwordpressにしhtml5＆CSS3対応にし、スマホで表示してもレイアウトが崩れないようまえから気になっていたmedia queriesを利用したブログに変更しました。

Media Queriesを利用することで、ブラウザの画面サイズによって利用するCSSを変更できるので、ブラウザの画面サイズを意識し、スマホでも見やすいサイト作成ができます。
このブログでもサイズによってこんな感じに変わります。

media queries

サイズ小（主にスマホ用）

 

 

 

下記のように横幅の最小と最大を指定し、そのサイズ内ならこのCSSを適用するということができます。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}
}

上記を利用しスマホの画面サイズを意識て作ることできれいなPCデザインをいかしつつスマホにも同時に適用できるのが魅力的です！
ちなみにいままでwordpressのプラグインでスマホ用の画面を用意してましたが、この方法なら好きにカスタマイズできるし、PC＆スマホ両方に適用させたい場面など大変便利になります。

実は今回利用しているテーマですがデフォルトテーマで、最初からMedia Queriesに対応しているので、気になる部分をカスタマイズして利用させていただいております♪

 

サイトを移行しました！

Posted on by
返信

本ブログ（wordpress）を移行＆リニューアルしました！
いままで自宅サーバーで稼動していたのですが、、
安くて評判がいいさくらのVPSに乗り換えましたｗ

最近自宅サーバーの調子がわるくまたDDNSをしているため管理が面倒 だったので、
このタイミング切り替えました。

自宅鯖

　↓↓↓

さくらのVPS

というのも・・本当に自宅サーバーってお得なのかを、考えてみました。。

自宅サーバー（タワー型サーバー　HPProliant ML115）
メリット：サーバー代のみ、ランニングコストなし（電気代は別）、自由に触れる（制限がほぼない）
デメリット：電気代、停電のリスク、うるさい 、ネット環境必須

さくらのVPS（安いので月1000円しない）
メリット：設置スペースが不要、うるさくない、ネット＆電気代かからない（ランニングは発生するが）、固定IPが付いてくる
デメリット：完全自由には触れない（だが順仮想でrootがもてる）、ランキングがかかる（電気代はかからない）、

ざっと上記が判断材料としてあがり、気になる電気代を下記電気料金をシミュレーションしてくれるサイトで計算してみた。

電気代計算シミュレーター
http://www.ienakama.com/tips/page/?tid=353 

結果的にいまの自宅サーバーだと24Hフル稼働しているので、電気代で1500円～3000円ぐらいはかかっている・・・しかも設置スペースと音がうるさい。。との事で嫁に承諾を得てVPSを契約しました。

実際使ってみた所管は、環境が外にあるので、管理している感がなく非常に楽になった感じします。またDDNSを利用していたので、毎回IPが変わるのを気にしなくてもよく安定感がでました。