google site の編集

「google site」
慣れてしまえば編集がしやすく、他のサーバーのホームページのように毎回追加ファイルをアップロードして表示の確認をしてといった手間がないので、siteを使って音楽資料をまとめていこうと思ったんですが、Flashを使ったmp3プレイヤーの埋め込みがうまくいきません。


このような表示が出て埋め込みコードはバッサリと削除されてしまいます。JavaScriptは受け付けてくれないんでしょうかね？
　それとも、そもそも普通のホームページを作るような目的で使用するようなサービスとは違うのでしょうか？
　テキストの表示位置の変更なんかが簡単に出来て非常に使いやすいので残念です。

　今のところFC2のサーバーでホームページを作ろうかと試している所なんですが外部ファイルの指定やレイアウトの変更なんかが結構な手間なんですよね。ブログの手軽さに慣れてしまうと余計に。

　何かいい方法を考えてみましょ。
　

自分のブログページの容量が気になりました

　ブログに画像を埋め込んだり、サイドバーにガジェットを追加したりしていてページの容量、表示速度が気になりました。
　普段はFire fox3.05をメインのブラウザで使っているんですが、IE7で見てみると表示が少し遅い場合があります。Safari・Opera・Chrome 等はどうでしょう。バージョンが違うとまた変わります。

　「このブログは快適に閲覧してもらえてるのでしょうか？」

　その前に内容はどうなんだ？という声がチラホラ聞こえそうですが内容ペラペラ・表示激重なんてことになっていたら目も当てられません。

　調べてみたところ量ってくれるサイトを見つけました。　

　サイトの売買をしているところかな？まあ何をしているサイトにしろ今回調べたいのは自分のブログページの表示が快適かどうかなのでありがたく使わせていただきました。

　＜結果＞

評価 D 　合計　132176bytes 　予想表示時間　18.88秒程度（56Kモデム単純換算。８秒が目安。） 　コメント：ファイルがちょっと重いようです。5KB以上のファイルはサイズ圧縮を考えましょう。

　ということでした。

　５６kモデムの方だと表示されるのに約19秒ほどかかってしまうのでしょうか？もちろんPCの性能等も関係してくるとは思いますが私なら途中で読み込みキャンセルですね。
　サイト運営のヒントを教えてくれているホームページ等がありますが、さすがに教えるだけの事はあって量ってみると５６kモデムでも5秒程で表示される所が多いようです。（このブログの1/4！）
　この結果をみて少しでも軽くするために画像ファイルだけでも小さくしておきました。
ほんの1秒ほどしか変わらなかったんですが少しでもダイエット出来たので良しとします。（いいのか？）

　サイトのサイズはどの位が適当なのかは日々変わっているとは思いますし写真ブログやホームページ全体が芸術的なサイト等は容量を抑える事が難しいですがネットを楽しむ方の環境はそれぞれ違うので、少しでも多くの人が快適に閲覧できるようにしておきたいですね。

サイトの体重測定がしたい方は

「買いパラ」ネット検索エンジン　サイトのＵＲＬを入れて「チェックする」をクリックするだけです。

暇でしょうがない時に

　本当に暇で暇でたまたまこのブログにたどり着いた方には朗報です。
　確実に１分程の取り返しのつかない無駄な時間を過ごせるサイトを発見しました。

　ご覧になられたら一目瞭然、バカらしくて笑ってしまいました。ご丁寧につぶした数を「HIT」のところでカウントしてくれます。こういう意味の無いのちょっと好きです。
　このページの製作者さんは作っている時は楽しかったでしょうね。

　このプチプチは最後まで潰して「HIT」の数字を見ると歯痒さが残ります。
　全てプチプチしてしまっても「Reset Sheet」でプチプチし放題です。
　
　英語は解らないんですがいったい何のサイトなんでしょう？
　

本当に無意味な時間を過ごしたい方はどうぞ

SnapBubbles.com

cssを使って本のように表示する

　javascriptは使わずにcssとHTMLで本のようにパタパタとページを開いて内容を表示します。
何に使えるかはアイデアが必要ですが面白そうだったので試してみました。

　>>テストページへ

　サッと作ったので中身の文章は適当でレイアウトもガタガタですがきちんと調節すれば見やすいものが出来るでしょう。

　ページのソースを見てもらえば解りますがシンプルな構成なので簡単です。（後は内容がともなえば？）
　
　リンクが貼れればMENUとしても使えるんですが私があまり詳しくないので無理でした。

