googleAnalytics から自分を外す

◆googleAnalytics（グーグルアナリティクス）から自分を外す方法

とっても親切サイト↓↓↓

http://sem-labo.net/blog/2009/08/13/0133/

IE6 マージン -マイナス 消える

_position: relative;


参考サイト
http://webcache.googleusercontent.com/search?q=cache:YTBNn3w0GxgJ:polka-diary.seesaa.net/article/115217597.html+IE%E3%80%80margin+%E3%82%92%E3%83%9E%E3%82%A4%E3%83%8A%E3%82%B9&cd=1&hl=ja&ct=clnk&gl=jp&source=www.google.co.jp

フォームについて ※【jQuery】 その①

→フォームについて　※【jQuery】　その②
フォームについて　※【jQuery】　その③

◆val

入力されている値や選択されている値を取得・変更

＜例＞
$("#mail_ad").text($("input").val()+"に送信します。")；

mail_adのinputの入力されているのを習得して、『に送信します。』と付け加えて変更される


＜例＞
$("#kakunin").text($("select").val())；

kakuninのテキストがselectで選択されている値に変更される。※テキストエリアでもできます。



.val()→値を取得

.val(””)→値が空

◆val（""）

入力された値を削除する、クリアする。

クリアボタンをつくって、そのボタンを押すとクリアされる。
※＜/form＞タグの中に＜button＞をいれるとファイルがありませんとでるので注意
＜button＞タグが飛んでしまうのは、type=""を指定していないから
”button”⇒ボタンとしてだけの機能
”submit”⇒実行ボタン
"reset”⇒リセットボタン

◆focus

フォーム部分が選択（マウスやTabで）されたのを感知して処理を実行してくれる
★メソッドチェーンと＄（this）をつかう

＜例＞
*html側*
＜p id="name"＞名前＜input type="text"＞＜/p＞

＄("#name input").val（”ここに入力”）.css("color","#cccccc")
.focus(function(){
$(this).val("").css("color","000000")});
フォーカスされたら処理してね

※CSSを操作するときは、スタイルシートで操作されるCSSをつくっとかないと動かない。
※ドットで繋がってるのがメソッドチェーン

フォームの中に”ここに入力”という文字を薄く入れといて、
入力しようとすると消えて、さらに、入力した文字は濃くなっている


注：フォーカスされるたびに消えてしまう。のをどうにかするために…↓↓
一回のフォーカスのみにしてね【one】をつかう。1回だけ
フォーカスの部分をone();の中に入れる
【one】のかき方はこちら→

イベント発生の条件→focus
イベント発生した時の処理→val（””）と色変更


