無限の翼 MUGEN NO TSUBASA　結希猫個人Webサイト

自分用にメモメモ

Twitterだと文字数が決まってるので、ハイパーリンクは貼れるけど文字数が足りずに、完全にアドレスが記入できないと思います。
そういうときは、URLを短縮してもらえるサイト様があるので、
こちらでアドレスを短くしちゃいましょー(*'-')

◎TweaK
http://tweak.tk/

例えば...遊戯王のブラックマジシャンガールを画像検索アドレスが

◯グーグルのアドレス
http://images.google.com/images?hl=ja&safe=off&client=safari&rls=en&um=1&q=ブラックマジシャンガール&ndsp=18&ie=UTF-8&sa=N&tab=wi

◯TweaKサイトで変換アドレス
http://uj9ba.tk

こんなに短く！(;°ロ°)スゲー
便利なので活用しましょうねー(*'-')ｂ

あー忘れてました...（汁）
TwitterのブログパーツをTOPページに配置していますー。
ここの記事の更新が遅いので、こっちでもうちょっとアクティブに情報を伝えられたらーというのと、会社の方でもいろいろ商材として使いたいみたいなのでテスト運営も兼ねてるのが狙いでっす。

まー基本駄文なので...
みちゃるかね！っていう気持ちの時だけでOKデス（笑）

自分用のメモですので、ワカンネ！っていう方はスルーでお願いします(*'-')

メニューボタンを押すと、下にリンク項目がずらずら〜と表示される
一昔前にえらい流行ってたプログラムの Ajax版をメモメモ。
ウェブページの数量が多いクライアントにお願いされて設置したものです。

使用するプログラムはこちら！
◎JavaScript Dropdown Menu with Multi Levels
http://www.leigeber.com/2008/11/drop-down-menu/

ええ...
完全英語サイトなのでサッパリですね！（笑）

まーサンプルを見てもらえれば分かりやすいかな？

◎サンプルはこちら
http://sandbox.leigeber.com/dropdown-menu/index.html

◎ダウンロードはこちらから
http://forum.leigeber.com/index.php?app=downloads&showfile=7

「Download File」ボタンからダウンロードしてくだされ

で、設置方法なんですがー

解答したフォルダの中に含まれてる、「script.js」「style.css」を、
ページのヘッダー情報内で呼び出すのは基本なので、割愛します。
※名称が安直なので「dropdownmenu」等、どちらもファイル名称の変更をオススメ

で、本体ソースコードには、リストタグの「ul」「li」を使いますので、
css構築する人には嬉しい限りだと思います！ウレシイデス（笑）

まず、Javascriptの読み込み指定をbodyタグの中で記述します。
えーと、ドロップメニューより後であれば場所は任意で大丈夫です。


<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>


それから、本体の設置方法ですけど、


<ul class="menu" id="menu">
　<li><a href="#" class="menulink">Dropdown One</a>
　　<ul>
　　　<i><a href="#">Navigation Item 1</a></li>
　　　<li><a href="#">Navigation Item 2</a></li>
　　　<li><a href="#">Navigation Item 3</a></li>
　　</ul>
　　</li>
　</ul>


本体の「ul」に「class="menu" id="menu"」を追加。
メニューメインボタンの「li」に「class="menulink"」を追加します。
これでドロップダウンメニューは完成です(*'-')

で、2階層以上のページを作るときは、


<ul class="menu" id="menu">
　<li><a href="#" class="menulink">Dropdown One</a>
　　<ul>
　　　<i><a href="#">Navigation Item 1</a></li>
　　　<li><a href="#">Navigation Item 2</a></li>
　　　<li><a href="#" class="sub">Navigation Item 3</a>
　　　　<ul>
　　　　　<li class="topline"><a href="#">Navigation Item 3−01</a></li>
　　　　　<li><a href="#">Navigation Item 3−02</a></li>
　　　　　<li><a href="#">Navigation Item 3−03</a></li>
　　　　　<li><a href="#">Navigation Item 3−04</a></li>
　　　　　<li><a href="#">Navigation Item 3−05</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　　</li>
　</ul>


階層をつくりたいメインメニューボタンの「a」タグに「class="sub"」を追加。
次の階層の一番上になるメニューボタンの「li」に「topline」を追加します。
これで、右側に次の階層のメニュー一覧が表示されます。