＜＜追記＞＞
　どうもIEだと表紙の形がおかしくなっています。Fire foxだと大丈夫みたいなんですが・・・。

う～ん・・・。私には直せないようです。何か単純なミスをしていそうなんですが解りません。残念。
　もうちょっと勉強しておきます。

参考サイト

CCS play Book

関連記事　Jamming倉庫　HTML

ドロップダウンメニュー（javascript）

　javascriptを使ったドロップダウンメニューを試してみました。（dropdown.js）

　ドロップダウンメニュー自体は様々なサイトで配布されているのですが（こんなファイルです）


何の事だかこれを使ってどうしろというのか・・・？な状態だったんですが、右端がHTMLファイルでその他がドロップダウンさせるのに必要なjavascript・css・imgファイルだったんですね。

　javascript・css・imgファイルを使うので、Bloggerの場合はファイルのアップロードが出来ないので外部から参照できるファイルストレージ等にそれぞれアップロードしておかなければいけないようです。

今回はとりあえずHTML・javascript・cssともBloggerではなく別のホームページサービスのサーバーにアップロードして試してあります。
　
HTMLについてはなんとなく理解できているんですがjavascriptに関しては全く何者なのかも解らずドロップダウンさせる事さえ出来なかったんですが、なんとか表示させる事ができました。

>> ドロップダウンメニューテストページへ

　ページのソースを見てみると＜head＞＜/head＞の間でjavascript・cssファイルを指定するようです。

<link rel="stylesheet" href="dropdown.css" type="text/css" /> <script type="text/javascript" src="dropdown.js"></script>

　赤い文字になっている所をそれぞれのファイルのURLに変えてあげたらいいんじゃないでしょうか？（おそらくですが）
ここで表示したかったんですが今回だけの投稿に表示することは出来ないんでしょうかね？
　（今回は時間が無いのでまだ試してません。表示できた嬉しさで見切り投稿です）

　とりあえず試してみたかっただけなので気に入ったドロップダウンメニューが出来上がったらこのブログで使ってみたいと思います。

使用ファイルの配布サイト

LEIGEBER

googleノートブックが便利！

　今まで「googleノートブック」とは何ができるものか調べもしていなかったんですが、実はかなり便利なサービスなんですね。

　以下、簡単に使い方を

　私は普段ブログで使うHTMLコード雛形をテキストドキュメントに記録してそこからコピペで使っていたんですが、いちいちテキストを開くのに時間がかかりストレスになっていて何か上手いやり方はないものかと考えていたんですが、googleノートブックならブラウザ上で簡単に開く事ができます。少しは作業効率が良くなるでしょう。



　サイトの画面全体もしくは１部分をメモする。
目当てのページをお気に入りにブックマークするよりも、よりピンポイントでの記録ができます。



　画像も表示されてリンクも繋がります。動画はうまく表示できないものがありました。レイアウトは崩れたりしますが情報としては充分でしょう。

　その他便利な機能

• web上に公開
• 他の人と共有して編集や閲覧が可能
• IE・Fire foxで拡張機能を使用してgoogleノートブックへのアクセスをより簡単に出来る（まだ使用していませんがかなり便利なようです）

　他にも機能はあるようですが簡単に使いこなすなら以上のようなところでしょうか。

　なぜもっと早くに気付かなかったんでしょうか？
　おかげで手元に置いてあるメモ帳の出番が少なくなってくれる事でしょう。

Jamming倉庫　google関連記事

　

私が１番欲しかったガジェット「Google Services Links: A Tidy, customizable List」

　googleでよく利用するサービスのリンクをずらっと並べてくれるガジェットです。

　知っている人には「何を今さら」なものですが私はついさっき何かのタブを追加した時に自動的に入れられているのを見つけました。

　いつもgoogleの各サービスのページに行くためにHOME画面右上の「アカウント」ページに行ってから各サービスを選んでいたんですが、このガジェットを「HOME」に入れておけば直接サービスページに入ることができます。
　しかも必要なサービスだけを選んで追加したり減らしたりすることができます。
　ちょっとしたことですが便利になりました。

「ガジェットの追加」

Google Services Links: A Tidy, customizable List

　ガジェットによって不具合があったりするんですがこれは大丈夫かな？

Jamming倉庫　google関連記事

グラデーションの背景画像を作る

　キレイな背景画像を作れないかと探していたところ、見つけました。
今回も「WEBマーケティングブログ」さんの記事から勉強させていただいてます。