＄("#name input").val("ここに入力").css("color","#cccccc")
.one("focus",function(){$(this).val("").css("color","000000")}）;

.one("発生条件",function(){発生時の処理}）;

◆blur（ブラー）

フォーム部分の選択（マウスやTabで）がは外れたのを感知して処理を実行してくれる


*どんな時に使うのか？
フォーカスが外れたときの処理を変えたいとき。

⇒フォームの入力/未入力によって処理を変えたい時は

if文をつかう。if文について→

もし、フォーカスされても入力されなかったら、文字表示しといてね。
　↓↓↓
※メソッドチェーンで↑のｊｓ（focus）につなげます。
.bluer(function（）｛

if（$(this).val()==""){　//もしフォームが空だったら
※同じ処理なので↑のｊｓ（focus）をそのままコピペします。
}

｝)；

◆change

入力された内容を感知する（フォーカスが外れたら感知します。）

*どんな時に使うのか？
選択が変更されたら、テキストの項目を変更したいとき。


セレクトボックスと一緒につかいます。
↓↓↓

optionタグにvalueに入れたテキストを読み込む

*ｈｔｍｌ側*
＜select＞
＜option value="いちばん"＞いちばん＜/option＞
＜option　value="にばん"＞にばん＜/option＞
＜option　value="さんばん"＞さんばん＜/option＞
＜/select＞

＜ｐ＞＜span＞いちばん ＜/span＞＜input・・・省略


セレクトボックスが変更されたら、セレクトボックスのvalueを＃Chanのspanにテキストかえてね　
　↓↓↓↓

*ｊｓ側*
＄(function（）｛
＄(”select”).change(function（）｛
＄(”＃chan span”).text(＄(this).val（）);
｝);

｝);

※テキストを変更するだけでなく、追加して項目を増やすこともできる。と思う

フォームのおさらい ※HTML

お問い合わせなどのフォームは＜form＞タグで囲みます。
＜form＞xxx＜/form＞

*＜form＞タグの属性
・action(アクション)…実行されるcgi
・method(メソッド)…サーバにデータを送るときの形式

※method、→POSTとGETの違い。
送信内容を送るフォームは、POSTをよく使う。＜form　action="xxx.cgi" method="post"＞xxx＜/form＞
※postは大文字でも小文字でもどっちでもいい



*＜form＞タグの中に入れるタグ＜input＞＜select＞＜textarea＞
中に入れるタグにはnameをつけて、わかりやすくしとく、
チェックボックス・ラジオボタンはvalueで。

・＜input /＞(インプット)*type属性でいろいろ
閉じタグいらない

普通のテキスト
type＝”text”

入力したものを見えなくする
type＝”password”

ファイルをアップロードする『参照』ボタン
type＝”file”

チェックボックス
type＝”checkbox”

ラジオボタン
type＝”radio”
※ラジオボタンは1つしか選べません。
※nameで同じ名前にします。

cgiを実行ボタン
type＝”submit”（★）

削除ボタン
type＝”reset”（★）

ボタンをイメージに
type＝”imae” src="画像パス"


（★）ボタンのテキストをかえたいときは『value＝”名前”』です。

テキストエリアなどで、初期値を入れたい場合→「value＝"例)名前を入れてください"」
あくまでも初期値なので、入力がなくてもフォーカスされると消えます。

「入力のヒント」を入れたい場合は、placeholder属性を使う
（HTML5より、ブラウザによって使えないところあり）

↑入力されるまで入力のヒントがでます。



▼▼　html側/プレビュー　▼▼




・＜select＞～＜/select＞(セレクト)…セレクトボックス
selectにnameをつけて、optionにvalueで。
選択項目は＜option＞～＜/option＞

<label>年齢：
  <select name="age">
    <option value="age_10">10代</option>
    <option value="age_20">20代</option>
    <option value="age_30">30代</option>  
    <option value="age_40">40代</option>
  </select>
</label>

・＜texterea＞～＜/texterea＞(テキストエリア)…テキスト入力
横幅⇒cols
縦幅⇒rows(行数)






---------------------参考サイト---------------------
・とほほ
http://www.tohoho-web.com/html/form.htm

googleブログにアンケートを設置する方法

【アカウント設定】から

【ドキュメント】
※先に、設定で日本語にしないと英語でわからない。
※とりあえず、日本語にしてから設定を再度開くと、日本語になってる。




------------------参考サイト------------------
↓↓とっても親切
・Googleドキュメントでアンケートフォームを作る方法
http://www.kagua.biz/seisaku/googledocs.html

CGIをちょっとやってみる。

フォームのやる気が出ないのはcgiがわからないから
　　↓↓↓

◆そもそもcgiで何ができるのか

お問合せ/掲示板/買い物カゴ…etc
参考サイト：『とほほ』

◆よく出てくるPerlってなにか

Perlっていうプログラミング用語を使ってcgiが出来あがるらしい
…ということは、Perlを覚えればいい？

◆Perlについて

参考サイト：『とほほ』参考に何も考えずにかいてみる

テキストエディタはTeraPad
保存すると、○○.txtとなるので、○○.cgiと保存。色変わる



＃!perlのパス※空白・空行はいれちゃいけないらしい
￥ｎは、たぶん改行
print:"★★";perlの構文。
※この中で、""(ダブルクォーテーション)を使いたい時は￥で囲ってあげる。

…そう考えると、
htmlのタグをprelでかこってあげている状態

◆CGIを動作させるために

サーバに上げないと動かないらしい…
ローカルで確認したいので、Apache(アパッチ)をインストールする。

インストール方法はこちら↓とってもとっても親切、写真付き
《 Apacheインストール - Apache入門 》
http://www.adminweb.jp/apache/install/
※保存場所を忘れたら、【マイコンピュータ】で"Apache"を検索する

インストールし終わったら、
Perlを動かすためにActivePerl(アクティブパール) をインストール※↓ちょっと古いけど問題ない
《 WindowsでCGIを動作させる - Web Liberty 》
http://www.web-liberty.net/improve/setup/index.html
※インストールし終わったら、再起動して、インストール出来てるかの確認


さっき、『とほほ』で真似て作ったcgiのperlのパスを変更して、
Apacheインストールを確認した時のURLにcgi-bin/test.cgiを足すとみれました。
<例>http://localhost/cgi-bin/test.cgi




....作業環境ができたので、後は、パールの勉強です。
『とほほ』で基礎知識をよむ

…今の時代は、perlじゃなくて、PHPらしい。。。。

なので、perlインストールをPHPインストールに変更する。

参考サイト
・PHPインストール - PHPインストールと初期設定
http://www.phpbook.jp/install/install/

one unbind live ※【jQuery】

◆one

★かき方
＄（"p"）.one("イベント発生の条件",function(){イベント発生したときの処理})

処理したいイベントに対して一回だけだよの意。
↓
ということは、発せさせたいイベントがあっての『one』
oneのみでつかうことはない。…と思う。

◆unbind

★かき方
＄（"p"）.one("イベント発生の条件")

◆live

★かき方
＄（"p"）.one("イベント発生の条件",function(){実行される処理})

イベント発生の条件一覧
・click
・dblclick
・mouseUP
・mousedown
・posedown
・mouseover
・mouseout
・mousemove




イベント一覧→

イラレ 木のつくり方

楕円(何でもいい)→　①【ジグザグ】→　②【ラフ】

①【効果】→【パスの変形】→【ジグザグ】
②【効果】→【パスの変形】→【ラフ】
*効果をパスに？する方法はこちら

だいたい三角に組み合わせて、木を足す。


結果↓






-------------------------参考サイト-------------------------

・Illustrator（イラストレーター）で簡単な木を描く
http://kohtguchi.at.webry.info/200612/article_1.html

ファビコンをつくる

ファビコンのサイズ→16px×16pxの正方形

※大きく作っても縮小されて表示される

◆作業手順

①16px×16pxサイズの画像を作る(gifまたはpng)


②簡単に変換してくれる
『アイコン（icon）変換ツール - Favicon Converter』
http://favicon.qfor.info/c/

③ファイル名をかえて、HTML側(head)に↓↓↓とかく。
＜link rel="SHORTCUT ICON" href="ファイル名.ico" /＞
※＜＞は大文字になってるので、コピペしてから半角に

で終わり






--------------------参考サイト----------------------
・Favicon Japan!! -ファビコン作成方法-
http://www.favicon.jp/favicon_create/

・ホームページ作成ガイド/お気に入りアイコン（ファビコン）の作り方 - TAG index Webサイト
http://www.tagindex.com/hp_guide/img/favicon.html

変な透過gifのURLがそのまま入る。

いつのまにか、というのが
文章を無視してはいっている。

Firefox4にしらかららしい…？↓和訳しないとよめません。
http://www.cbtechnews.com/2011/04/how-to-remove-httpwwwbloggercomimgblank.html


調べてもわからなかったので、
初めてgoogleのヘルプフォーラムに投稿してみました。↓↓
http://www.google.co.jp/support/forum/p/blogger/thread?tid=4741592b2b5c599d&hl=ja


googleのヘルプフォーラム
https://www.google.com/support/forum/p/blogger?hl=ja

toggle(トグル)※【jQuery】

クリックされるたびに交互に切り替える。設定してある処理が最後まで終わったら最初に戻る。

toggleはイベントclickとかと同じように使う。

＄（”セレクタ”）.toggle(function(){★★★})；


『,』(カンマ)でくぎって、複数指定することができる。

↓↓↓

＄（”セレクタ”）.toggle(function(){★★★}//処理①
,function(){★★★}//処理②
,function(){★★★})；//処理③




コレを使ってタブメニューをつくりたかったが、
どっかのライブラリを使いたくないので諦める。

.clickを使って簡単なタブメニューをつくる。→



イベント一覧→


-------------参考サイト---------------
toggleを使ってこんなこと出来るんです。

*メニュー編
・style-typeスタイルタイプ
http://style-type.net/simple/2011/03/jquery-toggle.html

・トグルスイッチ
http://appling.jp/docs/toggle-switch/

・jQueryを使ったタブメニューの実装サンプルまとめ
http://5am.jp/jquery/jquery_ui_tabs/

Dreamweaver コピペとかすると、突然 全選択される。

ワークスペースのレイアウトをいじってるとなるらしい。

デフォルトに直すとおさまる？？

【ウィンドウ】→【ワークスペースのレイアウト】


-----------------参考サイト-----------

・Dreamweaver コピー・切り取りの一部選択が全選択になってしまうバグ
http://zennihonhumidaisyoukouunndoukyoukai.com/archives/20110512/115/

Dreamweaverプレビュー clearfixがきかない

★今までのやり方

・イラっとするので諦めて、下のdivにclearをかけとく。
＜div class="cl"＞

・空のボックスとおいとく、UP時に一括削除
＜div class="cl"＞＜/div＞＜！--//後で消す--＞


★最近発見したやりかた
プレビュー用にCSSに追加

CSSに↓
.clearfix{ overflow:hidden;}のみ
※ｃｓ5.5はいらないときもある。普通にみれる

UP時に消す。あっても特に問題ない。


※高さを指定しないと、消えます。(ｃｓ4)

最近のclearfixについて

★ずいぶん昔に調べたclearfix
→フローと解除について


★最近まで使っていたclearfix
↓
.clearfix:after{
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}


★最近？ちょっと短くなったclearfix
↓
.clearfix {width:100%;}もしくは、.clearfix {zoom:1;}※
.clearfix:after{
content: "";
display: block;
clear: both;
}


※IE6、IE7ではこれがないと回り込む


MACのブラウザでも確認済み


★Dreamweaverプレビューしたらclearfixがきかないくずれた。

→解決方法はこちら


----------------------参考サイト----------------------

・float解除の決定版。clearfixを考えたら、進化した。
http://kojika17.com/2011/04/floatclearfix.php

jQuery応用編

◆画像とテキストの切替

左のボタンをクリックすると、右の写真の”ALTとテキスト”部分が変わる。


html側



js側

クリックしたら、リンクの『hrefとテキスト』をイメージの『srcとALT』にいれてね。そんでもって、イメージの『ALT』をイメージしたのテキストにいれてね。の意。


※リンクのテキストは、CSSで見えなくさせる。


★＄（this）をつかうときに気をつけること。


最初に、＜a＞タグの中の＜img＞のALTをテキストにいれようとした。
が、＄（this）は、イベントが発生した要素を習得してくれるので＜a＞タグの中に
属性がないので、読み込んではくれなかった。.attrだからダメだったのかも？？



★メソッドチェーンで気をつけること

どのセレクターに対して、命令するのか、ちゃんと理解すること



画像が、ただのサムネイルでいいとき*は、もっと簡単になる。→画像切り替え
リンクタグにいれない。ｓｒｃはそのまま、ALTをテキストにいれる。
*サムネイルと、普通サイズの画像が同じ場合

ブログ内検索ができなくなったときに

解決方法見つからず、↓応急処置

◆新しく、追加する。貼りつける。

【ガジェット追加】→【HTML/JavaScript】

下記、サイトのソースに自分のドメイン部分を修正して貼りつける。


・適当えんじにあ
http://mfsocket.blogspot.com/2010/06/google_16.html


とっても親切なサイト↑↑