この指定を繰り返すだけで、横幅がある分だけ深い階層のメニューを表示することができます。
以上です！

小難しい設定とかないので、かなり楽々で、おお！な感じじゃないかと思われます(*'-')

にしても...
この手の検索ワードって、なにが正解なのでしょうね...
「アコーディオンメニュー」？　「ドロップダウンメニュー」？　「スクロールメニュー」？

うーん。ワカンニャイヽ(;´Д`)ノ

◎参考サイト様
マルチ階層可能なドロップダウンメニュー/ナビゲーション/SolidStateEveryday
http://solidstate.jp/Navigation/DropdownMenu/script_50.html

自分用のメモですー。興味ない方はスルーで(´ー`)

ActionScript 1〜2で、外部リンク指定として使っていた、ｃは、ActionScript 3 ででは使えないので、ActionScript 3 での構文を掲載しておきます。

FLAファイルの１フレーム目に以下を記述。

　　 // イベントを設定
　 stage.addEventListener( MouseEvent.CLICK , onClick );
　 // 画面クリックをするとonClickが動作するイベント
　 function onClick ( event:MouseEvent ) {
　 // URLRequestを設定
　var url:URLRequest = new URLRequest( "http://xxxxxx.com/" );
　// 実際にページに飛ぶ
　navigateToURL( url );
　 }

一応これで『getURL』の用に、SWFファイルをクリックすると、飛び先（http://xxxxxx.com/）にジャンプします(*'-')

で、ここからが大事！

この「navigateToURL」の指定は強制的に「新規ブラウザを開く（_blank）」指定になってますので、現在の画面上に表示を行なうには以下の方法をとって下さい。

　　 // イベントを設定
　 stage.addEventListener( MouseEvent.CLICK , onClick );
　 // 画面クリックをするとonClickが動作するイベント
　 function onClick ( event:MouseEvent ) {
　 // URLRequestを設定
　var url:URLRequest = new URLRequest( "http://xxxxxx.com/" );
　// 実際にページに飛ぶ
　navigateToURL( url,"_self" );
　 }

赤字の部分を追加。navigateToURL();内に、「_self」指定を加えるだけでOKです。

で、

