当ブログでもっとも多くシェアいただいた「H1一つでここまで出来るCSS見出しデザインのアイデア9個」が、公開から半年を経過しているにも関わらず、いまだ多くの方にご訪問いただいてます。そこで、アクセス解析を少し覗いてみました。 人の数・時間は有限であるまず今回は以下ブログを読み、はっとしてこの記事を書こうと思い立ちました。 ・Geekなぺーじ:知名度ゼロからの「ネット影響力」獲得への道 ネットを閲覧する人の数は有限であり、かつ、各人によるネット閲覧時間も有限であるため、世の中の全員が全て多くのアテンションを得られるわけではありません。ブログを見ていただくということは、みなさんの時間を少しずつ頂くということになります。当ブログもどれだけの時間を割いていただいたのか気になったので調べてみました。 35,442PV × 平均滞在時間2分24秒件の記事は、8月1日時点で484ツイート、609いいね、

当ブログ記事「背後には気をつけろ！Gunosy砲の本当の威力」で紹介しました、Gunosyによるアクセス数アップとその裏に隠されたサーバー負荷の問題。これを逆手に取ってアクセス数をさらに稼ごうというグノシーハック(?)を発見したのでご紹介します。 サムネイル画像 直リンクを逆手に取る！Gunosyでは、配信前日に情報を収集しています。その際、タイトルや概要、サムネイル画像などがOGPタグをもとにGunosyサーバーに保存されます。 サムネイルは、画像そのものをキャッシュするわけではなく、URLだけが保存され配信されるメール、アプリ、Webサイトから直リンクされる形になっています。 そこで、それを逆手に取りGunosyでの配信が決まったら、収集された画像URLはそのままに別の画像に差し替え(上書きし)ます。OPGタグは、元の画像をリネームして改めて設定すれば、ブログに変化はありません。 配信

「雑誌とiPadでレコードが聴ける!?ポカリスエット「POCARI MUSIC PLAYER」 | DesignWorks」で紹介されていた「POCARI MUSIC PLAYER」が、雑誌の広告に付属したレコード型カードをiPadに置くだけで音楽が楽しめるということで、気になったので分解してみました。 まずは雑誌「Switch 2013年8月号」とiPadを準備 「SWITCH Vol.31 No.8 ◆ 完全独占特集 ◆ Southern All Stars 僕らのサザン、みんなのサザン」とiPad(2nd以降)を準備します。 P16～19の「FUJI ROCK FESTIVAL'13(本年は終了) とポカリスエット」タイアップ広告を開きます。 レコード型カードをターンテーブルにのせることでディスク番号を認識します。カードは3枚ありますが、フェスに出演した3組の新進アーティストの曲をそ

Google アナリティクスの公式Androidアプリでは、曜日・時間別ページビューがヒートマップで表示され、ざっくりとした傾向を視覚的につかむには便利だったのでご紹介します。 ヒートマップでざっくり曜日・時間別の傾向をチェック方法はとても簡単です。Google アナリティクスの公式Andoidアプリにチェックしたいアカウントを設定して「サマリー」を表示するだけ。 「今日」「昨日」「先週」「先月」「カスタム...」と期間を指定して抽出することができます。 当サイトの場合 記事公開のタイミングやシェアしていただくタイミングによって大きく変化します。 B2Cサイトの場合 メルマガ配信などのタイミングでアクセスが集中することもありますが9時～24時までまんべんなくアクセスがある傾向です。 B2Bサイトの場合 一般的な業務時間内である9時～18時のアクセスがほとんどです。 おわりにいかがでしたでし

Webデザインのトレンドワード「フラットデザイン」。海外事例は多く紹介されていますが、国内事例はあまり見かけなかったのでまとめてみました。 「フラットデザイン」に明確な定義はなく、事例の選別は非常に悩みましたが、要素を含んでいるであろうサイトも含めピックアップしてみましたので参考にしていただければと思います。 フラットデザインとは簡単に言うと「立体感やテクスチャ、影など現実に似せた装飾を排したシンプルで平面的なデザイン」といったところでしょうか。 さらに、グリッドレイアウト、抑えめのトーンでの統一感、ベタ塗り、などが特徴になるかと思います。 詳しくはこちらが参考になりますのでご覧ください。 ・2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | MEMOPATCH ・今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG 国内「フラットデザイン