グラデーションの背景を作ってくれるジェネレータです。
　好きな色を何種類か組み合わせてグラデーションの方向を縦からか横からかを指定して基本になる画像をつくり、画像の繰り返し・スクロールに合わせるか固定にするか等を選べます。


　最初に選べるのは2色ですが「Add color」で3色・4色・・・と増やして複雑なグラデーションにすることもできます。
　ページ全体の背景にするための「HTMLコード」も同時に表示されるのでホームページの背景に使う時もコピペで楽々です。

　作成した画像でこんなのを作ってみました。


　文字は後から貼り付けています。（今回も自分のセンスの無さが・・・）

　ページの１部分に使ったりしてもアクセントになっていいんじゃないでしょうか？

グラデーション画像作成サイト

glad color

関連記事　Jamming倉庫　HTML, 画像,（カスタム検索）

参考にさせていただいたサイト

WEBマーケティングブログ　グラデーションの背景画像ジェネレーター「Gradcolor」

ブログに画像を貼り付けてコメントをもらう

ブログに写真などの画像を貼り付けているのはよく見かけますが、今回見つけたのは貼り付けた画像が拡大できたり画像そのものにコメントをつけてもらえるもの。



　画像の上にポインタを移動すると左側にメニューが出てくる。クリックすると上から

●画像情報と投票。ハートマークをクリックして投票することができる ●コメントの投票と閲覧。「View Notes」で表示される「+」にポインタをのせるとコメントが表示される 　「Add New Note」でコメントの書き込み（要ログイン？） ●画像の縮小拡大・移動・フルスクリーン化 ●メールで写真を送るのかな？（これはいらないかな？） ●埋め込みコード表示

　この画像埋め込みは無料で登録の必要もありません。
　作った本人はそのままコメントが書き込めるんですがどうやら他の人はログインが必要な様です。
　アイデア次第では面白いんじゃないでしょうか？

埋め込みコード作成サイト

Phlook(beta)

　1>「Up load」で画像を指定してアップ
　2>「Embed Interactive Photo:」のコードをサイトに貼り付ける

今回記事の情報元サイト

WEBマーケティングブログ

関連記事　Jamming倉庫　画像

Ie7 ie8

ie8のjscript.dllとvbcript.dllのファイルをie7の同じファイルに上書きすると処理能力が上がって表示速度が速くなるらしいということで試してみました。

結果、
なんとなく速くなったような・・・。

どうなんでしょ？

やっぱりストレス感じます。私の環境（xp,sp3,メモリーは少ないです）のせいかも知れませんがieでネットをしているとページファイルの数値が低い時はサクサク見れるんですが、見るサイトによっては10分程でPF使用量が上がったまま下がらなくなっちゃうんですよね～。ほんとになぜでしょう？

メインはfirefoxなんですが画面表示はieの方がキレイなんで使いたいんですけどね～。

ie8はどうなんでしょうか？まだ情報が少ないようですが、そろそろいいんじゃないかなんて事も聞きます。どなたか試した方はレポお願いします。なんてまあ勝手な事ばっかり言ってね。しばらくはbetaということらしいので人柱になる度胸はないですから・・・。

今回やったファイルの変更は、今のところ私は普通に使えてますが不具合がない訳ではないらしいのでそのあたり調べてから試してくださいね。

last fm ブログパーツ

　ブログを見てまわっている時にチラホラ目にして気になっていたのでサイトにアクセスして調べてみました。これを再生しながらのんびり読んでみて下さい。

ラジオと言うか有線放送みたいな感じで曲が延々流れます。そんなに重くないようなので作業をしているときに重宝してます。


作り方もいたって簡単。
・「ウィジェット作成」画面で＜アーチスト＞か＜タグ/ジャンル＞を選び、好きなアーチスト名やジャンルを打ち込んで＜作成＞ボタン。
・次の画面で＜スキンの色＞と＜サイズ＞を選んで下部中央の＜コード表示＞ボタンを押す
・「コピー＆ペースト用のコードはこちら：」の下のインラインフレームにコードが表示されるのでコピーして表示させたい場所に貼り付けるだけです。

　曲名までは選べませんがなんとなく流しておくにはいいですね。

同じサイトでこんなのも作れます。同じくアーチストやジャンルを選ぶとアルバムジャケットがずらっと並んで、それぞれ回転しながらランダムに入れ替わります。（ここに貼っているのはイメージ画像です）
サイドバーに入れると賑やかになっていいんじゃないでしょうか？少々重いですが・・・。