この「_self」指定した途端...
ローカル上で、SWFファイルをクリックしてもなにもならんぞーーヽ(;´Д`)ノ

って現象が起きるかも知れません...。猫は起きました（笑）

この原因は、「Flash Player」の方あって、

これは、Flash Player 9,0,115,0 以降で、
SWFファイルが、リンク指定したリンク先のhtmlと異なるドメインにある場合、
ターゲットとして「_self」「_parent」「_top」のいずれかを指定すると、
SWFファイルからのリンクが機能しないようになっています。
（※もちろんローカル上も含みます）

で、この対処方法は、

パブリッシュしたときに、掃き出されたHTMLファイルを開いて、
ソースコード上にある「AllowScriptAccess」の指定箇所を
『always』に変更して、保存してください。

これでローカル上からでも確認できると思います('◇')ゞ

SWFファイル内に入れ込むスパムプログラム対策なんでしょうけどね〜
知らない人は知らないので、この仕様はきついなーと...

今回はこんな感じです。

ActionScript １〜２と、３は完全に別物なので、折角覚えたのにまた覚え直しには躊躇するんですけどね〜。
CS4を導入する取引先が増えてきたので、否応なしでも、「ActionScript 3 」を覚え直さないとダメだろなー...と、猫はいってみた(´Д｀;)ヾ（とある禁書風ｗ）

◎参考サイト様。
F-site | [AS3] getURLのように外部ページに行くには

くはー！GIGAZINを見てちと驚いたのですが
どうもブログ検索サービス「テクノラティジャパン」が、10月23日サービス終了するそうです...

◎Hyobans(ヒョーバンズ)、並びにテクノラティジャパンサービス終了のお知らせ
http://www.technorati.jp/weblog/2009/10/service_close_hyobans.html

「テクノラティジャパン」は、もともとGooglePageRankが高いために、
ブログをユーザー登録するだけでお手軽にリンクポイントアップが見込めるといことで、
以前にお手軽なSEOとして紹介させていただいたサイトだけに、業者の猫的にかなり衝撃の２文字(ノД｀)マジカヨ

一応、以前に登録していたアカウントに関しては、親元の「テクノラティUS」へ移行することが出来るそうです。

◎アカウントの移動手続き
http://www.technorati.jp/weblog/2009/10/account_migration.html

具体的な移行手続きは、
10月14日～12月31日の期間内に「テクノラティUS」にてログインするだけっぽいのかな。

とりあえずココもやっておきましたけど...
SEOとしてのどこまで使えることやら...

いままでのロールオーバーイメージの猫的なやり方は、
CSSを用いたをずっと書いてたのですけど、
ちょっとソースが強引な上に、
閲覧者側の回線・PCスペック等に依存しちゃうので...

設置が楽で、なにか良いものないかにゃ〜

あー設置が楽ってことなら、Dreamweaver等のソフトを使えば良いジャン！
って事になりそうなんですけど、余計なソースが多いので邪道だな〜論外(;´ρ｀)

まー捜してみたら外部プログラムファイルを読み込ませて、
ロールオーバ前と後の画像を用意するだけでＯＫっていうプログラムをみつけたので、自分のメモ用にカキカキ。
ですので、興味のない方は見なかった事にしてください(/ω＼)

参考サイト様：
◎Sapphirus.Biz　簡単ロールオーバーイメージ - Javaスクリプト
http://www.sapphirus.biz/javascript/rollover/

こちらのページより「rollover.zip」をダウンロードして
『rollover.js』のみ使用します。

設置手順は、

（１）『rollover.js』の任意のフォルダに設置。（今回は、jsフォルダ）
HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す。

<script src="ドメイン名/js/rollover.js" type="text/javascript"></script>

（２）ロールオーバーさせたい画像をロールオーバ前と後の２種類用意する。
それで、ファイル名を

◎ロールオーバー前の画像　→　○○○_off.jpg
◎ロールオーバー後の画像　→　○○○_over.jpg

という風に、ロールオーバー前なら「_off」、
ロールオーバー後なら「_over」を名称に加え、フォルダ内に設置。
※画像ファイルの拡張子はどれでもＯＫ

（３）HTML上にロールオーバー前の画像をimgタグで呼び出せば完了！

画像に関しては、違うフォルダでも読み込んで来るので、
いくつも違うパターンのメニューを用意するときは、名称に注意してください。

『rollover.js』さえ読み込ませておけば、あとは画像を用意するだけなので、
すっごい楽じゃないでしょうか？（＝ω＝）

気になる読み込みの速度とかは、まだ検証してないので、にんともかんともですが(´ー`;)
たくさんロールオーバーイメージを設置しないといけない！
というときは、利用してみてはどうでしょうか。

ちょっいと仕事の方で、
PCと携帯ユーザー向けの簡単なアンケートフォームを急遽作ってほしいって言われてバタバタ作成していて
アンケートに答えたら抽選でプレゼントという形を取るので、
連絡先用のメールアドレスを記入するフォームを追加したのですけど、
携帯で入力しようとおもったらデフォルトが「ひらがな」モードになっていたので...これは使い難い！

という事で、いろいろ探してみましたら、紹介してあるサイトさんを見かけたので、
自分のメモ用にカキカキ(´_ゝ`)

■DoCoMoの場合

inputタグに「istyle」属性を入れ込みます。

istyle="1″
全角かなモード

istyle="2″
半角カナモード

istyle="3″
半角英字モード

istyle="4″
半角数字モード

■auの場合

inputタグに「format」属性を入れ込みます。

format="*A"
半角英字（大文字）モード

format="*a"
半角英字（小文字）モード

format="*N"
半角数字モード

format="*X"
半角英数（大文字）モード

format="*x"
半角英数（小文字）モード

format="*M"
全角かなモード

format="*m"
全角英字モード

※頭の（*）は、文字数の制限なしという意味だそうです。
*の変わりに数字を入れると文字数も制限できますが、
対応してない端末があったり、機種によってはエラーが出たりと、
他のキャリアでは類似の機能がありませんので、×オススメとか。

■Softbankの場合

inputタグに「mode」属性を入れ込みます。

mode="hiragana"
全角かなモード
mode="katakana"
全角カナモード
mode="alphabet"
半角英字モード
mode="numeric"
半角数字モード

で、これらを対象とするメールフォームを加えれば完成ですヽ(´ー`)ノ