サイトやブログのアクセスアップには、ページのタイトルや概要はとても重要な要素となります。 昨今、アクセス元の多くは、検索エンジンやソーシャルメディア、キュレーションサービスなどが中心です。各サービス上での表示のされ方次第で、アクセス数に大きな違いがあると言っても過言ではありません。 そこで、各サービスでの表示されるタイトル(title)や概要(description)の文字数を検証し、最適な文字数を導き出しました。 ページのタイトルは20文字、概要は50文字以内に要点を絞る！検証の結果、各サービスで途切れることなく表示される最小値が、タイトル「20文字」、概要「50文字」となりました。 タイトルは、20文字以内に言いたいことを！20文字以内に収めようとすると非常に難しいので、20文字以内に一番伝えたいことを盛り込み、30文字前後のタイトルにするのが望ましいでしょう。 概要は、50文字で一旦

Web界隈では有名な「面白法人カヤック」さんが創業15周年を迎え、コーポレートサイトのリニューアルと同時に発表された新ロゴ(CI)のパンチ○力にクラっと来たのでご紹介します。 ロゴの一部分を各社員が自由にカスタマイズ3人で創業したことに由来する「カヤック(船)に3本のオール」。その内の1本を各社員が自由に手を加えることが出来るというもの。 もともと面白法人カヤックは3人で創業したこともあり、ロゴマークを「舟のカヤックに3本のオールがある」というイメージにしていました。 今回、そのオール3本のうち、1本を各社員が自由に手を加えて変更できるようにしました。 野球ゲームの制作者なら野球のバット、コピーライターなら鉛筆、飲食店業務ならおたま…という形です。鉛筆 素敵なコピーを書いてくれそうです。 ライトセーバー 未知なる力を発揮してくれそうです。 タコの足 吸付いたら離れない粘り強さがありそう?!

「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ

7月2日「Google Reader」のサービス終了から2週間以上経過し、みなさんは代わりにどのRSSリーダーを常用するか固まって来た頃でしょうか。 どのサービスが人気なのか気になるところですが、各所ブログなどでは登録(購読)ボタンを公式に提供しているFeedlyボタンをよく目にするような気がします。 そこで今回は、ブログファン獲得のための各RSSリーダーの登録(購読)ボタン・リンクをご紹介します。 Feedly http://cloud.feedly.com/ ボタン設置ドキュメントhttp://www.feedly.com/factory.html 設置サンプル： 登録リンク青字部分にURLエンコードしたfeedを入れます。 <a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3a%2f%2ffeeds%2efeed

自サイトに設定しているGoogle アナリティクスのトラッキングコードが、意図せず他サイトに設置されてしまいアクセス解析が正確にできなくなってしまうことがあります。 まずは、間違って設置されたサイト運営者に連絡し変更を依頼する事が先決ですが、対応に時間がかかったり連絡が取れない場合もあります。そんな時は、Google アナリティクスの設定で回避することができます。 当記事を書くきっかけとなったのは、陰ながら勝手にお世話になってるWebクリエイターボックスのMana(@chibimana)さんの以下ツイート。 度々うちのGoogleアナリティクスの解析コードが他サイトに埋め込まれて正確な解析ができません。最近また変な解析結果出てるなーと調べたら ameblo.jp に埋め込まれ、芸能人オフィシャルブロガーさんの結果まで反映されてるよ＼(^o^)／ — Mana (@chibimana) Ju

公開日：2013年6月28日 カテゴリ：アレな話題 『Gunosyに掲載されたけど、そのサムネイル直リンだよ！』 http://squeeze.jp/blog/web-service/power-of-gunosy-cannon/ っという情報を仲良くさせて頂いているSQUEEZEさんが書いておりまして、「Gunosyまた始まったのか！（ガタッ」と胸を躍らせながら、そもそもサムネイルを直リンする行為ってどうなのか考えてみました。 1.個人的に画像の直リンは好きじゃないです。 写真素材サイトを運営しているので当たり前ですけどね。('A') うちのエントリでは過去に無断転載系の記事を書いておりまして、こういったニュースには敏感になってます。 ・ブログの記事が会員のみ閲覧できるページに全文転載された件 https://www.susi-paku.com/pakupost-149.html ・【記

Captcha security check actyway.com is for sale Please prove you're not a robot View Price Processing

Gunosy(グノシー) - http://gunosy.com/ Gunosy(グノシー)はあなたのtwitterアカウントやfacebookアカウント,はてなアカウントからあなたの興味を分析し，興味にあったニュース・記事を推薦するスマートなパーソナルマガジンです。 Gunosyの配信による爆発的なアクセスを「Gunosy砲」なんて呼んだりします。 同時アクセスが300件を超えるなど、影響力は日に日に大きくなっているようです。 ・Gunosy砲の威力が上がっている件。同時アクセス300件突破 - ihayato.書店 | ihayato.書店 これだけ同時にアクセスがあると安価なレンタルサーバーだと、ページが表示できないなんてことも起こるでしょう。 というのも、Gunosy砲には、隠された本当の威力があったのです。 背後からの砲撃Gunosyではメールやアプリ、Webでユーザの興味にあっ

