記事をご覧の方へ 現在vivibit.netは旧システムからの移行に伴い修正作業を行っています。 表示上の問題や軽微なエラーが発生する可能性がありますが、ご利用に問題はありません。 また、現在たぬえさ3以外のダウンロードができなくなっています。 問題を発見された場合はコメント欄でご指摘いただけると助かります。 全く未検証な話だけど、手持ちのDIGNO DUAL2でこのサイトの表示確認をすると、どうも「 」が「・」として表示されているような気がする。 先日までこうだったようには思わない。 寝起きで条件の確認などもしていないが、Android+Chrome iOS+Safari Windows7+Chrome の環境でだけさっと表示確認し、やはりおかしいということになった。 シンプルなhtmlで書かれたページで をいくつか入れてみたが、問題の Android4.2.2 +

同一コンテンツでありながらPC用とモバイル（スマホ）用のURLが別になっている場合、コンテンツが重複していると判断されてしまい、SEO上不利に働く可能性があります。そのためにも、PC用とモバイル用のURLの関係性を正しく検索エンジンに伝える必要があります。ここでは、モバイル用URLがPC用途は別に存在する場合にやるべき3つの対策を解説します。 モバイルを取り巻くSEOは、当記事が最初に書かれた2014年頃に比べて大きく状況が変わっています。「モバイルSEOとは」「モバイルフレンドリーとは」「AMPとは」「MFI（モバイルファーストインデックス）とは」などの記事もぜひ合わせてご確認ください。 この記事のポイント PC用とモバイル用のURLが別々であると、重複コンテンツと判断されてSEO上不利になる alternateタグ、canonicalタグ、302リダイレクトで対策する 可能であればPC

ニュースはGoogle Readerで見るようにしているんだけど、朝日新聞やら日本経済新聞のRSSを登録していると、クソもミソもいっしょくたに配信されるもんだから、1日見ないと未読がたくさん溜まってしまう。 ある程度ニュースをフィルタリングして配信してもらって、かついろんなメディアの記事が見れるGoogleニュースが便利なんだけど、アメリカ版はRSSがあるけど、日本版はサイト上にはRSSのリンクがないから、GoogleニュースはRSS配信していないのかと思ったら、実はRSS配信してた。 基本的なフォーマットはこんな感じ http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rssoutput=rssってところで、RSS配信を指定している。output=atomならATOM配信になる。ATOMの方が汎用的なフォーマ

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

「カタログのダウンロード数は？」 「どのページのバナーがクリックされやすい？」 「申し込みボタンはどの位置が押されやすい？」 「外部リンクはどのくらいクリックされている？」 イベントトラッキングを使えば、そのようなサイト上で行われる「ユーザーの行動」を計測することができます。そしてその行動を分析してサイト改善に活かすことができます。 今回はそんな「ユーザーの行動」を知ることができる「イベントトラッキング」ついてご紹介します。 目次 イベントトラッキングとは イベントトラッキングの設定方法 レポートの見方 注意点 Googleタグマネージャを使ったイベントの取り方 イベントを目標に設定する方法 活用方法 1. イベントトラッキングとは イベントトラッキングとは、「ユーザーの行動」を計測することができる方法です。例えば、

Google Search Console（旧ウェブマスターツール）は、SEOに役立つ機能をはじめ、サイトの運用を手助けをしてくれるツールです。 （注）本記事は、名称変更前の「ウェブマスターツール」の情報が掲載されいます。名称は「ウェブマスターツール」から「Google Search Console」へ変更してあります。 サイトを運営する上で導入必須ツールですが、「聞いたことはあるけど設定していない。」「設定しているけどいまいち使い方がわからない。」という方も多いのではないでしょうか。 私も、Search Consoleの機能のひとつである「検索クエリ」はこまめにチェックしていますが、他の機能はまだまだ活用・理解できていません。 ということで、今回は押さえておきたいSearch Consoleの使い方をまとめます。 目次 Search Console（旧ウェブマスターツール）ってどんな時に