最終的にはこんな感じかなっと。

<INPUT size="22" type="text" name="email" istyle="3" mode="alphabet">

それと、携帯サイト用のメールフォームCGIはこちらを使いました。

◎WEB MAIL [I] ( i-Mode版 ) 　
http://www.pmcj.com/program/p_mail/webmail.html

i-Mode用と書いてますけど3キャリア対応で設置も楽なので、
探してる方がいましたら、こちらを使ってみても(´ー`)

なにかの参考になれば幸いです(*'-')

参考サイト：
◎携帯サイト（モバイルサイト）のフォーム入力項目のデフォルトを半角英数字等にする « WEB制作会社デザイナーのメモ帳
http://5co.jp/mobilesite/41.html

最近仕事の方で、横幅1024pxクラスのサイトを作るようになってきて、
クライアントに「A4で印刷できるようにできませんか？」と、よく言われるように(´ー`;)
確かに印刷サイズと画面のピクセルサイズがぜんぜん別規格になるので、観たままを印刷することは難しいのですけどね...

といっても、Firefox、Safariといったブラウザを使ってもらえれば、
ブラウザ側で自動縮小をしてくれるのでこの問題はほぼないのですけど...

IEだけが非対応...(ノД｀)マタカヨ

まだシェア率が高いブラウザには違いないので、しっかりと対応するようにしないと（・ω・；）

今まで、「screen用スタイルシート」と「print用スタイルシート」を別々作って対応してきましたけど、「print用スタイルシート」は、アクマで内容を確実に印刷する為の設定ファイル設定なので、見た目だけでぜんぜん必要の無い箇所は非表示にしたりと、ブラウザで観た通りに印刷する事できないっていう問題があります。

納得してもらえるクライアントだったら良いのですけど、そうでないクライアントもいるので、色々調べてみました！
とりあえず、IE6、7で使用できる方法をみつけましたので、メモ書き程度に残しておきます(*'-')

IE専用プロパティ「zoom」を使います。
現段階（2009.05）のウチのサイトの横幅が、960pxで制作していますので、
横幅960pxのサイトをIE6でもちゃんと印刷出来るサイズ（649px）に変更する場合には、

* { zoom: 67%; }

の指定だけを印刷用のスタイルシート内に記入すれば基本はＯＫです(*'-')b

zoom指定のパーセント数字の出し方は、

649(印刷での表示幅) ÷ 960(スクリーンでの表示幅) x 100 = 67（端数切り捨て）

で、出しています。

それで、このままだと印刷用のスタイルシートを既存のスタイルシートと別ファイルを作らないといけないので...いつも作ってる方なら良いのですが、大概はメンドイ！って事になると思われます（笑）
ので、既存のスタイルシートに組み込んでしまいましょうヽ(´ー`)ノ

やり方は、

@media メディアタイプ名 {
（通常のスタイル指定を記入）
}

の記述を加えます。
具体的に書くと

/* =========== IE用印刷設定CSS =========== */

@media print{

body {
_zoom: 67%; /*WinIE only */
}
}

こんな感じ。

一応、WinIE６の方で検証してみたら、印刷プレビュー内でキレイにA4サイズで縮小されていました。

やっとIE8からブラウザ側で対応出来る用になるらしいのですけど、
WinIE６、７の環境の方はまだまだ使用ユーザーは多い思いますので、追加してみてはどうですか？(*'-')

今回の参考サイト様

◎印刷時専用のスタイルシートを作る - ［ホームページ作成］All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20050728A/

◎螺旋デザイン｜はじめてのCSS　印刷用CSS：スクリーンと全く同じように印刷する
http://www.rasen-d.net/first-css/file34.html

たまにはこういうのも(*'-')

なんかハズカシイヨウナ...（笑）

前の記事で「あわせて読みたい」のサービスを受けるときに、
むはーファビコン載るのか...と気になっていたので、急遽用意しました（＾＾；

前々から、クライアントの要望があるところは作っていたので、
ちょこちょことした経験は有って、

◎Favicon Generator
http://www.degraeve.com/favicon/

ここのサイトさんを利用してドット打ちをチマチマと作ってたのですけど、

チマチマ...

...

やってられるかーー(ノ ゜Д゜)ノ ==== ┻━━┻

って感じになりました（笑）

まー画像ファイルをアップロードできるんですけど、あまり精度もよくないので(ノД｀)
もう少し早くて結構クォリティの高いアイコンファイルを作れないかな〜

っとググってたら、

Photoshopで、ico形式のファイル保存が出来るプラグインを発見ヽ(´ー`)ノ

