スポンサーサイト

一定期間更新がないため広告を表示しています

    -     -     ▲ top

JUGEMからWordPressへの引っ越しメモ

もし仮に、JUGEMからWordPressに移行してみようかな・・・というときのためのメモ。

あまなつShopあまなつで見る同じレイアウトで作成
久しぶりの更新がブログパーツネタではないので申し訳ないのですが、 最近やたらとWordPressが気になっていたので、もしかしたら将来はサーバーなんてものを借りてWordPressでやっていくぞー!なんて気になったときのための引っ越し方法のメモ。
とか言いつつも以前、JUGEMからFC2へ引っ越しするぞー!なんてほざいて、そのときのためのメモという記事まで書いて、引っ越しせずに現在に至る経緯を持つsasoriですが、それはご愛敬ということで何か参考になればということで・・・

データのエクスポート
  • 新管理者ページの場合
    「管理画面」→「ブログ設定」→「インポート・エクスポート」→「[ JUGEM-XML ]形式で書き出し」
  • 旧管理者ページの場合
    「管理画面」→「JUGEMの設定」→「エクスポート」→「XML形式でのエクスポート」
エクスポート自体は簡単。100記事単位でエクスポートできます。
ただし問題点が!
このXMLファイルは”JUGEM形式”だということ。このままWordPressにインポートできても反映しません。インポートできるXMLファイルは”MT形式”です。
つまり、変換が必要。
とはいってもそんなやり方がわかるわけもなく、検索してみた結果このようなすばらしいモノを作ってくださっている方を発見!

XMLファイルを変換
こちらのサイトでJUGEM形式のXMLファイルをMT形式に変換します。
エクスポートしたファイルを指定して、変換開始を押してダウンロードで完了。
オプション設定で記事の状態を下書き(非公開)に指定できるトコがすばらしい。

WordPressにインポート

デフォルトのディレクトリ設定(wp-content/uploads)のままだとエラーになってインポート失敗したので、アップロードするファイルの保存場所を、ディレクトリ(wp-content)に設定してみる。
「設定」→「その他の設定」→「ファイルアップロード」
file_upload
チェックボックスもはずしておく。→「変更を保存」
check_box
「ツール」→「インポート」→「Movable Type と TypePad」
インポート
そして、MT形式に変換したファイル”mt.txt”を選択して「ファイルをアップロードしてインポート」をクリックしたら終了です。

「ファイルアップロード」の設定をwp-content/uploadsに戻して、アップロードしたファイルを年月ベースのフォルダに整理にもチェックしておくのをお忘れなく。

It prays for luck.

    comments(7)     trackbacks(3)     ▲ top