今日はこれで音楽聴きながらブログを書いています。なかなかいいですよ。
このサイトは無料でアカウントをとってイロイロできるみたいなんですが今日のところはお手軽にウィジェットだけにしておきます。

サイトはこちらlast.fm

追記

・・アカウントとってみました。詳しくは　 　　Jamming 手探りながら　last.fm

ドロップダウンメニュー

　色々試してみてんですが「ドロップダウン」のメニューが作れません。

JavaScriptを使うんですが、どうもまだ理解できていないらしくてドロップダウンしません。

HTML編集画面で保存しようとしてもBloggerにはじかれてしまいます。
最初のメニューは表示されるのに・・・

　ちきしょ～

　今回ほんとにボヤクだけ・・・。

HTML button

今回は完全にネタです。試してみて下さい。

<form> <input type="button" value="ボタンの文字" onClick="alert('出てくる文章')"> </form>

１発芸って感じですが、初めて見たときは楽しかったです。
赤い文字の部分を変えて面白い物を作ってみてください。

mp3player

こんなのあるんですね。初めて知りました。とりあえず最初の紹介ページにあったのを貼ってみました。
自分で用意した曲を流すタイプのものとは違い、テキストをコピペで貼り付けるだけです。
どうやら１曲ずつのソースになっているので演奏曲はかえられないようです。（できるのかな？）
需要は少ないでしょうがこれが流行れば売り出し中の人達には宣伝になっていいかもしれませんね。かなり流行ればですが。
このサイト、わりと知らないアーチストが入ってるみたいですが、どうせなら１曲固定じゃなくて日替わりとかで流れる曲が変わるものもあればいいんですけどねぇ。もしかしたらあるんでしょうか？

配布サイト ブログパーツ.com

Google Blogger サイト内検索窓

ネットで調べ物をしていて検索にかかったサイトを開くと目的の記事が見当たらないなんて事があるんですが、サイト内検索が付いていると便利だったりします。ブログではあまり必要なものではないかも知れませんが今回嬉しがって付けてみました。
　　　(powered by Google)

＞ページ要素
＞ガジェットを追加
＞「HTML/Javascript」 を追加します

＞「HTML/Javascript」ガジェットの編集画面
タイトルは適当（例：ブログ内検索）

＞コンテンツの所に

<form action="http://www.google.com/search"> <input value="ja" name="hl" type="hidden"/> <input value="UTF-8" name="ie" type="hidden"/> <input value="UTF-8" name="oe" type="hidden"/> <input value="keeponjammingother.blogspot.com" name="as_sitesearch" type="hidden"/> <input maxlength="256" value="" name="q" size="31" type="text"/> <input value="検索" name="btnG" type="submit"/> </form>

・「keeponjammingother.blogspot.com」を検索するサイトのドメインに変更します。
　　「http://」と最後の「/」はいりません
　　（変更しないで使用すると、このブログ＜Jamming倉庫＞の中を検索してしまいます）
・「検索」はボタンの中の文字です。好きな言葉に変更できます（例:search）
・「UTF-8」はサイトの文字エンコードに変えて下さい。サイトに合わせないと文字化けして検索できません（使用するサイトを開いてブラウザの「＞表示＞エンコード」で解ります。
・大きさを変えたり色を変えたりできると思います。そこまで調べてないです、ごめんなさい。

色々な物の紹介をしていたりするブログには便利なんじゃないでしょうか？
＊もしかすると作らなくてもガジェットにすでにあるのかもしれません。

ご覧になられた方へ

すべて手探り興味本位でやっています もし参考にされる場合は自己責任でお願いいたします。

*追記*

画面左上にある「ブログ検索」でこのブログ内を検索できるんですね。
知りませんでした。
せっかく作ったのでしばらく飾っておきます。

ブラウザの違い

もともとはIE7を使っていたんですがアドオンのせいなのか、設定のせいなのか、ネットを見ているとメモリがいっぱいいっぱいになって激重になってしまうんですよね。
なぜでしょう？未だに解らないんですが・・・
なのでfirefox3.05をメインブラウザにしていたんですが、ブログのレイアウトを完成させた時にフト気になったのでIEで自分のブログを見てみたんですが、やっぱりというか勘弁してよというか、思った表示になっていない部分がありました。HTMLについて解説しているサイトにそのことは書いてあったので予想はしていましたが、やっぱりシェアの割合からみてIEでもキレイに表示できるように合わせるべきでしょうね。
なので細々と手直しをしています。
でも、Macや他のブラウザの場合はどう見えてるんでしょう？
PCによっては表示できない色もあるらしいんですが、Jammingの背景色なんかかなりあやしいんですが・・・
いじってると楽しいのでつまらない小技も入れたくなってしまいますが、まぁ　あまり凝った事はしないほうが確実みたいですね。