しかも画像ファイルは Photoshopで作るので、当然透過背景も簡単っていう...

やべッ！ネ申仕様ktkr！！Σ(°m°;)

フォトショッパー（笑）の猫には神スグルよ...マジで...

ということで、Photoshopユーザーの方向けなんですけど、
やり方をざっとご説明〜♪

■プラグインのダウンロード

◎Telegraphics：Free plugins for Photoshop & Illustrator...and other software
http://www.telegraphics.com.au/sw/#icoformat

上記リンク先のサイトさんから各OSとPhotoshopのバージョンに合ったプラグインをダウンロードします。
（win、Mac両対応）

■プラグインのインストール

解凍したフォルダの中に入ってる『ICOFormat.plugin』をインストール済みのPhotoshopに組み込みます。
※Windoowsの方は「ICOFormat.8bi」です。

○Mac OSXユーザー：
Applications/Adobe Photoshop CS3/プラグイン/ファイル形式フォルダ内

○Win ユーザー：
ロカールディスク/Program Files/Adobe/Photoshop CS3/プラグイン/ファイル形式フォルダ内

これで、Photoshop上で ico形式のファイル保存が出来るようになります(*'-')ｂ
背景透過も楽々ですよ！楽ー々ーヽ(´ー`)ノ
あとは、ファビコンのサイズが「16ｘ16」で表示されるので、上手くいくか何度チェックすると良いかも。

※2009.0402加筆
・カラーが、CMYKになってると ico保存が出来ないようです。
・ピクセルサイズが大きいと ico保存が出来ないようです。

ここに表示する為に、gifファイルに置き換えてますけど、出来上がりがこんな感じです。

◎基絵

◎ファビコン

まーぜんぜん『無限の翼』っていうタイトルとは関係ないアイコンですな（笑）

ネコテさんクラスのドット打ち職人さんだったら、
こういうサービスはいらないんでしょうけどね(;´ρ｀)

そんな技術なんかないし...＿|￣|○

むー...

うらやましくはないんだからねっ！(⊃д⊂)（ツンデレ風に（笑

相当うらやましいらしい...（笑）

◎参考サイト様
2xup.org-　Photoshop で背景透過の美しい favicon (ファビコン) を作成する
http://2xup.org/log/2006/04/28-2323

こんばんは、結希猫です(*'-')ノ

いつも仕事関係の知識を仕入れるのに参考にしている「ホームページを作る人のネタ帳」さんの過去記事を読み返していたら、
そういえば、までウチでも導入していないSEOがあるな〜っていうのを記事を発見したので、早速導入してみました！

◎あわせて読みたい　http://awasete.com/

ブログのURLを入力して指定のプログラムを設置すれば、共通の読者率が高いサイトが自動的に設置したプログラムに表示される面白いサービスです(*'-')
共通の読者＝新規閲覧者の確保に直結しやすそうな感じですかの。

◎あとで読む　http://atode.cc/

ソーシャルブックマーク系の亜種になるのかな。
あらかじめブラウザのお気に入り内に登録しておいて、
あとで読みたいウェブページ内でクリックする事で、自分宛に読みたいウェブページのキャプチャーに近いものが送られてくるといった、変わったサービスです（＝ω＝）

ちょっとわかりにくいんですけど、
記事ページの上記画像のアイコンをクリックすると、登録されているメールアドレス宛に自動でメールが行くようにしています(*'-')
TOPページとカテゴリー・日付アーカイブページには設置していないので、お気を付けくださいな。

どちらもかなり前からやってるみたいなので、知ってる人は当然知ってるサービスですね。
指定のプログラムソースを配置するだけで行えるので作業自体はかーなーり楽ー々〜。
まだの方は導入してみたらどうでしょうか(´・ω・｀)