はてなブックマーク

スマートフォンの普及でフリックを意識した、「画像ギャラリー」「パンくずリスト」「コンテンツスライダー」などが増えてきました。 検索してみると、jQueryの「iScroll」というプラグインを使った実装について書かれているページが多くありますが、記事の投稿日時は全体的に古め(2年～3年前が多い)となっていました。 このページではCSSだけで簡単に実装でがき、フリック操作可能な「パンくずリスト」「画像ギャラリー」「コンテンツスライダー」のコードを掲載したいと思います。 コピペで使えるので、宜しければお使いください。 PCのから御覧頂いている場合 このサイトはレスポンシブデザインに基いて設計しているので、ブラウザの幅を小さくしたり、Chromeの要素の検証などから、ユーザーエージェントを指定してご確認いただくと、よりスマートフォンやiPhoneの実機に近いかたちでご確認頂けます。 PR ページ

フリーソフトをダウンロードせず、しかも簡単に無料で動画の容量を軽くする方法について解説したいと思います。 HTML5のvideoタグを使って背景に動画を表示させたところ、PCのファンがものすごい唸りだしました。恐る恐る表示させた動画の容量をみたところ、75MB！(汗 新規サイトを作るにあたり、過去に納品された動画を使う案件だったため、動画の再編集は費用が発生する状況。 これはまずいと思い「動画 容量 軽く」といったキーワードでググってみたところ、沢山の人が「MP4で動画を軽くするには？」といった質問を教えてgooなどに投稿していました。 会社のPCなので信頼のできるフリーソフト以外をインストールするのは、なるべく避けたいと思い、色々ググっていると海外のサイトで、動画をアップロードして条件を指定するだけで、動画の容量を小さく(軽く)してくれるサイトがありましたので、使い方を解説しつつ紹介でき

このJunkBlogはワードプレスで運用していて、自作テンプレートを使用しています。レスポンシブデザインを採用しているのですが、スマホで表示した時のSNSシェアボタンを何とかしたいなぁと常々考えていました。 何故かと言うと、PCでは表示領域が広いのでボタンが一列に並んで綺麗に見えるのですが、ブラウザのサイズを小さくしてスマホサイズになると、表示領域が足りずにボタンが改行されて2列になり、あまり綺麗なレイアウトとはいえない状態でした。 そこで当ブログで採用しているシェアボタン(Facebook/twitter/はてぶ/pocket/google+)をWebフォントを使ってカスタマイズする事で、スマートフォンでのみ収まりの良い丸ボタン風SNSシェアボタンを作ってみたいと思います。 オリジナルWebフォントの作り方をこのエントリーで解説しています。 また日本でよく使われる「はてなブックマーク」な

最適化の準備 最適化について必要な工数について 最適化のために要した工数からお話したいと思います。最適化にかかる工数ですが、キャンペーンの数によって異なってきます。運用するキャンペーン数が多ければ、当然工数は増えますし、少なければ工数は減ります。私の管理しているサイトはあるブランドの販売サイトで、運用したキャンペーンは2つだけでした。初めてアドワーズを運用する僕が調べ物やサポートに相談しながら、最適化にかかった工数は2人日(16時間)というところでしょうか。 最適化を行い色々なことが安定してくれば、キーワード(入札単価、品質スコア、掲載順位)と広告(各広告のクリック率、クリック率の少ない広告の停止、改善した広告掲載)の管理に週3～5時間もかければ充分だと思います。 公式サポート SEOと違ってアドワーズは、Googleに直接電話で相談できる窓口があります。親切かつ丁寧に疑問に答えてくれるの

スマートフォンの普及で、レスポンシブデザイン、スマホファーストが推奨されつつある中、今までどおりにテキストにリンク指定するだけでは、ユーザビリティを損ねてしまう場合があります。 例えばECサイトの検索結果一覧に表示される、画像とタイトル(テキスト)だけでなく、商品BOX(画像、タイトルが含まれる)全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。 ※本文中にサンプルとして掲載しているBOXは全て、レスポンシブデザイン対応しているので、PCでご覧の方はブラウンザの幅を小さくしたり大きくしたりすることで、BOXにの伸縮を確認できます。 PR .link_box{ position:relative; width:30%; padding:5%; border:solid 1px #CCC; margin:0px auto 20px; } .link_box a{ positio