[sasori's] 2008年 Firefox3 アドオンof 22 リスト

できるポケット+ Firefox Mozilla Firefox 3対応 (できるポケット+)あまなつShopあまなつで見る同じレイアウトで作成
この時期になると あちこちで見かける Firefoxのアドオン集や自分のまとめとか覚え書き総集編とか ありますね。
うちでは今まで書いたことのないネタですが、来年は3年目を迎えることだし やってみました。
どうでしょう。ブログを書くためのアドオンとブラウジング用アドオンが半々ですかねー。

2008年 Firefox3 My Add-Ons of 15 List

  • XUL Apps > 2 Pane Bookmarks - outsider reflex 2 Pane Bookmarks はてなブックマーク数
    サイドバーのブックマークツリーが上下二つの表示領域に分割。上のツリーでフォルダを選択すると下の領域にその内容が表示される。非常に見やすく 手放せなくなりました。
  • miniturbo.org - SBMカウンタ SBMカウンタ はてなブックマーク数
    ブロガー定番、現在見ているページに対しての各ソーシャルブックマーク件数を表示するアドオン。コメントも見れる。(というかコメントが見たくなる)
  • Webdeveloperのダウンロード:ミナトラボ Webdeveloper はてなブックマーク数
    見ているページの文書構造やCSSのID・クラス名、画像情報を知りたい時などに便利。
  • Soylent Red | Make Link Make Link はてなブックマーク数
    使用頻度No.1! 見ているページのタイトルやURLをブログに貼り付けるのに都合のよい(自家製)フォーマットで生成してくれる。sasoriは、ファビコンAPIとはてなカウンターを組んでいます。
  • ColorZilla for Firefox - Eyedropper, Color Picker and much more ColorZilla for Firefox はてなブックマーク数
    画像ソフトにあるような 色の値を取得するスポイト機能を追加できる。気になるウェブサイトの配色をスポイト!
  • mozdev.org - menueditor: index Menu Editor 1.2.6 はてなブックマーク数
    コンテキストメニュー(右クリックメニュー)の編集(非表示や順番入れ替えなど)ができる。アドオンが多くなると重宝してきます。
  • ネットを日本語化する:Japanize Japanize はてなブックマーク数
    対応している外国サイトやWebサービスなどを日本語に表示してくれます。"Yahoo!pipes"が対応しているのがすばらしい!
  • mozdev.org - downloadstatusbar: index Download Statusbar 0.9.6.3 はてなブックマーク数
    複数ファイルのダウンロード進捗状況をグラフや数値でステータスバーに個別表示。ここからファイルのリネームもできる。
  • DownloadHelper - Media download Firefox extension Download Helper はてなブックマーク数
    ページ内で再生されている動画や、ページ内から直接リンクが張られているフルサイズ画像をダウンロード。
  • Picnik:ツール Picnik はてなブックマーク数
    ウェブブラウザから 画像編集(トリミング、リサイズ、回転など)処理ができるツール。編集後は"Flikr"やローカルへ保存できる。
  • Home ― tombloo ― GitHub tombloo はてなブックマーク数
    "Tumblr"ユーザーには必須のアイテム。超簡単にポスト。(Twitterなどにも設定OK!)
  • IE View - Installation IE View はてなブックマーク数
    右クリックメニューに「このページをIEで開く」を追加。
  • 「あとで読む」アドオンを翻訳してみた - Liner Note Read It Later -日本語版- はてなブックマーク数
    「ブックマークメニュー」にあとで読むリストが作れる。ブクマするかどうか あとで読もみたいな とりあえず的なかんじがいいし、複数のPC間で読むリストを同期もできる。
  • popIn公式サイト - あったらいいな、を実現しました。 popIn はてなブックマーク数
    任意のテキストをドラッグ選択して その場で「Google検索」「Google翻訳」「Google地図」「Wikipedia」「Twitter」「YouTube」「Amazon」と調べることができる。また文章力を測定する「難易度判定」がある変り種オプション付き。
  • Greasespot Greasemonkey はてなブックマーク数
    任意のページで自分用のJavascript(ユーザースクリプト)を実行できる。

Greasemonkey ユーザースクリプト
  • PROTO.JP BLOG » TumblrLoginS PROTO.JP BLOG » TumblrLoginS はてなブックマーク数
    "Tumblr"の複数アカウントの切り換え、管理をするGreasemonkey。サクサク切り替えて別アカウントでのポストミスが軽減します。

以上 順番は適当です。
こうやって見ると、けっこう入れてるなー
次は無効化しているアドオン(削除はしていない)

現在 無効化中のアドオンof 7
  • All-in-One Sidebar :: Sidebar Extension for Mozilla Firefox :: firefox.eXXile.net All-in-One Sidebar はてなブックマーク数
    サイドバーにマルチパネル機能がつけれる。
    なんか特に必要性がなくなってきた。とりあえず無効化。
  • Firebug - Web Development Evolved Firebug はてなブックマーク数
    WebページのCSS、HTML、JavaScriptをリアルタイムに編集、デバッグ、モニタすることができるWeb開発者用ツール。
    Firefoxが重くなりそうだったので無効化中。
  • Quick TransLation (qtl) Quick TransLation (qtl) はてなブックマーク数
    Webページ上の英単語をテキストドラッグ選択のみで翻訳できる。
    "popIn"を導入したため、ただ今 無効化中。(そのうちどっちかに決める予定)
  • Firefox & Thunderbird Extensions by Juan C. Avila QuickRestart はてなブックマーク数
    なにかと再起動する機会が多かったFirefox2時代に使用。Firefox3になってから再起動することもほとんどなくサクサク動くので ひとまず無効化に。
  • Screengrab! Screengrab! はてなブックマーク数
    Webページをキャプチャーして ローカルに保存できるアドオン。
    "Tombloo"を導入してからはお蔵入り。(ちなみに使いこなす前だったので なんとなく削除できず)
  • Search Station (検索ステーション) Search Station (検索ステーション) はてなブックマーク数
    サイドバー用。「検索サイドバー」と「翻訳サイドバー」ができ、中でも「翻訳サイドバー」は便利。翻訳サイトが選択できる優れもの。やっぱりエキサイト翻訳がいい!
    "Quick TransLation (qtl)"と同じく、"popIn"を導入したため、ただ今 無効化中。
  • OPIE Firefox Extension OPIE Firefox Extension はてなブックマーク数
    Firefoxバックアップ用。拡張機能の設定をインポート・エクスポートできる。ためしに入れてみた。常時有効化している必要性なしだーね。


(おまけ) Firefox バックアップ用に。
  • Localization | PortableApps.com - Portable software for USB drives Localization | PortableApps.com - Portable software for USB drives はてなブックマーク数
    Firefox3 Portableの日本語版。USBメモリに入れておけるFirefox。
    フォルダのコピー移動だけでUSBに、ローカルに、自由自在なので そのままバックアップとしても使えます。
    もちろん最初は英語のオリジナルバージョンしかなく、日本語化を試みるユーザーが頑張っていましたが、めでたく日本語の正式版がリリース。
    USBで持ち出して、ネット環境があれば どこでも自分だけのFirefoxが使えます。(すげー)


    comments(1)     trackbacks(0)     ▲ top

リンクの文字が震えちゃうJavaScript。「ブルブル!」

ブルブル.gif


回はブログパーツではありませんが、ちょっと面白系なJavaScriptを見つけたので、こちらをご紹介。
マウスカーソルをテキストリンクから外すと、リンクの1文字1文字をブルブルさせるJavaScript「ブルブル!」。

ちょっとしたアクセントに使えます。

さっそくうちも実装(トップ、サイドバー「TEST」、フッター)してみましたので、デモ代わりにどうぞ。



・ソースコードのユーザー定義変数(■で始まるコメントの直下にある変数)を変更することで、ブルブルの挙動をカスタマイズできます。
・ユーザー定義変数「brbr.f」にtrueを設定することで、class属性値に「brbr」と設定されたリンクにのみ反応するようになります。
・aタグのclass属性値に「brbr」と指定すれば、「.brbr span」でブルブルする際の1文字1文字にスタイルシートを適用できます。

ここにもサンプルを。
リンク編
顔文字編(空リンク)
speech-bubble(website).png
oitake blog | ブルブル!(ブルブル 4)

oitake blog | ブルブル!(ブルブル 4) はてなブックマーク数
登録:不要。
jsファイルもありますが、簡単なのは置いてあるソースコードをウェブページやブログのテンプレートのなるべく最後の方に貼るやり方。
サイトにやさしく説明あり。


    comments(0)     trackbacks(0)     ▲ top

Yahoo! Pipesでコラボネタ3!「さがせ」と「サソリ」のマッシュアッパァーッ!
「Google AJAX Feed API」バージョン

て、前回の記事「moo.fxの「FX.ACCORDION(タブ・アコーディオン)」をJUGEMでやってみた。」の続きと言うか、番外編と言おうか、コンテンツ編といおうか(なんでもいいっつーの)。

FX.ACCORDION内にある「Mix Entries」のRSSの表示は、いつもご迷惑をかけては毎回お世話になっている「 ブログパーツをさがせ」さんとうちのRSSフィードを(勝手に)「Yahoo! Pipes」でミックスさせたものです。

今までいろいろ遊んできましたが今回は「Google AJAX Feed API」を使ってみました。
なので「Yahoo! Pipesでコラボネタ3!」ということです。(結局)

ちなみに、Yahoo! Pipesでコラボネタシリーズは以下。

「さがせ」と「サソリ」で生まれたキカイダースキン。
では、本題。
Google AJAX Feed APIとは、googleから提供されている、RSS/Atomフィードを取得するAPI(javascriptライブラリ)です。


詳しい導入法は「マイコミジャーナル」に載ってますのでぜひどうぞ! 「Yahoo!Pipes」についてはこちら。

1).まず「Yahoo pipes」で作ったRSSを準備。
RSSフィードを複数取得できる「google.feeds.FeedControl」というクラスがありますが、mixtureしたRSSフィードの方がおもしろいので却下。
http://pipes.yahoo.com/pipes/pipe.run?_id=HrpJe2XF2xG57ERfHxeTaQ&_render=rss