よく耳(目)にする『クラウド○○』という言葉。クラウドコンピューティング、クラウドサービス、クラウドソーシング、クラウドファンディングなどなど。 "クラウド"と聞いて、上の写真のように『雲』を連想される方も多いと思いますが、実はもう一つの意味があります。 カタカナだと一緒だけど、まったく違うクラウドの意味ネットやTVなどで見聞きする『クラウド』という言葉は、カタカナであったり発音の差異があるわけではないので一見(一聴)すると同じ言葉に感じてしまいますが、本当はまったく意味も綴りも違う英単語です。 「雲」を意味するクラウド【cloud】 インターネットを通じて、コンピュータ資源を利用するときに使われる言葉です。「コンピュータシステムのイメージ図」において、ネットワークが「雲」の図で表されている事に由来するとも言われています。 クラウドコンピューティング【cloud computing】 ネッ

公開日：2013年2月28日 カテゴリ：月刊まとめ2013 ようやく梅も咲きはじめ、寒い冬が終りを告げる感じですね。個人的には一年で最も嫌いな梅雨まで、あと３ヶ月弱です。＼(^o^)／ 梅雨といえば、先日書いた防湿庫の記事がGIGAZINEのヘッドラインニュースに何故か紹介されました。内容的には自分でも良くできたアフィ記事だと読み返しているのですが、、流入（アクセス）かあると売れるもんですねーｗ。うちのブログはあまりamazonのアソシエイトを貼らない為、毎月の収入はすずめの涙ですけども、この記事だけで毎月の収入を凌駕する売上を叩き出しまして、『おいおい、レンズレビューとかやっちゃおうか・・・』っと考えてしまいます。 とにかく”流入のある商材記事は美味しい。”という事をあまり経験した事がないのでガジェット系のブロガーさんは毎日ホックホクという噂は本当だったと確信している今日この頃でございま

Make 24 monthly payments Pay 0% interest Start using the domain today. See details

どの段階にあるかはCSS current work & how to participateで確認できます。 また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン｜Webpark」をご参考に。 若干それましたが、試行錯誤して並べた結果がこちらです。普段よく使うプロパティのみ載せています。 表示に関するプロパティ まずは表示に関する内容です。見える見えないは一番大切なことということでしょうか。 display list-style list-style-type list-style-image list-style-position overflow clip visibility opacity 配置に関するプロパティ 次はどこに配置

先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、

公開日：2013年2月13日 カテゴリ：企画 英語読みするとカッコイイ！(‘A’) という時代は終わったと思うのですが、ちょっと困惑する事がありまして、皆さんのお知恵を貸して頂ければ幸いです。 えっ！私間違ってますか？ はいさて、今回の記事はすごく短めにまとめようと思っています。 先日ですね、イラストレータCS5のカタログデータを持って、印刷会社へ入稿しに行った時 オペレーター「A4、中綴じですね。イラストレータのバージョンはいくつでしょうか？」 すしぱく「えっ、、っと・・・CS5（ご）ですね。」 「すべてCS5（ファイブ）で制作されておりますか？」（ドヤッ） ※（’A’）! ファイブと言い直された） 「えっ、、っと・・・たしか、CS5.5（ごーてんご）も含まれていましたね。」 「CS5.5（ごーてんご）はどのファイルかわかりますか？」 「デザイナーに確認してみます。CS6（ろく）も対応は

みなさんご存じ(?)のCcss = 『Chocolatecoating Style Sheet』をいろいろなサイトやご自身のサイト、ブログで簡単に試せるブックマークレット＆ブログパーツをご紹介します。 CcSSについての詳細はこちら↓ ・「バレンタインデーにまだ間に合う！ブログやサイトをチョコレート色に彩るCcSSの実装」 見出しがチョコレートに！CcSS ブックマークレット 見ているサイトの見出し(h1,h2,h3)がチョコレートに変身するブックマークレットです。まずは、下のリンク「Chocott!」をクリックしてみてください。当サイトの見出しがチョコレートに変化します。もう一度クリックすると元に戻ります。 上記のリンクをブックマーク バーまでドラッグします。その他のWebページを閲覧中にこのブックマークレットをクリックすると、3つのWebサービスへのリンクが表示されます。(右クリックし