http://www.point-map.com I introduce information to help WEB Connection Thu, 18 Dec 2008 07:47:33 +0000 http://backend.userland.com/rss092 ja WordPress2.7の日本語バージョンにアップグレードしました。 一言で言うとダッシュボードが全然違う・・・ しかし色んな機能が搭載されてて、このダッシュダードに慣れれば使いがっては良くなることは間違いないでしょう。 以前のダッシュボードからガラっと変えてきたWordPressさすがです。今後の発展の見据えてのことでしょう（＾＾） 取りあえず便利になったなと思う機能を紹介していきます。 ・ダッシュボードの右上にscrenn Optionsがあります。これをクリックするとウィンドウが開き、エントランスダッシュボードに表示したい項目を選択できます。（便利！） ・新規ブログを左のQuickPressから簡単に投稿できまるので、新規ブログ作成の画面を立ち上げなくてよくなりました。（便利！） ・今回2.6からのアップグレードを自動プラグインで行ったので確信がないんですが、恐らく自動アップグレード機能が搭載になってるかも・・・（とても便利！） ・新規ブログのプレビューモードが搭載になりましたって以前からあったかも・・・ とまだまだ優れた機能があると思うので、分かり次第公表していきます。 http://www.point-map.com/wp/archive244.html フォーム入力覧で選択項目を複数選択したい時に、チェックボックスを用意する人が多いとは思いますが、項目が多くなると表示の仕方に注意したり、モバイルサイトではプルダウンにしたりと色々と対策を考えなくてはなりません。 そこで今さらなんですが、プルダウンで複数選択する方法を紹介します。 普通のプルダウンのサンプル（Ctrlを押しながら選択して下さい） 項目1 項目2 項目3 項目4 項目5 <form  name="sample" action="#" method="post"> <select  name="test1"size="3"> <option value="1">項目1</option> <option value="2">項目2</option> <option value="3">項目3</option> <option value="4">項目4</option> <option value="5">項目5</option> </select> </form> 複数選択できるプルダウンサンプル（Ctrlを押しながら選択して下さい） 項目1 項目2 項目3 項目4 項目5 <form  name="sample" action="#" method="post"> <select  name="test1"size="3" multiple="multiple"> <option value="1">項目1</option> <option value="2">項目2</option> <option value="3">項目3</option> <option value="4">項目4</option> <option value="5">項目5</option> </select> </form> 以外にみんなしらなかったりして・・・ 普通はプルダウンで選択するものはひとつでいいと個人的に思います。 http://www.point-map.com/css/archive235.html ■　DELL　vostro200 スリムタワー　XPダウングレードバージョンでの再インストールについて 先日DELL　vosro200を購入したんでしが、予算を少しでも抑える為にパーテーション設定を自分ですることにしました。 商品到着後すぐに再セットアップを開始し、事前に調べていた情報どうりパーテーションの設定を完了して起動して確認！パーテーションができてることを確認。 次にドライバをインストールし（わかる範囲で・・・） 再起動を何回か繰り返しドライバ類インストール完了？ 次に必要になるOfficeやAdobeのソフトをインストールして終わったはずが・・・ 電源オプションで、スタンバイが半透明になっていて、スタンバイにできない！ディスクトップでプロパティーし電源設定を確認するも、ここにもスタンバイがない・・・なぜだ？ 色々と調べたらどうやらディスプレイドライバあたりが怪しいことが判明、ＤＥＬＬのドライバＤＶＤをもう一度確認してｉｎｔｅｌのディスプレイドレイバをインストールしたらスタンバイが復活！！ あ～以外に情報がなく一週間もかかってしまいました。 http://www.point-map.com/director/archive232.html WordPress 2.6.3は発表されたので、またバージョンアップかと憂鬱でしたが、WordPress 2.6.2からのバージョンアップは実は簡単な作業だと言うことです。 ダウンロードしたWordPress 2.6.3を解答しwp-includesの中にある wp-includes/class-snoopy.php wp-includes/version.php を上書きするだけで簡単にバージョンアップ完了です。 WordPress 2.6.3 日本語版リリースのお知らせ http://www.point-map.com/wp/archive227.html 今回は平日開催にも関わらず、大勢の参加者が既に来場されてました。 少し遅れ気味でも大丈夫かなと思いましたが、何のことはありません、『脱・やらず嫌い！デザイナーさんのためのFlash ActionScript 3.0 入門以前編』／秋葉秀樹はほとんどチンプンカンプンでした。 おさらいとして、忘れないうちにメモしときます。 ■　session1 『脱・やらず嫌い！デザイナーさんのためのFlash ActionScript 3.0 入門以前編』／秋葉秀樹 遅れてきた為、詳細はあまり理解してないですが、ActionScript 3.0のイベントハンドラの使い方とか、サンプルを使い解説してくれました。 じっくり見たかったんですが残念です・・・ ■　session2 『はじめてのSubversion（サブバージョン）』／西畑一馬（to-R） サブバージョンとは？から始まり、サンプルを使い解説して頂きました。 簡単に言うとバックアップツールと言うことです。バックアップを管理するフォルダ（リポジトリ）、からローカルにチェックアウトして管理するフォルダ（作業用）を分けてどのファイルが最新なのかチェック（コビット）してくれます。 参考資料サイト ・TortoiseSVN（インストール） ・Backlog （アカウント発行） プロジェクトを管理する為には、とても便利になります。 ■　session3 『alt属性考』／小嶋 新（しゃらく） アクセシビリティを考慮したaltの使い方など、意味合いの深いお話でした。（アルト？オルト？） alt属性ガイドライン（HTML5） ・装飾的なアイコンなどにはなし ・意味を持つ画像は記入 ・メインコンテンツとしての画像はなし ・ロゴについては基本サイト名 ・図・グラフ（説明あり）はなし ・図・グラフ（説明なし）記入 などガイドラインを決めるとスピードや、アクセシビリティにつながる。 ■　session3 『ベジェ再入門』／鷹野雅弘（スイッチ） ペジェ曲線は画像ツールを使いには必修！ ・ペンツールの基礎を抑える ・ベジュ曲線の原理、原則を抑える ・あとはひたすら練習！ 以上走り書きではありますが、メモしときます。 詳しくはCSS Nite in Osakaでお願いします。 http://www.point-map.com/director/archive224.html WordPressのお問い合わせフォームなどが簡単に設置できる便利なプラグインContact Formのちょっとした対策のご紹介 まずはWordPress.org のプラグインディレクトリからダウンロードして、お使いのサーバーのPluginにアップするだけで使用できます。 使用ができるまでの過程はまた後ほどと言うことで・・・ 設置が終了してフォームをオリジナルにカスタマイズする時に、タグの作成にてタグを埋め込みますが、このタグを利用して、送信されるメールの本文に表示させたいときに普通ならそのままペーストしたいとこなんですが、そうもいかないみたいです。 例） タグの作成をすると『次のコードをコピーしてフォームにペーストして下さい。』と表示されます。 [text text-000] このタグをフォーム内の表示させたいとこにペーストします。ここまでは普通です。 で次に送信されるメールの本文にタグに中身を表示させたい時に、普通なら [text text-000] とそのままペーストすればいいと思いますよね？ 実際にテストがてらフォーム内容を入力して送信すると送られてくるメールの本文に[text text-000]と表示されてしまいます。 実は、ここからが重要で送信されるメールの本文にタグに中身を表示させたい時は [text-000] と変更をしてあげないといけないみたいです。 まっ参考がてら紹介してみました・・・ http://www.point-map.com/wp/archive221.html 近年では、サイト制作する過程でSEO対策を意識したサイト構成が求められています。 しかしSEO対策を意識していても、実際クライアント様が、どのキーワードで対策して欲しいか明確になっていないケースや、ビックキーワードでの、要望が多々あります。これはサイト制作前の打ち合わせでクライアントにちゃんとSEO予備知識をコンサルティングすることで対策が取れると思います。 キーワードが決まれば、それに伴う外部対策や内部対策の施術をし、あとはそのキーワードで検索されるかチェックする日々が続きます。 この『チェックする日々』と言うのが実は、簡単そうで手間のかかることなのです。そこでチェックするのに便利なツールのご紹介です。 ■　検索順位が、見える。検索順位チェックツールGRC このツールは無料版と有料版があり、無料版だと検索キーワードが5件までの制限がありますが、個人で1サイトのみの使用する分には、ことは足りると思います。複数サイトやキーワードが多い場合は有料版でパーソナルライセンス、ビジネスライセンスがありますので、ご利用条件に合うプランを選択して下さい。 実際に使用するにあたり、[編集]→[項目新規追加]から、URLとキーワードを設定し、あとは紫色のチェックボタンを押すだけで、チェックが始まります。（※1日1回のみのチェックになります） このチェックした結果は記録されるので、長いこと使えば使う程、どんな時に変動があるのか、どういった対策をすれば変動があるのか、解るかもしれません・・・もしくはアルゴリズムの変化などが解るかも・・・ 取り合えず無料でもいいので実験がてら使ってみてください。 http://www.point-map.com/seo/archive215.html フォーム内にあらかじめ表示させてることで、入力する内容や、サンプルの代わりになりますが、入力する時にテキストを一度削除してからの入力となるので、とてもめんどくさいです。 そこでテキスト入力する時にあらかじめ表示されてるテキストを自動でクリアされるJavascriptをご紹介します。 ■　HTMLソースを普通にformタグで作成します。 サンプル <input style="color: #808080; width: 150px;" type="text" value="ここは自由テキスト" /> スタイルでテキストのカラーの選択とテキストエリアの幅をしていします。 ■　カーソルの動作条件のＪａｖａｓｃｒｉｐｔのを上記ソースに追加します。 サンプル <input type="text" value="ここは自由テキスト" style="color: #808080; width: 150px;" onFocus="HideFormGuide(this);" onBlur="ShowFormGuide(this);"> onFocus属性とonBlur属性を加えています。 onFocusには、入力欄にカーソルが入ったときに実行されるJavaScriptを記述します。onBlurには、入力欄からカーソルが出たときに実行されるJavaScriptを記述します。 ■　上記ソースに追加したＪａｖａｓｃｒｉｐｔを動かすＪａｖａｓｃｒｉｐｔを作成します。 サンプル var GuideSentence = 'ここは自由テキスト'; function ShowFormGuide(obj) { // 入力案内を表示 if( obj.value == '' ) { obj.value = GuideSentence; obj.style.color = '#808080'; } } function HideFormGuide(obj) { ... http://www.point-map.com/%ef%bd%8a%ef%bd%93/archive210.html 最近ディレクションや企画書などを頻繁に制作することが増えてきましたが、便利だなと思うツールやサイトをご紹介します。 ■企画書の制作編 SEO対策を提案するときに便利なサイト SEO検索エンジン Pythagorasここでサイトデータ、ページバックリンク、ドメイン取得日、ページ数などがわります。 使い方としては、ウェブページを選択しURLを入力するだけで、サイトデータがでるのでページバックリンクなどを企画書に取り入れれば、クライアントが目を引くでしょう。 サイトマップの提案するときに役立つソフト パワーポイントの組織図を使うと簡単に関連性や階層分けをすることができるので便利だと思います。その他エクセルでも簡単にできると思います。 サイトコンテンツ内容の提案するに役立つソフト エクセルでコンテンツ内容の一覧表を作ります。ページ別にコンテンツ内容、システム内容などを一覧で確認できると全体のサイトの全貌が把握しやすく、クライアント側も完成図のイメージがしやすくなります。 http://www.point-map.com/director/archive207.html 先日某セミナーにて面白い情報をGETしました。 内容を簡単に言うとSEO対策するならまずは無料ブログでサイトを作り、そこからSEO対策をするサイトへとリンクする言うとてもシンプルな内容でした。 ブログなら簡単に更新でき更新頻度が高くなる為、検索エンジンのロボットととても相性がいいとの事、で実際に無料ブログを作成し、実験してみると確かにインデックスされてる「すげー！」 で得に無料ブログとして評価高いのは、現在では数社あるようだが、今後を見据えるとアメーバブログがいいようです。 ちなみに即効性があるのはYahooブログのようである・・・ http://www.point-map.com/seo/archive205.html WordPress2.6.2が9月9日に発表になりました。 WordPress2.5以降頻繁にバージョンが上がっていくので、ダッシュボードにアップグレードしなさい的なコメントがでるのがいつも気になる存在でした。 しかしWordPressを自動アップグレードしてくれるプラグインを見つけてからは、面倒な作業をしなくてもダッシュボードで簡単にアップグレードできるようになりました。 Wordpress Automatic Upgrade plugin « Techie Buzzでプラグインをダウンロードする 解凍後サーバーにアップロードし、ダッシュボードのプラグイン設定で使用するにする。 ダッシュボードのアップグレードして下さい的なコメントの上にAutomatic Upgradeのclick here（確か？）がででくるので、画面に従い次に進んでいくとアップグレードが完了していました。 詳しく説明したかったんですが、一度アップグレードしたら肝心のステップ手順の項目がなくなっていたので、またアップグレードが出た時は細かく説明できるよう頑張ります。 http://www.point-map.com/wp/archive200.html 最近Ｓａｆａｒｉが気に入り使い始めたんですが、どうもFirefoxのアドオンのFireGesｔｕｒｅｓを使い慣れたせいで、右クリック長押しで戻る癖が・・・ Ｓａｆａｒｉにも便利なアドオンあったらな～と情報を集めていたら、アドオンではないんですが、フリーのソフトかざぐるマウスを見つけました。 ダウンロード後、解凍するだけで使えるようになり、マウスジェスチャーの設定でＳａｆａｒｉにチェック！ついでにＩＥにも・・・うーん面倒なので全部チェックしてみた。 でＦｉｒｅｆｏｘのアドオンのFireGesｔｕｒｅｓを無効化にして、ＳａｆａｒｉやＩＥでもサクサク右クリックで戻れるようになり、ストレス解消！ 詳しくはかざぐるマウスを参考にして下さい。 http://www.point-map.com/browser/archive189.html Googleがついに新世代ブラウザを発表しました。 Googleの検索画面からダンンンロードができるようになっていますので、さっそくインストールしてみることにしました。 （インストール中・・・） インストール後ブラウザを立ち上げると従来のIEやFirefoxとのイメージとは全然違うとてもシンプルなもので、どうやって使うのだろうと戸惑いました。しかし体感スピードはサクサク反応する感じでストレスなく動くので、あとはツールバーや拡張機能が増えればと思います。 http://www.point-map.com/browser/archive183.html 以前からFirefoxでリンクをクリックをした時にでる点線が気になってましたが、Firefoxの使用だから仕方が無いと思ってました。 しかしひょんな事から、実は点線は消せるらしいと知り、調べた結果to-Rさんが公開しているリンクをクリックした際に表示される点線を消す方法でやってみました。 a:focus{ outline:none; } これを記述するだけで解決しました。 http://www.point-map.com/css/archive175.html 米Microsoftは米国時間2008年8月27日，次期Webブラウザ「Internet Explorer（IE）8」のベータ2版を公開し、ベータ2版は一般ユーザーにも使ってもらいと発表した。 と言うことなので、さっそく実験がてらInternet Explorer8（IE8） のベータ2版をインストールしてみました。 ■感想 見た目はIE7とさほど変わらないのですが、とにかく軽いです。FireFox3.1より下手すると軽いかも知れません・・・ しかしまだチラホラバグ的な感じが見受けられます。 今後の正式版が楽しみです！ ■Internet Explorer8（IE8）から元に戻す もしIE6やIE7の戻したい場合はアプリケーションの追加と削除でInternet Explorer 8　Beta2を削除すれば元のIE6やIE7に戻せます。 http://www.point-map.com/browser/archive167.html 以前CSS Nite in Osaka, Vol.10でＡｄｏｂｅの次期バージョン「Dreamweaver CS4」「Fireworks CS4」の話しを聞きましたが、その後体験版をダウンロードしようか？しまいか？と悩んでいます。 なぜなら？ 体験版のダウンロードに使用期間があり、48時間しか体験できないみたいで、実際に48時間で何がわかるねんと思っている次第でございます。しかしCS3ユーザーは次期バージョンがでるまでは使えるらしいですけど、自分はCS2ユーザーなので残念・・・ でも実験してみたいので、ダウンロードしちゃいました！ ダウンロードにはAdobeのアカウントかメールアドレスと少々の英語理解力が必要かと思います。（自分は英語が得意ではないですが何とかダウンロードできました。）ダウンロードはAdebe Labsでできます。 今から48時間でどこまで実験できるか、わかりませんが色々試してみたいです。 でDreamweaverCS2とDreamweaverCS4を同時に立ち上げて、色々とチャックしようと思いましたが、同時にDreamweaverを立ち上げることができないと言うことがわかりました。 地道にチェックしていきます・・・ http://www.point-map.com/director/archive158.html MovableType4.2の発表と共にプラグインの誤作動が多発している中、お問い合わせフォームのプラグインA-FormもMT4.2対応版を発表しました。 前のバージョンでは確認画面を表示する際にテンプレートモジュールのヘッダーとフッターを自動に読み込んでいた為、MT4.2には対応できませんでした。（テンプレートモジュールのテンプレート名がMT4.1とMT4.2では違う為） 今回発表になったMT4.2対応については、A-Form：MovableTypeにフォーム設置できるMTプラグイン｜Web制作のアークウェブにてダウンロードができます。 しかしMT4.2からはグローバルテンプレートの使い方が便利になりグローバルテンプレートで共通にヘーダーやフッターを使うとA-Formでは対応できないのです。 簡単ではありますが、ではどうしたらいいのか自己流で（自分の為に）解説してみます。 まずインデックステンプレートにお問い合わせ用のテンプテート用意し、グローバルテンプレートモジュールもインクルードします。 <$mt:Include module="ヘッダー"$> <div id="low-content" class="clearfix"> <$mt:Include module="グローバルサイド"$> <div id="rightbar"> <mt:Entries category="お問い合わせ"> <$mt:EntryBody aform="1"$> </mt:Entries> </div> </div> <$mt:Include module="フッター"$> これでお問い合わせフォームの入力画面が完成します。 さらグローバルテンプレートでヘッダーやフッターとして使っているテンプレートを、A-Formを使うブログのテンプレートモジュールのバナーヘッダーやバナーフッターと入れ替えます（テンプレート名はそのままで） この時、サイドバーとかある場合はバナーヘッダーかバナーフッターに入れ込んでおきます。 そうする事により確認画面になっても、A-Formのプログラムでテンプレートモジュールのバナーヘッダー、バナーフッターを自動で拾って表示させるので問題なくサイドバーも表示されるでしょう あとは動作確認して問題なければ終了です。 他にも色々やり方があると思うので、また何かあればご報告したいと思います。 http://www.point-map.com/mt/archive150.html 最近に入りMovableType4.2の発表と共に様々な情報が飛び交ってますが、実際にバージョンアップと共に気になるのがプラグインの対応です。ここでは実際に動作チェックができたプラグインの報告をしていきます。 ■　Sort Categories And FoldersはMovableType4.2で作動確認！ このプラグインはMTをCMSとして使いサイトを制作する為には、欠かせないプラグインです。 カテゴリーやフォルダの順番を管理画面から操作できる為非常に便利ですが、MT4.1対応のプラグインをそのまま導入しても何の問題もなく使うことができました。 プラグインダウンロードや設定に詳しい情報はThe blog of H.Fujimotoを参考にして下さい。 ■　A-FormはMovableType4.2で作動するが、問題あり！ お問い合わせフォームを簡単に設置できるプラグインとして、多くの人が使用しているプラグインの１つですが、MovableType4.2では設置できたとしても実際に動作確認すると、確認画面になるとサイトデザインが崩れる問題があります。 これはA-Fromの設定に確認画面に進む時はテンプレートモジュールのヘッダーやフッターを読みに行くようになっており、MT4.1ではヘッダー、フッタ－がありますが、MT4.2ではHTMLヘッダー、バナーヘッダーと言った形にテンプレートモジュールの形態が変わった為に起こると思われる現象です。 テンプレートモジュールに新たにヘーダー、フーターを作ったとしても、MT4.2では再認識できずに現在ではまだ対策が見つかりません・・・ 今後MT4.2の対応のなると思われるので、待ちましょう。 詳しい情報はMovable Typeにフォームを追加できるプラグイン「A-Form」をご紹介を参照して下さい。 http://www.point-map.com/mt/archive138.html ■CSSを使い透過PNGをIE6に表示させる方法 IEには視覚効果用の独自のフィルタ（DirectX関数）が存在し、そのうちの『AlphaImageLoader()』を使って透過PNGを表示させるテクニックです。 しかしこのやり方には少し問題があり、img要素に直接指定が出来ずdiv要素などので囲ってimgを非表示にして、div要素の中に画像を別に表示させるやり方になる。 <div id="png"> <img src="touka.png" /> </div> 透過PNGを指定したimgをブロック要素で囲みHTMLを作成します。 #pmg img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); } img要素とそれを囲む要素にたいしてフィルタを指定し「opacity=0」が効いて画像が透明になります。 #png{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='touka.png',sizingMethod='scale'); } AlphaImageLoaderで新たに透過PNGの画像を読み込んできます。 <!--[if gte IE 5.5]> <![if lt IE 7]> <link type="text/css" href="ie.css" /> <![endif]> <![endif]--!> 最後にIEだけに読み込みように条件コメントを用意します。 これで透過PNGがIEでも表示できるようになりますが、background-repeatが使えない為、使い方が限られてきます。 しかしこのやり方を覚えておけば、他にも便利に使えるところがあるといいのだが・・・ http://www.point-map.com/css/archive132.html ■　WordPressでタイトルの順番を変えるプラグイン WordPressを使ってサイトを運営する時に、どうも気になるのがタイトルの順番です。何も特にしてない場合は、サイト名>>ページタイトル（カテゴリー名など）の順番になってしまいます。 実はこれが問題で、SEO対策（検索エンジン最適化）を考えると、対策したいキーワード>>サイト名にするほうが効果的だと言われているのです。 Point map Director’sを例に見てみると解ると思いますが、投稿画面でMTタグを使うプラグイン>>Point map Director’sとエントリータイトル>>サイト名にしています。これをすることによって、Point map Director’sより投稿画面でMTタグを使うプラグインの方が検索結果に影響しやすいことになります。 そもそも検索する人が直接サイト名（Point map Director’s）を入力するケースが少ないので、Point map Director’sはあまり目立たせなくて、ページタイトルなど（検索されたいキーワード）を目立たせる方がSEO対策になるのです。 話しが少しそれましたが、WordPressでタイトルの順番を変えるプラグインをご紹介します。 まずはhttp://www.netconcepts.com/seo-title-tag-plugin/でSEO Title Tag 2.1.3をダウンロードし、pluginsフォルダにアップロードします。 ダッシュボードのプラグインで使用にしたら、設定画面に開き、設定をすれば、あっと言う間にタイトルが逆転します。 SEO対策の効果はまちまちですので、あとは自力で頑張って下さい。 http://www.point-map.com/wp/archive129.html