2).APIキーを取得して、Google AJAX Feed API のドキュメント内にあるコードをコピペ。

3).そして「はてブ数」を表示させるコードを加えますが、方法は検索するとでてきました。
参考(引用)にしたサイトはこちら。(勝手にありがとう)
そしてどちらの記事なのかわかりやすいように、リンク先の Favicon(ファビコン)を自動で表示する「 Favicon API (ファビコン) α版」は欠かせない。
F.Ko-Jiの「一秒後は未来」さんにあるコードを参考に小細工。
合ってるかどうかわからないが、表示されたのでこれでよしとしよう。
(ΦДΦ )ノ" テキトー
div.appendChild(a);
var img = document.createElement("img");
img.src = "http://favicon.aruko.net/m/f/" + entry.link;
with(img.style) {
width = "16px";
height = "16px";
verticalAlign = "middle";
marginRight = "4px";
}

4).ここまでくるとコードが長ったらしくなるので、例のごとく偽装作業(気分は犯罪者)。

5).「FX.ACCORDION」のboxに<div id="feed"></div>を入れると完成。

「Yahoo pipes」を使わずにRSSフィードをmixtureできればもっと表示が速くなるんだろうけど、
さっぱりわかりまセーン ┓( ̄∇ ̄;)┏

本人には合ってるのかどうかも分からないような恥かしいコードは続きでどうぞ。
(詳しい方教えていただきたい・・・)

