webデザイナーのナナメガキ
MovableTypeからWordPressへパーマリンクを変更せずに移行するメモ
- 2008-12-30 (Tue)
- Movable Type | WordPress
かなり前にMovableType(3.2)からWordPress(2.0)へ移行した際の手順をメモ。
1.MovableTypeからテキスト形式でエクスポート
2.URLが変わらないように、MovableTypeのアーカイブマッピングとWordPressのURL設定を合わせる。
3.WordPressの管理画面からテキスト形式のファイルをインポート
4.「_」が「-」に変わっていたりするので、手動でURLを変更（DBを直接修正）
5.月別やカテゴリのアーカイブが表示されなかったので、.htaccessにRewriteRuleを追記
6.WordPressが出力するフィード(RSS等)のパスがMovabeTypeと違うのでリダイレクトさせる
てな感じで、何とかMovableTypeからアーカイブ等のパーマリンクを変更せずに済みました。
エントリの移行は画像のパスとかに注意すれば、比較的簡単に行くのですが、フィードをMovabeTypeと同じURLで出す方法がわからず、泣く泣くリダイレクトで対応しました。
mod_rewriteをいじったことがなかったので、今の状態も正しいのかいまいち自信がないですが、一応今の設定(.htaccess)を晒しておきます。
#.htaccess
# BEGIN WordPress
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^archives/ /blog/index.php [L]
RewriteRule ^feed/ /blog/index.php [L]
RewriteRule ^comments/ /blog/index.php [L]
RewriteRule ^index.rdf$ feed/ [R=301,L]
RewriteRule ^index.xml$ feed/ [R=301,L]
RewriteRule ^atom.xml$ feed/atom/ [R=301,L]
# END WordPress
- Comments: 0
- Trackbacks: 0
検索結果に復活したようです。
- 2008-11-06 (Thu)
- なんとなく
どうやらサイト復帰後一週間程度で、Google等の検索結果も元に戻ったようです。
良かった…。
やった事はというと、一応Googleウェブマスター ツールで再登録し、
sitemap.xmlをアップした事ぐらいです。
それが効果があったのかはきちんと検証できないので、何とも言えないですが、
とにかく無事復活して良かったです。
今後はがんばって更新頻度を上げたいと思います。
- Comments: 0
- Trackbacks: 0
サイトが１ヶ月落ちてました…
- 2008-10-21 (Tue)
- WEB
一応ご報告ですが、9/20〜10/19までサイトが見れない状態だったようです。
検索エンジンなどで見に来られた方には
深くお詫び申し上げます。
大変お恥ずかしい話ですが、仕事などで諸々立て込んでいたため
長いこと放置していた結果、サーバーの契約が切れてしまっていたようです。
アカウントが切れる前に何度かメールが来ていたらしいのですが、
迷惑メールとして処理されたまま、気づかず、
１ヶ月ほどエラー画面が出続けていたようです…。
昨日ふと覗いてみたら「アカウントがロック」されているのに気づき、
慌てて復帰させた次第ですが、本職としてあるまじき失態ですね…。
こんな場末のブログとはいえ、Googleの検索結果にもエラー画面が残ってしまっていて
いかんともしがたい感じです。
ようやく仕事なども落ち着いてきたので
しばらく恥をさらしたまま更新を再開してみようかと思います。
１ヶ月落ちていたサイトが、どれぐらいの期間で検索結果に復活するものなのか、
役に立つかわからないノウハウを得られればいいかなと思っております。
- Comments: 0
- Trackbacks: 0
coLinuxでUbuntuを使う際のNX Clientのエラーについて
- 2007-05-22 (Tue)
- Linux
いろいろ話題のUbuntuを使ってみようと思い、coLinuxで導入しようと思ったらちょっとつまづいたのでメモを。
基本的にはUbuntuのサイトにある通りにやれば、coLinuxにUbuntuのインストールはできる。しかしNX Clientを使って接続する際にエラーが出てしまう。SSHで接続はできるのでNX Client側の問題っぽい。
Ubuntuサイトのフォーラムによると、どうやらNX Clientのバージョンによってエラーが起こるらしい（現在は2.1.0）。1.5.xなら問題なく使える模様。なのでNX Clientの1.5をここからダウンロードし、ようやく接続できた。
NX Clientの現行バージョンではPNGを扱えないのが問題なのか、いまいち良く分かりませんがとりあえずこれでUbuntuが使えるようになりました。イメージファイルが2Gなのでとりあえずこれを増やしてから使っていこうかと思います。
- Comments: 0
- Trackbacks: 0
Ajax関数電卓
- 2007-04-27 (Fri)
- JavaScript
JavaScript(mootools)でできた関数電卓を見つけました。Mootools Calculator。
見た目はWindows付属の電卓っぽいっすね。一応ドラッグできたり、Tooltipで各ボタンの説明を表示できたりします。
キー入力に対応してないのがちょっと残念ですが、こういうUIに触れる度に、web上で何でも、快適に出来るようになっていくのだなあとしみじみ思います。
- Comments: 0
- Trackbacks: 0
JavaScript(mootools)でSnipet付きエディタ
- 2007-04-03 (Tue)
- JavaScript
PostEditorというオンラインエディタがなかなか便利です。WYSIWYGではないですが、いろいろと便利なSnipetがあり、HTMLとJavaScriptのコードを書くのに特化している模様。mootools.jsのプラグインで、mootoolsは最新のSubversion版でないと動かないっぽいです。「language.FORUM.js」にSnipetの設定が書いてあり、これらを読み込んで使います。※SafariとFirefoxのみ対応らしいです。
<script type="text/javascript" xsrc="/js/mootools.js" mce_src="/js/mootools.js" ></script> <script type="text/javascript" xsrc="/js/posteditor.js" mce_src="/js/posteditor.js" ></script> <script type="text/javascript" xsrc="/js/language.FORUM.js" mce_src="/js/language.FORUM.js" ></script> <form> <textarea name="body" id="body" class="textarea" rows="8" cols="40"></textarea> </form> <script type="text/javascript"> new postEditor.create('body','body2',language.FORUM); </script>
一番の特徴は「tab」を使うところかなと。まず普通に「tab」を押すと「半角スペース×4」が入力されます。「半角スペース×4」というのがいいですよね。主な機能は以下の通り。
- オートインデント
- Snipetをタブで呼び出す（ul+tabなど）
- Snipetをタブで自動補完（ol+tab+tabとtabを続けて押すとli挿入、次のli挿入）
- ダイナミックSnipet（date+tabで今日の日付）
- ２つセットで使う文字を自動補完（」となる）
- スコープを判断して括弧で括る
- 選択したテキストをタグで挟むショートカット（ctrl+shift+[0-9]）
Snipetは以下の通り。Snipetを入力しtabを押すと補完されます。（strongと打ち込んでtabを押す など）
- strong, em, blockquote, code, javascript, html, bq, js, {（閉じとセットで挿入）
- $, new Class, .extend, a
- ul, ol
- </li>の後ろでtabを押すと次のliを挿入
「$ + tab」は「$(’id’).」に、「a + tab」は「>a xhref=”http://” mce_href=”http://” title=”desc”<text</a> 」になります。「.extend」は以下のように整形されます。
.extend({ initialize: function(value){ } });
また、「new Class + tab」は「<javascript></javascript>」内で使うと以下のようにinitialize:を挿入しフォーマットしてくれます。
<javascript> new Class({ initialize: function(value){ this.key = value; } }); </javascript>
そしてデフォルトのショートカットは以下の通り。7〜9は選択範囲のみ適用されます。
- ctrl+shift+0 → <strong>
- ctrl+shift+1 → <em>
- ctrl+shift+2 → <blockquote>
- ctrl+shift+3 → <code>
- ctrl+shift+4 → <javascript>
- ctrl+shift+5 → <html>
- ctrl+shift+6 → <a xhref=”" mce_href=”" >
- ctrl+shift+7 → 選択範囲を小文字に
- ctrl+shift+8 → 選択範囲を大文字に
- ctrl+shift+9 → 選択範囲の<>を<>に
divとかはないみたいですが、登録されているSnipetがかゆい所に手が届く感じなので、コードを織り交ぜたblogを書く際にはとても便利だなと思います。自分の場合は今回のエントリーを書く際に重宝しました。Snipetを変更すれば自分好みにカスタマイズも可能かと。
■mootools関連エントリー：
＞ javascriptで伸縮するメニューができる
＞ JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools）
- Comments: 0
- Trackbacks: 1
JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools）
- 2007-03-28 (Wed)
- JavaScript
web2.0おなじみの映りこみをJavaScriptで表現できるライブラリはReflection.jsが有名でかつ軽いですが、mootoolsでもできるみたいです。「Reflection.js for mootools」というプラグインでmootools.jsと一緒に使います。
Reflection.js for mootoolsはデモがよく出来ているので以下にほぼそのまま載っけます。透明度や高さ、背景色も変えられるので機能が一発でわかるようになってます。デモって大事ですね。
使い方は簡単で「reflection.js」と「mootools.js」を読み込んで、映りこみさせたい画像に「class=”reflect”」とするだけ。この辺はReflection.jsと同じですかね。
mootoolsの必要なモジュールは以下の通り。
- Native: Array, String, Function, Element
- Window: Window.Base
また「class=”reflect”」とするとその画像が強制的にblock要素になるので、横に並べたい場合はCSSでfloat:leftを設定する。
javascriptから制御する場合は以下のように扱える。
Reflection.add('photo1', options); //Reflectionオブジェクトを使う場合 $('photo1').addReflection(options); //addReflectionプロパティを使う場合
「options」はheight（高さ）とopacity（透明度）があって、それぞれ0〜1の値で設定する。デフォルトはheightが1/3（0.3333…）、opacityが1/2（0.5）らしい。optionを指定するとコードは以下のようになる。
$('photo1').addReflection({height:0.5,opacity:0.75});
でもまあ、Reflection.jsの方がファイル一つだし楽ですかねぇ。
mootools関連エントリー：
javascriptで伸縮するメニューができる
■写りこみ参考リンク
- Comments: 0
- Trackbacks: 2
javascriptで伸縮するメニューができる
- 2007-03-24 (Sat)
- JavaScript
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。
<script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref="" mce_href="" ><span>HTML</span></a></li> <li><a class="kwick opt4" xhref="" mce_href="" ><span>ABOUT</span></a></li> </ul> </div> <script type="text/javascript"> var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:185}); </script>
phatfusionの元のsampleはそれぞれ違う画像を動かしてますが、まあこの方がメニューっぽいかなと。クリックするとその部分の幅が固定されるようですが、リンクをつける場合はあまり必要がない機能のような気もします。
また、Image Menuは動作中に右端がぶるぶる震えてしまうので、<ul class=”kwicks”>の幅を固定して、背景に同じパターンの画像を配置するときれいに見えます。自分のsampleでは端を角丸にしたかったので、角丸の画像を１枚作って、左と右に表示してます。
←角丸
←各背景
#kwick { position:relative; width:515px; background:url(menu_bg_gra_lr.gif) no-repeat top left; } #kwick ul.kwicks { display:block; margin:0 0 0 5px; height:50px; background:url(menu_bg_gra_lr.gif) no-repeat top right; list-style:none; }
あとこれをちょっと応用して縦に伸縮するメニューを作ってみました。
縦バージョンはimagemenu.jsのソースを「width,Width」→「height,Height」に変換しただけのものを使ってます。しかしこんなことまでできるとは…。
- Comments: 3
- Trackbacks: 6
CSSの画像置換についてコメントまとめ
- 2007-03-20 (Tue)
- CSS
以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。
・yakonyan：<span></span>はない…
・sac3937：前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。
・chaperatta：CSSの画像置換で、画像OFFのときに文字が消えない方法（だけど空タグを使うのがあまり納得できない？？
・urajima：text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。
・makitani：んで空タグを推奨ってのは変でないかい？
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・rusica：「画像置換」は必須別に必須ではないと思う。それと空のspan要素はありえない。
・webmugi：<span></span>はやっぱり気持ちよくない
いろんな意見がありますが、やはり空のspanへの嫌悪感が強いみたいですね。確かに空のspanは文法的にも間違ってるし、気持ち悪いのは確かです。
・infoblog：”「CSS有効で画像は非表示」で見ている環境”の人もいるんだろうけど、希少なケースだと思われるので、正直切り捨てていいと思われる。画像置換はよく使っているので禁じ手になるとキツい。
・kits：「欠陥」を重大と捉えるかどうか。携帯端末に対してはmedia属性で振り分け可能では。
また、「CSS有効で画像は非表示」というのは携帯電話だけでなく回線の遅いモバイルPCなども考えられるので、携帯用のCSSのみでは対処しきれない場合もあるのでは、と思いますがどうなんでしょう。
・leva：コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。
・masakanou：普通にimg要素使いますが。
・retlet：Image Replacement について云々。使いたい場合は空span要素で画像を被せましょうという話。小規模サイトだと普通にimg要素使った方がメンテナンスしやすかったりするけどね。
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・kana-kana_ceo：もう、おとなしく、img と alt でいいんぢゃないの？
・inazuma2073：携帯用CSSを用意すればいいんじゃないかな。空のspan使うくらいならimgでいきたい
テキスト要素を「画像」として表示したいのであれば、imgタグを使えばいい。これは文法的にも何も間違ってはいないというか、これが本来の使い方です。これはもうほんとにおっしゃる通り。
画像置換を採用すべきかどうかは、その長所と短所をしっかり踏まえたうえで、慎重に検討されるべきです。コンテンツとして有意な画像、文字情報を含んでいる画像については、CSS側から表示を制御するよりも、img要素として（適切なalt属性値とともに）マークアップしたほうが、アクセシビリティ的には好ましいでしょう。（画像置換という手法 | Web標準Blog | ミツエーリンクス）
それでも現状では画像置換を使用せざるを得ない場合もあるのではと思っています。SEO最優先だったり、短納期で素材が決まらず枠組みだけ先に作るみたいな場合とか（制作者サイドの泣き言ですかね…）。
とりあえず「text-indent:-9999px」や「dispay:none」はアクセシビリティに問題がある、Guilde/Lebin Methodは、空のspanがhtmlの文法的におかしい、など手法の問題点を十分把握しておかなければ、と思ってのエントリーではありました。
・hxxk :before擬似要素を用いる手法（拙著内にて解説）では、「CSS有効で画像は非表示」でも情報が伝えられます。IE様が対応していないという関係でまだまだ最適解ではないのですが。/もしくは素直にimg要素でマークアップ。
hxxkさんの「:before擬似要素」を使うという手法ですが、IEが対応してないんですよね。実際には以下のようなソースになるのかと。ソースはシンプルで済みますね。
h6:before { content:url(ir_test.gif); display:block; } h6{ width:150px; height:50px; overflow:hidden; } <h6>SITE TITLE</h6>
SITE TITLE
結局正解なのはimgを使えってことなのかもしれませんが、よりよい最適解があるのならば探していきたいですね。「実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips」はまだ未読ですが勉強のために読んでみようかなと思います。
実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips
posted with amazlet on 07.03.20
市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 910
- Comments: 3
- Trackbacks: 1
- Search
- Feeds
- Meta