google アカウント

つい最近まで気付かなかったんですがgoogleアカウントをとっていればログインしてgoogleホーム画面右上の「アカウント」から「マイサービス」のメニュー画面に入れるんですね。


　まったく知りませんでした（汗
わざわざ自分のブログなんかの管理画面をブックマークに登録してたのはなんだったんでしょう？
ここからgoogleのサービスに直結なんですね。
すぐ近くにこんな便利な画面があったとは
本当にパソコンはちょっとした事を知っているだけで使い勝手がガラリと変わりますからね。
それにしても今回は自分の鈍感さにあきれました。

Jamming倉庫　google関連記事

色々やってみますが・・・

結構いろんな事を試してみるんですが　どうも一時代前のレイアウトって感じになりますねぇ
それぞれが角ばってるからかな？文字色背景色とも変えまくってます。やっぱりシンプルが１番という事になりそうですね。でもここはテストの場なので妙ないろのままでいきたいと思います。
センスがないなんていったらおしまいですよ

ささやき

ネットに落ちている壁紙はもうちょっとこのあたりが・・・ と感じる物が多い 自分で作れということか

シンプルなtable

<table style="border: 1px solid rgb(99, 140, 237); background-color: rgb(124, 205, 124);" cellpadding="7" cellspacing="1" width="190" height="50"><tbody><tr><td style="font-size: 10pt; color: #2E8B57"><center>タイトル</center>
<center>項目１</center>
<center>項目２</center>
<center>項目３</center>
</td></tr></tbody></table>

タイトル項目１項目２項目３

solid　枠の色
background-color:背景色
width=横幅
height=高さ
font-size:文字の大きさ
color:文字の色

あたりを変えて使いましょう
もちろんタイトルと項目はお好きなように

・注意・コピーペーストで使う場合は「改行」を全て削除した方がいい場合があります

これは使いやすいかも？

リンク集（項目別）

便利なリンク集

Blogger	Bloggerに関するサイトのリンク集
レイアウト	ホームページやブログのレイアウトに関するリンク集
Google	Googleの便利な使い方
募集中	募集中

HTML table （表） 基本

table
・基本中の基本です

<table border="1">
<tr><td>あああ</td><td>いいい</td></tr>
<tr><td>かかか</td><td>ききき</td></tr>
<tr><td>さささ</td><td>ししし</td></tr>
</table>

実際の表示

あああ	いいい
かかか	ききき
さささ	ししし

レイアウトを作ったりするのに便利ですがブラウザによってはうまく表示されない事があるようです
「コピー」「ペースト」してBloggerで使用すると表の上に空白ができます
使用する場合はHTMLの編集で「改行」を全て削除して下さい

border="1"の数字を変えると外側の枠の幅が変わります

「5」

あああ	いいい
かかか	ききき
さささ	ししし

「10」

あああ	いいい
かかか	ききき
さささ	ししし

・見出しを付ける

<table border="1">
<tr><th>「あ｣の列</ｔｈ><ｔｈ>「い」の列</ｔｈ></tr>
<tr><td>あああ</td><td>いいい</td></tr>
<tr><td>かかか</td><td>ききき</td></tr>
<tr><td>さささ</td><td>ししし</td></tr>
</table>

実際の表示

「あ」の列	「い」の列
あああ	いいい
かかか	ききき
さささ	ししし

「<th>」と「</ｔｈ>」に挟まれた文字は太字になりセル（文字の入っている枠）の中央に表示されます

Blogger link

ここには私がBloggerブログを始めた時に何度も拝見してお世話になり、今でも新しい情報をいただいているサイトのリンクを投稿しています

Blogger リンク集

クリボウのBlogger入門	google Bloggerでブログの始め方、マニュアル
クリボウのBlogger Tips	Bloggerの新情報
clmemo@aka	コンピュータ総合　Bloggerについてもかなり詳しく説明されている
Bloggerブログコミュニティー	日本語blogger同士で情報を集め合うコミュニティー。困っている事の答えがあるかも？
hummingbird	PC総合、Bloggerについての投稿も多く、オリジナルテンプレートを配布している

Google Link

Google便利サイト

Google Mania	Googleの便利なノウハウ
Gmail	Gmailの使い方まとめ