タグ

tipsとwebに関するmrnoonのブックマーク (20)

  • あなたのサイトの戦闘力は?『Web Scouter』が登場! | POP*POP

    あなたのサイトの戦闘力影響力を測定できる「Webスカウター」の登場ですw。このサイトっていったいどれぐらいすごいの?というあなたの素朴な疑問に答えてくれます。 » Webスカウター - やつの戦闘力はどのぐらいだ? 下記、詳細をご紹介。 ■ 設定方法 Webスカウターはブックマークレットです。Webスカウターのトップページにあるスカウターのリンクをツールバーにドラッグ&ドラッグするだけです。 色は赤色か緑色の二種類あるようです(機能的には同じっぽいのでお好みでどうぞ)。 ↑ ブックマークレット設定完了!気になるサイトでクリックするだけ。 ■ 使い方 影響力を調べたいページでブックマークレットをクリックするだけ。すると・・・。おぉ・・・。「スカウターだ・・・w」。 ↑ こんな感じで測定します(モザイクかけてます。詳細は実物を是非見てください)。エフェクトがかっくいい・・・気分は○ジータです。

    あなたのサイトの戦闘力は?『Web Scouter』が登場! | POP*POP
    mrnoon
    mrnoon 2007/04/11
    あなたのサイトの戦闘力影響力を測定できる「Webスカウター」の登場ですw。このサイトっていったいどれぐらいすごいの?というあなたの素朴な疑問に答えてくれます。
  • あなたが知らない(かもしれない)Googleコマンドまとめ | p o p * p o p

    Googleを電卓や単位変換として使う・・・というのは有名ですが、「birthday」や「president」はどうですか?「music:」は? よくある検索テクニックまとめ、ではありますが、自分が知らなかったものもあるのでメモとしてエントリー。ご存知の方はどうかスルーにてお願いいたします。 » Exploring Google’s Hidden Features では、全部で10カテゴリーをどうぞ! 【1】 計算する 足し算、引き算などの一般的な計算ができます。この使い方は有名ですね。電卓を使うよりも手っ取り早いです。 3+5 ややこしい計算もへっちゃらです。 3/5*4-2*0.2+9^2 ある数値の一定割合もこうやって調べられます。 50% of 123 【2】 定数を知る 各種の定数を出すことも出来ます。 円周率(3.14159265)が出ます。 pi 光の速度(299,792,4

    あなたが知らない(かもしれない)Googleコマンドまとめ | p o p * p o p
  • [年末特集:2006]始めてみよう!仮想世界「Second Life」--それって何?編

    最近話題の仮想世界「Second Life」。先日も登録ユーザー数が200万人に達したとして新聞やメディアを賑わせた。現段階では英語版しか出ていないが、それでも数千人規模の日人ユーザーがいると言われている。CNET Japanでは「自分も始めたい」「年末年始の休暇中に試してみたい!」という方のために、今日と明日、Second Lifeの概説をつづった稿のほかに、基的な操作方法をご案内する「仮想世界『Second Life』--基操作編」、無料で楽しめる面白いスポットの画像をご案内する「仮想世界『Second Life』--おもしろスポット画面ショット編」をお届けする。 まずSecond Lifeとは、ユーザーがアバターと呼ばれる自分の分身を、ネットワーク上に構成された3D CGの中に参加させることのできる、インターネット上の仮想世界のこと。Linden Labという企業が運営してい

    [年末特集:2006]始めてみよう!仮想世界「Second Life」--それって何?編
  • CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与:phpspot開発日誌

    Showing Hyperlink Cues with CSS (Ask the CSS Guy) I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. CSSPDFExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。 自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後

  • Litebox 1.0 の rel 属性を自動付与する

    以前、クールに画像を表示するツール Litebox 1.0 をご紹介しました。この Litebox を起動するためには、a 要素の rel 属性に "lightbox" を付与しなければならないという条件があり、これを手動で付与するのは結構面倒です。 ということで「自動付与できないでしょうか」というご質問を頂きました。大変遅くなりましたが、rel 属性を自動付与する方法をエントリーにてご紹介致します。 rel 属性を自動付与するには、Litebox 1.0 のパッケージ内にある、js/litebox-1.0.js を任意のエディタで開き、130 行目辺り(リスト 1)に青色のコードを追加します。 リスト1 litebox-10.js 変更箇所 : // loop through all anchor tags for (var i=0; i<anchors.length; i++){ v

    Litebox 1.0 の rel 属性を自動付与する
    mrnoon
    mrnoon 2007/04/11
    ということで「自動付与できないでしょうか」というご質問を頂きました。大変遅くなりましたが、rel 属性を自動付与する方法を本エントリーにてご紹介致します。
  • YouTubeをブログに貼り付けやすくしてみた

    最近になってYouTube上のCMのリンク集のエントリーを二つほど書いたが、「おもてなし」の面で言えば、やはりブログエントリーそのものに動画を埋め込みたい。しかし、二つほど問題がある。一つはこのブログが使っているTypepadサービスがobjectタグを受け付けないこと、もう一つがYouTube標準の大きさ(425x350)がこのブログには少し大きすぎること。 そこでちょっとしたPHPのプログラムを書いて、iframeを使ってこのブログに埋め込められるようにしてみた(TypepadはobjectタグはNGだが、iframeタグはOK)。大きさも、このブログ標準の画像の標準サイズの、幅320ピクセルで表示するように指定した。 下がこの仕組みを使った例。画像のまんなかのプレーボタンをクリック(ただし、IEはセキュリティセッティング次第では2回クリックが必要)すると動画が始まる。 iframeタ

    mrnoon
    mrnoon 2007/04/11
    大きさも、このブログ標準の画像の標準サイズの、幅320ピクセルで表示するように指定した。
  • text-indent:-9999pxを使ったときFirefoxで出る無駄な点線は消せます::::::STOPN' LISTEN::::::to the silence:::::::

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

    mrnoon
    mrnoon 2007/04/11
    a{ outline : 0 ; }
  • TRANS [hatena] - 印刷用CSSをまとめてみた。

    以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

    TRANS [hatena] - 印刷用CSSをまとめてみた。
  • ITmedia Biz.ID:Flickrをもっと楽しむための6つの外部サービス

    オンラインアルバムの「Flickr」。写真をアップロードする、他の人の写真を閲覧するほかに、外部のツールを使ってこんなこともできる。 オンラインアルバムの米Flickrが人気だ。自分で撮った写真をアップロードして管理したり、多くのユーザーがアップした写真を閲覧している人は多いだろう。それだけでなく、豊富なFlickr関連の外部サービスを使えば、画像を加工したり、名刺を作ったり、ゲームをしたりなどさらに楽しむこともできる。FlickrAPIを公開していたり、写真のライセンスとしてクリエイティブ・コモンズを選択できたりなど、外部のサービスを作りやすい環境のせいか、外部サービスの数は多い。 写真を加工するものや管理を楽にするものなど、Flickrを使ったツールを紹介していこう。 写真をプリントした名刺を作ろう――moo 自分がFlickrにアップロードした写真から名刺を作成できる「moo」は日

    ITmedia Biz.ID:Flickrをもっと楽しむための6つの外部サービス
    mrnoon
    mrnoon 2007/04/11
    オンラインアルバムの「Flickr」。写真をアップロードする、他の人の写真を閲覧するほかに、外部のツールを使ってこんなこともできる。
  • PCサイトを携帯に対応させるまとめ

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    mrnoon
    mrnoon 2007/04/11
    PC向けサイトがあるのなら、携帯電話に対応することで潜在ユーザーを取り込むことができます。 今回は、PCサイトを携帯に対応させるのに役立つ情報をまとめてご案内させていただきます
  • リンクベイティングとは?被リンクを誘う釣りタイトル

    リンクベイティングとは、被リンクの獲得を目的として、リンケラティを釣り上げるためのフックを仕込んだコンテンツを作成することをいいます。慎重に実施する必要があり、継続性やモラルも問われますが、極めて強力な被リンク獲得の方法です。 リンクベイト、リンクベイティングとはリンケラティ(影響力のあるブロガーやソーシャルメディアのユーザー)に狙いを定め、彼らの興味を引き、反応を引き出すことで被リンクを構築する施策をリンクベイティングといいます。また、リンクベイティングのために作成するコンテンツのことをリンクベイトと呼びます。 被リンクの構築、ことにトピックに関連性のある被リンクはSEOにとって極めて重要なものです。しかし、淡々とコンテンツをアップロードしていくだけでは、そうした関連性の高い被リンクを構築するのは困難です。なぜなら、顧客や取引先とリンケラティは必ずしも一致しないという問題があるからです。

    リンクベイティングとは?被リンクを誘う釣りタイトル
    mrnoon
    mrnoon 2007/04/11
    しかしその答えは明快です。読者を集めたいなら、読者の役に立つものを書けばいいのです。
  • clearfixハック|CSS HappyLife

    通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei

    clearfixハック|CSS HappyLife
    mrnoon
    mrnoon 2007/04/11
    ソコでかなり便利に使えるハックが、clearfixと呼ばれるハック。 使い方は、clearしたい親要素に下記のように記述。
  • CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例:phpspot開発日誌

    A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (FireFoxのみ) example two (FireFoxのみ) example three (FireFoxのみ) example four (FireFoxのみ) Example five (FireFoxのみ) Example six  (IEも動きます) Example seven  (IEも動きます) アイデア次第でこういった技もできてしまいますね。 通常なら画像をPhotoShopなんかで

    mrnoon
    mrnoon 2006/11/30
    CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。
  • ウノウラボ Unoh Labs: Firefox 2.0に移行する際のお勧め設定(中級編)

    こんにちわ、hide です。 10月25日早朝にFirefox 2.0が正式にリリースされました。少し前にInternet Explorer 7も英語版がリリースされていたりして、最近Webブラウザ周りがにわかに熱いようです。 Firefox 2.0の主な変更点は次の通りで、レンダリングエンジン自体に変更はないとのこと。先日のジュンヤさんのエントリにRC2の先取りレビューがあるので、個々の機能についてはそちらを参考にして頂ければと思います。 デフォルトテーマのデザイン変更 フィードのプレビュー機能とRSSリーダ購読機能 タブ機能の強化 検索バーでのサジェスト機能 JavaScript 1.7 さて、今日はFirefox 2.0に移行する際のお勧め設定について書きます。通常の設定画面では行えない、中級者以上の方向けのちょっとだけマニアックな設定です。と言ってもそんなに難しくないので、初心

  • IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌

    Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html

    mrnoon
    mrnoon 2006/11/30
    IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。
  • サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25

    このブログの文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも(狭すぎると困るが)はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな

    mrnoon
    mrnoon 2006/11/30
    結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷した
  • 口コミマーケティングに欠かせない7つのテクニック | P O P * P O P

    口コミマーケティング隆盛の昨今。様々な企業が試行錯誤していて面白いCMも増えてきています。 そんな中、こちらのエントリではWebでの口コミマーケティングにかかせない7つのテクニックを紹介しています。では早速どうぞ。 » 7 tricks to Viral Web Marketing – Baekdal.com ■ 見た人が何か「感じる」ものを 広告を作る際に、何より一番重要なのは見た人々に「強い感情」を呼び起こすことです。そこには、あなた自身の強い意見やアイデアが欠かせません。 例えばこんな感情を人々に抱かせると成功です。 愛か憎悪の感情に満ちる。 幸せや怒りの感情を感じる。 慈悲かエゴイズムに溢れさせる。 「中立」なものを作るのは絶対に避けましょう。見た人全員を喜ばせようだとか思ってはいけません。見た人の感情を刺激することが重要なのです。 ■ 予想を裏切れ もしあなたが、自身のキャンペー

    口コミマーケティングに欠かせない7つのテクニック | P O P * P O P
  • ウノウラボ Unoh Labs: WEBアプリのテストに必須なツール7種

    こんにちは!やまもと@テスト番長です。 前回satoさんの書いたエントリーが好評のようですね。 自分は実は美術系出身です。なので「デザインセンスのある人からみた~」というエントリーでも続けて書いちゃおうかなと一瞬思いましたが、世の中にはWEBデザインのプロの方もいらっしゃることだし、控えておきましょう。 センスってのも考え込むと難しいですしね。 個人的には、WEBデザインの美醜って「使いやすさ」とかなり直結な気がしてます。 さて、今回は僕が普段テストに使っているツールでもご紹介してみようかと思います。 Selenium 一年前くらいに登場した無償の自動実行ツールです。 有償の自動実行ツールは以前からありましたが、 ベンチャーが購入するには高価なものなので 大手以外にはあまり導入されていなかったであろう類のツールです。 テストシナリオにそってブラウザを自動で操作してくれます。

    mrnoon
    mrnoon 2006/11/30
    さて、今回は僕が普段テストに使っているツールでもご紹介してみようかと思います。
  • COULD:スクロールしたあとの見せ方

    mrnoon
    mrnoon 2006/08/29
    スクロールしないで見えるエリアのリンクはクリックされやすく確率は76.5% のものぼります
  • hxxk.jp - CSS の記述ルール記事のまとめ

    いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お

    mrnoon
    mrnoon 2006/08/18
    BADSTRING
  • 1