”続き”を表示

    comments(1)     trackbacks(0)     ▲ top

moo.fxの「FX.ACCORDION(タブ・アコーディオン)」をJUGEMでやってみた。
〜 css編 〜

moo.fxの「FX.ACCORDION(タブ・アコーディオン)」をJUGEMでやってみた。 はてなブックマーク数」の続きです。

moo.fxの「FX.ACCORDION(タブ・アコーディオン)」をブログのサイドバーに設置するためCSSの編集。
解凍したフォルダの中にあるhtmlファイルをテキストエディタで開くと、各クラスの設定が確認できます。
#wrapper{
width: 500px; /* 全体の幅 */
margin: 0 auto;
}
.box{
background: #fff; /* アコーディオンで開くボックスの背景 */
}
.boxholder{
clear: both;
padding: 5px; /* 枠線の幅 */
background: #8DC70A; /* 枠線の色 */
}
.tab{
float: left;
height: 32px; /* タブの高さ */
width: 102px; /* タブの幅 */
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(images/greentab.jpg) no-repeat; /* タブの背景 */
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
1).全体の幅
「#wrapper」はすでにうちのブログで使っているクラス名なので「#moo_wrapper」に変更。
うちのサイドバーの幅は215pxなので190pxと設定。
#moo_wrapper{
width: 190px;
margin: 0 auto;
}
2).ボックスの背景
アコーディオンで開くボックスの背景をひとまとめに設定するならCSSに指定。
個別に指定するならhtmlタグに直接書くのがてっとり早い。 ボックスごとに背景画像を変えたかったので、htmlタグに書いてみた。
<div class="box" style="background: #fff url(http://●●●.img.jugem.jp/●●●.png) repeat-x top left;">
3).枠線
「.boxholder」の「padding」の数値を換えると枠線の幅が変更できます。
「background」で枠線の色を変えれます。
.boxholder{
clear: both;
padding: 1px; /* 枠線サイズ2pxになる。0pxで1pxになる */
background: #8DC70A;
}
4).タブ
タブは以下のコードを足せば増やせます。
<div class="tab"><h3 class="tabtxt" title="●●">
<a href="#">●●</a></h3></div>
タブを足した分のボックスも追加しましょう。
<div class="box">〜</div>
「.tab」の「height、width」でサイズ、「background」で背景色の設定。
うちは小さくまとめているので、タブも小さく背景画像も使わずシンプルに枠線のみで、こんなかんじ。
.tab{
float: left;
width: 59px;
height: 20px;
margin: 0 1px 2px 1px;
text-align: center;
border: 1px solid #6196fc;
}
まあ、あいかわらず覚え書きのように書いてますので見苦しい点は勘弁で。

    comments(0)     trackbacks(0)     ▲ top

  • » ブログパーツの設置方法 (links with BlogDeco)

 
サンプル・イベント・モニターならBloMotion