ウェブ学のすすめ

Study of Web Design & Programing

はてなダイアリーからはてなブログに移行する方法


f:id:vinton:20130217223619p:plain
はてなダイアリーからはてなブログに移行してみましたのでその手順とメリット、デメリットを書き残しておきたいと思います。


はてなブログに移行するメリット

はてなダイアリーからはてなブログにするメリットとして以下のものが挙げられます。

はてなブログ
カテゴリ: ソーシャルネットワーキング
サイズ: 2.9 MB
価格: 無料

ss1

はてなブログに足りないところ

  • ページビューのモジュールが使用できない
  • はてなアンテナのモジュールが使えない
  • デフォルトののデザインが少ない(5種類のみ)
  • iPadアプリがない
  • エクスポートができない

はてなダイアリーからはてなブログに移行する手順

※移行する前に念のため、はてなダイアリーの記事データをエクスポートしておきましょう

1.はてなブログにアクセスし、「はてなブログ管理画面」をクリック

f:id:vinton:20130217224824p:plain

2.ブログのURLを決めて、「ブログを作成」をクリック

f:id:vinton:20130217224900p:plain:w550

3.管理画面のインポート>「インポート設定」

f:id:vinton:20130217225721p:plain

4.記事をインポートします

f:id:vinton:20130217222102p:plain


↓記事数400弱で30分ほどインポートにかかりました。
f:id:vinton:20130217222101p:plain

5.はてなブックマークを移行します

f:id:vinton:20130217222100p:plain

6.リダイレクトを設定します

301リダイレクトがかかり、
はてなダイアリーhttp://d.hatena.ne.jp/vinton/にアクセスすると

はてなブログhttp://webgaku.hateblo.jp
に自動的にジャンプするようになります。

はてなダイアリーの管理画面を見たいときは
http://d.hatena.ne.jp/はてなID/admin
にアクセスします。

↓これでインポートは完了です。あとは設定やデザインを変更していきます。
f:id:vinton:20130217222059p:plain

カスタマイズ例

今回カスタマイズした箇所をご紹介します。

1.デザイン面

はてなダイアリー時代のデザイン。背景画像を変えたぐらいです。
f:id:vinton:20130217222058p:plain

2.Javascriptの活用

jQueryが使えるのでスムーズスクロールを採用
f:id:vinton:20130217222054p:plain

Google Feed APIを利用して自分のブログのRSSを読み込み、サムネイルを表示
f:id:vinton:20130217222056p:plain

はてなブログではページビューを表示するモジュールがなかったので外部にPHPを置いてアクセスをカウントしています。
f:id:vinton:20130217222055p:plain

3.ソースコードのカラースキームを変更

↓フォントはGoogle web fontのSource Code Proを使用し、カラースキームはBracketsを参考にしてみました。
f:id:vinton:20130217222053p:plain