ビジネス用のニュース、プロダクトのリリース、プロモーションなど、さまざまなレイアウトのHTMLメールをドラッグ&ドロップで簡単に作成できるオンラインサービスを紹介します。 デスクトップ・スマホ両対応で、プレビューやメールアプリでのテストなど機能も非常に充実しています。日本語もOKでした！ BeeFree 使い方は簡単です。 上記ページの「Let's get started」をクリックし、HTMLメールを作ってみましょう。 ※HTMLメールの作成やファイルのダウンロード時に登録は必要ありません。作成したメールをサーバー上にキープする時だけ登録が必要です。 まずはテンプレートの選択をします。 2カテゴリ各4種類、画像やテキストが仮配置された「Rich Templates」。

Free responsive email templates. Browse our selection of free mobile-friendly email templates, designed and optimized to be responsive and customizable. Choose an email template to start editing, or design a template with your branding in our drag-and-drop editor. Build a free template now Notice: Undefined index: free-flag in /nas/content/live/cmwpprod/wp-content/themes/cm-theme/email-templates/_

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

Introduction LinkChecker is a free, GPL licensed website validator. LinkChecker checks links in web documents or full websites. It runs on Python 2 systems, requiring Python 2.7.2 or later. Python 3 is not yet supported. Features recursive and multithreaded checking and site crawling output in colored or normal text, HTML, SQL, CSV, XML or a sitemap graph in different formats HTTP/1.1, HTTPS, FTP,

You know that feeling, when you look at your old works and think “What was I thinking!”. So, I looked at Transform Each script with same thoughts and decided to make an update for it. I rewrote it from the ground, fixed previous bugs, redesigned the interface and added some features, which were requested in comments. THIS VERSION OF THE SCRIPT IS DEPRICATED Oh, hey there. I have newer version of t

モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます！ 明けましておめでとうございます。本年もWebNAUTをよろしくお願い致します。私の新年1本目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター： ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか？ デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます

JavascriptでCookieを扱うのはどうも敷居が若干お高めですが、jQueryプラグインのjquery.cookie.jsがあると、誰でも簡単にCookieマスターになれます！ jquery.cookie.js Download 公式jQueryからはなぜかうまくダウンロードできなかったので、こちらからどうぞ。

photo credit: jeffsmallwood via photopin cc こんにちは、marubon（@marubon_jp）です。 サイト表示速度のチューニング等を行っているとHTTPヘッダをのぞきたくなる時があります。今回は、Google Chromeを使用したHTTPヘッダの確認方法を紹介します。 HTTPヘッダとは HTTPとは、Hypertext Transfer Protocolの略で、WEBでリソースを取得する時に一般的に使用させるプロトコルです。RFC2616として仕様が策定されています。 HTTPヘッダとは、そのHTTPプロトコルのヘッダ情報のことです。ユーザエージェント（クライアント）とサーバ間の通信でやり取りされるWEBリソースのメタ情報が含まれます。 参考までに当サイト（http://marubon.info/）にアクセスした場合のHTTPヘッダ（HT

今日は、企業のソーシャルメディアへのかかわり方に関する話題を。国内でも、ソーシャルメディアポリシーやソーシャルメディアガイドラインの策定例が増えてきました。具体例を示しながら、ソーシャルメディアポリシーについて考えてみましょう。 ソーシャルメディアガイドラインの具体例Twitterの流行を受け、本格的にソーシャルメディアポリシーを策定する例が増えてきています。ここでいう「ソーシャルメディア」はTwitterに限ったものではなく、ブログやSNSなども含めた幅広いものです。 現在、国内で公開されているソーシャルメディアポリシー／ガイドラインには、次のようなものがあります。 ADKインタラクティブ ソーシャルメディアポリシー → https://www.adk-i.jp/resources/adki_socialmediapolicy.html IBM ソーシャル・コンピューティングのガイドライ

オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は