全く興味ないぜ！…という人も、ここで一緒に暇さえあれば予想だけしてみる。とかどうでしょう？
予想が的中しまくるようなら一度、馬券買ってみるのもアリですしね。…もらい物、なんですけれどね（苦笑）
で、これには３Dにもなるカメラが搭載されていまして！実は動画も撮れちゃう（10分）のですが結果はこんな感じでしたとさ。
久々なのに身の無い内容でしたが今日はここまで。
こういうのってどうやって作っているんだろうなぁ～…
GoogleChromeにある、「要素の検証」ってとても便利ですね。
その要素の検証を使って、ああでもない、こうでもないとhtmlページをいじっていたのです。
そのいじりついでにちょっとした発見があったので記しておきますね。
要素の検証をバリバリ使っている方なら知っている人が殆どだろうなーと思うのですが、
検証中に直にタグを書き換えたり、消したりして見る事が出来るんですね！
それを知ったとき、より「これは凄い便利だ！」と思いました。
…といっても、文字だけじゃよくわかりませんよね。
画像でその様子をキャプチャーしてきましたので、暫しお付き合い頂ければ幸いです。
まずは要素の検証。画面上で見たいところにカーソルを合わせて右クリックですね。
検証タブを開いた状態です。
赤線の所をクリックし、ソースのどこにそれがあるかを表示させています。
で、右側に「styles」という項目（*）があります。（緑枠）（*初期設定位置です）
ここが、現在見ている（要素を検証している）所に適応されているCSS部分…という事になります。
マウスをそのstylesの項目辺りに持っていくと、下の画像のとおりチェッボックスが出ます。
それをいじると…
文字色、かわってますよね！ このように「検証」できるようです。
ほかにも…
画像ばっかり貼り付けるだけ貼り付けて説明省いてしまいましたが、こんな感じです。
今まで全然知らなかったことなので、ふとしたことで気付けて良かった～と思いました。
だって、ほら…Webの世界ってお勉強するのにも（英字弱いと特に）大変ですもの…ね？
…の、前に。jQueryをブロガーに入れる事について先に書いておこうと思います。
英語のサイトなので、英語に弱い私は始めとまどいましたが、どうもここはこういったデータを使っていいよと公開されている場所のようなので、感謝しながらURLを拾ってきました。
さて、この頂いてきたURLですが…
head部分に、<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/></script>と、入れ込みます。
それから、できればそのすぐ下にjQueryの命令コードを入れておきましょう。
これで、私のBloggerにもめでたくjQueryが使えるようになりました！
本来は、可能であれば自身の取り扱っているサーバーにjQueryをインストールするほうが、動作は安定するんですけどね…。
Web上に公開されているものだからこそ、混雑していると表示に時間がかかってしまうでしょう。サーバーが落ちたら使えない。けれども、初心者的にもこれが一番！ですね。
<script>
$(function(){
$("#Label1 ul>li a:contains('勉強事')").addClass("labelhover");
});
</script>
例として…
<script>
$(function(){
$("#Label1 ul>li a:contains('勉強事'),
#Label1 ul>li a:contains('ラベルの名前')")
.addClass("labelhover");
});
</script>
で、まぁ…ラベルの色を変える手法、これだけではなりません。
テンプレート＞カスタマイズと進んでアドバンス＞CSSを追加と進みます。
そこに、jQueryで設定した「labelhoer」の細かい設定をつけていきます。
私は、2種類の設定を組み込んでいます。
.labelhover{background:#B22222;} ←背景の色を設定しました。
.labelhover:hover{background:#191970;} ←マウスをホバーさせたときの色を設定しました
と、今回はここまで。
ぷちメモ：目が追いやすいように色付けできるようにしたほうがいいかな。探せる時探そう
<>
<br />←改行タグが見えますでしょうか。
プレビューで確認したところ、ちゃんと表示されていたので問題ないと見ていきます。< $(function(){ $("a[href^='http://']").attr("target","_blank"); }); >
と入れると、リンク指定したhttpのつくものは全て別窓で開くようになる！わぁ便利。
また、Bloggerは今のところ、このjQueryのコードをDLしても入れておく場所がないそうなんですね。
Head内にぜーんぶコピペでいれこむか、他にも方法があるそうなのでそれを参照して…なんとかやりましょう（苦笑）
（私も今はちゃんとした方法取れていないので追々変えていきたいなーとは思ってます…）
長くなっちゃったので、今日はここまで。次回にラベルについて書こうと思います
なぜか設定がうまくいきません。
あれやこれやと教えていただいたりしながら格闘すること暫く…どのみちちゃんと設定できなければ意味がありませんので
わかりそうなときが来れば、再設定にチャレンジしてみたいなと思います。
キャッシュが残っているだけ。だったらちょっと恥ずかしい話ですね。（キャッシュ消す方法、実は知りません）
このGIFアニメは、GIFアニメスタジオさんにて作成させて頂きました。
何故か編集時に、設定しておいたサイズを間違えていたみたいで、バナーサイズとしては一般的ではないですが…まぁ、練習ということで。
今日はここまで。
と、今回はここまでということで。
ちなみに、「タイトルに画像を使用する」手法でレイアウトをいじっていた時の私が組んでいた設定はこれです。
.tabs-outer{margin-top:-50px;}
.descriptionwrapper{font-size:10px;}
今日はここまで。
で・す・が。
Bloggerの記事編集画面を見ると画像の保管場所が出てこないんですよね！
ちょっとこれ困るんですよね！＊保存した画像はどこにある？
保存したときのウィンドウを見てみましょう。
…よくわかんないのが、どっちもURL違うって所なんですけどね。
サムネイル画像という、自動的にサイズを小さく表示したりした、リサイズされた画像を利用したい場合は、Picasaから編集すると便利なようです。
縮小画像を使うなら、上記で良いのですが…アップロードしたときのそのままの「原寸画像」を使いたいときは…
再びですが、Picasaか、「もっと見る」の所から「写真」をクリックして飛んで、表示させたい画像でURLコピーを押します。
PicasaのURLだと「https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2ng8BAnZnjjh_8GSbejznV48P_ha9Ze25s3iEAzp2s1l5dXyQoh2YCMO-zSnfioeV9SXJp0P7ZuRv8wBuL7KxYdNVHb64r1AZWb-K4e32SLlJezBao7zITHBd2PwNv7B_u7AeejkKWg/s144/1.jpg」
Google+からだと「https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2ng8BAnZnjjh_8GSbejznV48P_ha9Ze25s3iEAzp2s1l5dXyQoh2YCMO-zSnfioeV9SXJp0P7ZuRv8wBuL7KxYdNVHb64r1AZWb-K4e32SLlJezBao7zITHBd2PwNv7B_u7AeejkKWg/s646/1.jpg」
ものすごーくURL似てますね。各々のURLへ直接飛んでいただくとわかるのですがこのままだと表示サイズが原寸じゃありません。今回はここまで。
今回はここまで。
CSSもぽちぽち勉強中。
