2012.10.21
ハロウィンですが、百物語をしているようです
n
イカってなんだろうw
ファイルを整理してたら出てきたのでアップしてみましたw
Painterを12にアップグレードして初めて描いてみたのがこれです。
11を飛ばしたら浦島太郎でした。
2012.10.19
ローカルのWordPressにリモートのを穫ったどー！
ローカルで試用していたWordPressにリモートの差分を持ってきたい。
というのがそもそもの動機でした。
WordPressが入ったフォルダの中身は直接FTPで上げたので、WordPressが作る.htaccessもだいたい同じになっている。
リモートとローカルの差分はメディアライブラリにブラウザから上げた画像データくらい。
おなじみのFTPでファイルやフォルダをやり取りするだけなので、お気楽です。
リモートのデータベースをインポート
問題なのは、データベースであります。
色々読みあさった結果、ローカルからリモートに上げた時と同じことをすればいいんじゃないかと。
インポートどーん！してみました。
よしっ、おけ！
差分というより、丸ごと移植になってしまいますが…
忘れないように手順。
- リモートのメディアに上げた画像をFTPでローカルに穫ってくる。(uploadsフォルダごと同期）
もしかしたらPluginsフォルダも穫って来るといいかもしれないけど膨大なので、手動で合わせている場合はいらないかも。 - リモートのMySQLデータベースからphpMyAdminのエクスポートを使ってsqlファイルを書き出す。
- エディタで開いて、19-20行ぐらいにあるデータベース名をローカルものに変更
- wp_optionsの’siteurl’と’home’をローカルのurlに変更。リモートのurlをエディタで検索してローカルに一括変換して保存。
- ローカルのMySQLデータベースへphpMyAdminを使い、修正したsqlファイルをインポート。（同じ名前のテーブルがあると不具合があるかもしれないので、テーブルは削除しておいた。）
- ローカルのWordPressフォルダの中のwp-config.phpはいじってないのでそのまま。
- http://ローカルのアドレス/wp-adminWordPressへログイン。ユーザー＆パスワードはリモートの物になっているので注意。
- 蛇足：とりあえず、db-managarの警告がうざいのでローカルの物に置き換える。
意外に簡単。
ただ、勉強不足でプラグインの設定など手動で直すことになるのが難点。プラグインの設定は.wp_optionsにあるらしいので、もしかしてエクスポートの際にこれを除外したら良いのかもしれないし、素人には手動が安全なのかもしれない。
これでphpMyAdminでエクスポートしたバックアップを復元するのもばっちり☆？書き換えの手順がいらないくらいで同じだろうと…なんの為にdb-managarを入れているのか謎ですが、勉強になりました。
phpMyAdminを触ったついでに…
セキュリティーを考えてwp_の接頭辞を変えてみる。
恐ろしいのでもちろんローカルでお試しして、旨くいったらリモートに上げるだす。
こちらのサイトさまを見れば何も言う事無しなんですが…phpMyAdminのSQLのとこ、クエリを実行するってのが初めてだったので、覚え書きします。ドキドキしたw
- エディタなどを利用して（直書きはこわい）
を始め全てのテーブルに対してリネームするクエリを書く。詳しくは参考サイト参照1rename table wp_commentmeta to hoge_commentmeta; - phpMyAdminにてデータベースを選択しSQLのタブをクリック。『データベース hogehoge 上でクエリを実行する: 』のフィールドにエディタで書いたクエリをコピペ→実行するボタンを押す。
- 続いてデータの中に使われているテーブルプレフィックスの部分をエディタで適宜書き換える。
- ２と同様コピペ→実行。
- wp-config.phpの
の箇所を自分でつけたhoge_などに書き換える。1$table_prefix = 'wp_';
じゃじゃーん！でけた！！
セキュリティーのプラグインなどで簡単に書き換えられるようですが、プラグインの内容が多彩すぎて尻込み。。取りあえず手動でやってみました。
2012.10.03
旧ブログをGoogleの検索結果から削除
全てのコンテンツを持って引っ越した「ちゅんもす置き場」ですが、
勢い余って旧ブログの記事を「引っ越しのお知らせ」を残し、全て削除しました。
しかし！Googleには旧サイトがずらっとインデックスされたままです。
404です。
忍びないのでインデックスから削除してもらうことにしました。
まず、Googleのウェブマスターツールに登録します。
そんで「URL削除リクエストツール」を使う訳ですが、旧ブログ全体のインデックスを削除するには、ルートにrobots.txtを置いてクローラーをブロックせねばならんようです。
削除の手順はずばりの記事があり、こちらを参考にさせて頂きました。
旧ちゅんもす置き場はココログで書いておりました。
ココログのルートってどこ？
自分のアドレスの直下だろうということで、
ココログの管理ページからコントロールパネル→ファイル→ファイルマネージャーへ進み
上記のサイトを参考に作ったrobots.txtをホームフォルダにアップロード。
ファイルマネージャーのリストのリンクボタンで確認すると、http://アドレス/robots.txtとなっておりましたのでココログはホームフォルダがルートディレクトリでええんだと思います。
無事、GoogleのURL削除リクエストツールにも受け付けられ、数時間後にはインデックスから削除されました。
が、ココログの何かが残ってるけど気にしない…
そして…旅立ちへw え？
2012.09.27
やっとたどり着いたよ
こんにちわー
旧ブログからお越しの方、ありがとうございます！
新たにちゅんもすを発見してくださった方、ようこそ！
ココログから自前のWordPressにやっと引っ越し完了して、公開にこぎ着けました。
新しい記事は何一つ増えていませんがw
これからチョクチョクとブログ構築にあたっての苦労話や備忘録など書いていきたいと思います。
旧ブログのお知らせでも喩えたのですが、なんとなく自分で住処を建てた感じがします。
麓郷の森のゴローさんちほどではありませんが、なまら苦労したんでないかい。
これからもよろしくお願いします。
2012.06.11
jQueryといふものをしてみむとてするなり
サイト制作の復習です。
先日、サイトを引っ越しまして、旧サイトへのアクセスを新サイトへ転送しております。
niftyのフリースペースでは.htaccessが使えない為、301リダイレクトで転送できません。苦し紛れにmetaのrefresh 0秒を使用しています。
|
1 |
<meta http-equiv="refresh" content="0; URL=http://sw8field.com/"> |
Firefoxだと自動転送ブロックでサイト移転のお知らせが見えます。しかし、Safariなどは意図した挙動とはいえ、有無を言わさず０秒で転送されるので、ビジターに不安を与えかねません。
移転の案内を読める時間をとった３秒後に転送とかが一番親切だと個人的には思いますが、今後のビジターの為にも検索エンジン対策でいちおう0秒転送で301的にもしたいものです。
（refreshの場合、０秒で301扱いという情報も見ましたが、Googleはスパム扱いするという情報もあり、根本的な検索エンジン対策にはなっていません。.htaccessが使えなくては他に手は無いしなぁー PHP? 敷居が高すぎますｗ）
そこで、新サイトにフローティングウィンドウで「移転のお知らせ」を表示して、ビジターに悪質な誘導ではないことを案内することにしました。
最近、プラグインを利用して興味を持ったcssが出来れば敷居がちょっとばかり低いというjQueryを学習してみむ。
近頃、勉強の為にご本を買いました。
Amazonで見るWeb制作の現場で使うjQueryデザイン入門[改訂新版]
(Web Professional Books) 大型本 – 2013/3/7
(Web Professional Books) 大型本 – 2013/3/7
改訂新版がでました！：最新のJquery1.9とHTML5に対応。価格もお安くなってます。
jQueryがまったく手探り状態でも基礎から学べました。これ一冊実践したらjQuery結構使えるようになるんじゃないかな。と期待しています。
ただ、jQueryを使う上でのjavascriptのこれは覚えとけという解説がもうちょっとあればなぁ。それを言っては欲張りなんだけども。きっと本がもう一冊書けちゃうボリュームになってしまうんだろうな。
javascriptの何が知りたいのかのとっかかりになるので、そこから発展して学習するのもいいかもしれない。
こちらの本の中にもフローティングウィンドウの実例があり、すごいのがWebで全文読めるということ。でも、ゴロゴロしたりしながら読める書籍はやっぱりいいです。jQueryの概要はだいたい掴めたような…。自分で１からというのはまだまだですが。
しかし…『Web制作の現場で使う jQueryデザイン入門』の作例はドラッグできるとか高性能すぎます。そんなに凄いのじゃなくていいんです…。
ただ元サイトから飛ばされてきた時、出来れば真ん中くらいにウィンドウがあって、閉じられさえすればいいという。
こんなん、書いて見ました。合ってんのかなぁ。動いているけど…突っ込みお待ちしてます。
そしてIE方面はガン無視してます。すみません。最近IE対策のなにもかも面倒になってきた。
さわやかサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var winW = $(window).width(); if(document.referrer.indexOf("gonz")!=-1){ $("#floatWindow").css('left', winW/2-$("#floatWindow").width()/2) .fadeIn("fast"); } $("#floatWindow a.close").click(function(){ $("#floatWindow").fadeOut("fast"); return false; }); }); </script> |
|
1 2 3 4 5 6 7 |
<div id="floatWindow"> <a href="index.html" class="close"><img src="image/soba_close.png" alt="閉じる"></a> <dl> <dt>引っ越してきました。</dt> <dd>さわやかまみれ旧サイトからhttp://homepage2@nifty.com/gonz/ジャンプしました。ブックマーク、リンク等のご変更おねがいします。ぺこっ。</dd> </dl> </div> |
<div id=”floatWindow”>は<body>直下に置く。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#floatWindow { display: none; position:absolute; top:220px; width: 600px; /* フローティングウィンドウ幅*/ height:280px; /* フローティングウィンドウ高さ */ } #floatWindow a.close { position: absolute; right: 10px; bottom:10px; } #floatWindow a.close img{ border: none; } #floatWindow dl { width:100%; height: 100%; background: url(image/soba.jpg) no-repeat top left; /* イラストor色 */ margin:0; border-radius: 8px; /* 装飾 */ box-shadow: 5px 5px 10px #666; /* 装飾 */ } #floatWindow dl dt { height:54px; /* 適宜 */ padding-top:28px; /* 適宜 */ padding-left:326px; /* 適宜 */ margin:0; } #floatWindow dl dd { height: 132px; /* 適宜 */ padding-left:326px; /* 適宜 */ margin:0; } |
css、scriptは適宜外部ファイルに。
position使いすぎなページのためのz-indexなど、必要の無いものは端折ってます。
当サイトでは画像を使いaltで文字を入れていますのもここでは端折っています。
重要なのはcssの #floatWindow｛display: none; }
この指定で非表示にしてある#floatWindowをjQueryの.fadeInという命令で操るらしい。
まず、旧サイトからのアクセスだけを振り分けたい。
if(document.referrer.indexOf(“gonz”)!=-1)
リファラに旧サイトのアドレスの一部、”gonz”の文字列が無いときは-1の値が返る。!=は「等しくない」
gonzは無い（-1）と等しくない。つまり、gonzがあるよという場合（if) は命令を実行するよ。
ウィンドウを開くんだけど横位置真ん中に開きたいなぁ。
var winW = $(window).width(); ブラウザのウィンドウサイズを収得して変数（winW）を宣言。
$(“#floatWindow”).css(‘left‘, winW/2-$(“#floatWindow”).width()/2)で
#floatWindowのcssにleftプロパティと
計算式「winWブラウザウィンドウ幅÷２-フロートウィンドウ幅÷２」で求められた値が追加され、水平方向真ん中に位置指定。
.fadeIn(“fast”) でフェードインのアニメーションをしつつ表示（開く）。
もちろん閉じるボタンで閉じられないと。
$(“#floatWindow a.close”).click(function(){
#floatWindowの中のaクラスcloseをクリックした時、
$(“#floatWindow”).fadeOut(“fast”);
return false;
#floatWindowをフェードアウトのアニメーションしつつ非表示に（閉じる）。と。
return false;は<a>の時はお約束だよ。
div#floatWindowの中身はdlじゃなくても何でも。最初に『Web制作の現場で使う jQueryデザイン入門』見て忠実にやってみた名残だったり。
今回は、script意外の所の凡ミスでかなり苦労しました。<body>直下のdivでないと動かないというのに、どっかのdivの閉じタグが一個足らんかったという…子要素判定となっておりました。
SafariのWEB インスペクタがなければ発見できなす。
さて、次は何をしてみましょうかね。
