正しいfaviconの設定方法を対応ブラウザ別にまとめる | Glatch（グラッチ） – 夫婦で活動するフリーランスWeb制作ユニット
サイト制作で忘れられがちな印象があるfaviconの設定ですが、とっても重要なので正しい書き方で設定しましょう！ <link>でfaviconを指定することがありますが、以下の記述をよく見かけるかと思います。 <link rel="shortcut icon" href="/path/favicon.ico"> rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。 shortcutは非準拠ですので使わないようにしましょう。 古いブラウザに対応する必要がないサイトであれば、rel属性にshortcutは不要ですし、ファビコンの画像もpngやgifが問題なく使用できます。 そこで、どのブラウザまで対応するかによりどう記述すればよいかが変わってくるので、一覧にまとめました。 IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edge
TSUTAYA TVなどの事例からみる、成果を出すためのLPOのプロセス
LPO（ランディングページ最適化）と言うと、情報量が多く派手なLPを作るようなイメージもあるかも知れませんが、今はいかにユーザーの心理を汲み取り、彼らのニーズに合わせた情報を提供できるかという方向にシフトしています。 今回は国内売上No.1のLPOツール「DLPO」を提供するDLPO株式会社の方に同社の具体的な事例を交えつつ、LPOの極意について聞いてみました。 DLPOとは ― まずはDLPOについてお聞きしたいのですが、どのようなツールなのでしょうか？ 「DLPO」はLPOや、もっと広義でいうとCRO（コンバージョンレート最適化）のために、各ユーザーに最適なページを出すことのできるツールです。ページ最適化の手段としてはLPOでの定番とも言える「A/Bテスト」「多変量テスト」に加えて、独自な機能として「パーソナライズ機能」があります。 パーソナライズ機能は、ユーザーの閲覧データや環境デー
アクセス解析を使ってサイトの課題を発見する12のステップ - Real Analytics （リアルアナリティクス）
アクセス解析ツールを導入して数カ月。いまいち使いこなせていないあなたへ。私が初めてサイトを分析する時に行う12のSTEPを紹介いたします。GoogleAnalyticsで全て対応出来るレポートです。ここで紹介するのはアクセス解析業界（？）における標準でもなんでもなく、私なりの分析手法ですので、他にも様々な方法やバリエーションがあります。 ※アクセス解析用語の基本的な知識と、GoogleAnalyticsを使ったことがある（出来ればアドバンスドセグメントを使ったことがある）人向けの方法になります。 2つの事前準備 分析に入る前に、以下の二つの事前準備を行いましょう。 A.サイト全体をじっくり見る サイトマップや主要の導線をたどってみたり、実際にコンバージョンしてみたり。自分なりにサイトの良いところと悪いところを見つけて箇条書きにしておきましょう。また、それが数字にどう反映されるか？を想像して
.htaccess の書き方（設定変更編） - Qiita
.htaccess の書き方（リダイレクト編） .htaccess の書き方（アクセス制御編） .htaccess(Apache) の Order Allow,Deny(またはDeny,Allow)について .htaccess の書き方（スピードアップ編） .htaccess の書き方（設定変更編） オリジナルのエラーページに変更する エラーページを用意して、トップページへの正しいURLへのリンクを貼っておけば エラーページからの離脱が減らせるかもしれません。 書き方には３パターンあります。 # エラーメッセージをカスタマイズするだけ。日本語だと文字化けします。タグ使えます。 ErrorDocument 404 "404 (x_x) page ga arimasen.<br><a href=http://yahoo.co.jp/>yahoo</a>" # ルート相対でファイルを指定。相対パ
2017年に注目されたインターフェイスデザインのトレンドを解説
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを
Web サイトのコンテンツを gzip 圧縮して転送量を減らす方法（.htaccessで設定） - Google Chrome - Project Group
Web サイトのコンテンツを gzip 圧縮して軽量化して通信量を減らします。 ネットワーク環境によってはブラウザに表示されるまでの時間を速くすることが期待できます。 サーバーが対応していれば「mod_deflate」を使用して動的に gzip 圧縮する方法もありますが動的な圧縮処理は少なからずサーバーへの負荷になりますし、 当サイトでは静的なコンテンツが中心なので動的に圧縮してくれる必要はないので .htaccess を使った方法で設定してみることにしました。 今回の方法ではスタイルシート（.css）ファイルやjavascript（.js）ファイルを圧縮します。 ※画像ファイルは 「PNGGauntlet で PNGOUT や OptiPNG をGUIで実行する」 に記載した方法で圧縮できます。 【gzip圧縮ファイルを準備する】 Windows OS は標準では gzip 圧縮には対応
よくJavaScriptで実装されるものをHTML・CSSのみで実装してみた
JavaScriptをあまり使いたくない、使えない。 速度の面やSEOとして、CSSで実装したい。 そんな方のために、JavaScriptで実装されがちなものを、HTML・CSSのみで実装してTipsにしてみました。 IE11〜、iOS Safari 9.2〜、Androidブラウザ4.4〜でだいたい動きます（ベンダープレフィックスが必要な場合も）。 デメリットもあるので、合わせて確認してみてください。 バルーン表示
キャッシュについて整理 - Qiita
キャッシュとは 使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。 - IT用語辞典 Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか（あるいは両方か）意識しておきましょう。 ブラウザのキャッシュ：そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。 キャッシュサーバのキャッシュ：不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。 キャッシュの制御方法 ✏️ HTTPレスポンスヘッダ で制御 ➡️ Cache
フェレットプラス（FerretPLUS）｜Webマーケティングポータルサイト
「買うか買わないか」か「どれを買うか」へ進める。ECサイトに新たなお買い物体験をもたらす新サービスとは
SNSと検索の最適化を目指してWordPressで記事タイトルを投稿後一定期間で自動的に変わるようにしてみた
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 今回は、メモメモ以外で運営しているブログクリエイティブモグモグの投稿画面を少しカスタマイズしたので備忘録としてメモしておきます。 今回のカスタマイズは「記事タイトルを投稿一定期間過ぎたら自動的に変更する」というものです。 なんでこんなことをしたのか？そこも含めて説明させてください。早速いってみましょうどうぞ!! なぜタイトルを変えたいのか なぜこのようなカスタマイズをしたいのかというと、モグモグの美味しいお店紹介の記事を書いていて、SNSに最適な記事タイトルと検索に最適な記事タイトルって違うよなーと感じたからです。 具体的な例を出して、説明しましょう。 前提として、僕のブログの更新スタイルは、記事を書いた後にTwitterやFacebookで通知をして
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
WordPress：画像にキャプションを設定した時に書き出されるHTMLを変更
アップロードした画像にキャプションを設定した際、標準の状態で書き出されるHTMLの出力形式では使い勝手があまりよくないので、この書き出されるHTMLをWordPressのコアファイルをいじらずに変更します。 標準の状態では、画像にキャプションを設定した時は下記のようなHTMLが書き出されます。 <div id="attachment_14" class="wp-caption alignnone" style="width: ○○○px"> <img class="size-medium wp-image-14" alt="○○○" src="○○○.jpg" width="○○○" height="○○○" /> <p class="wp-caption-text">キャプションの内容</p> </div> ここで注意しておく点は、<div>タグに自動的に付与される「style="wid
WordPressのoEmbed埋め込み機能とその注意点（Basic認証が出ちゃうなど） | briccolog
WordPressのoEmbed埋め込み機能とは WordPressでは、バージョン4.4から標準で「oEmbed埋め込み機能」が搭載されました。これにより、記事の投稿欄にURLを記述するだけで、そのURLのページ概要がカード式に表示されるようになりました。 WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」 試しに、以下に当ブログの別記事のURLを記述してみます↓ 4大SNS（Facebook, Twitter, Instagram, LINE）の日本における利用状況《2016年10月現在》 ・・・いかがでしょう？アイキャッチ画像、見出し、本文の一部などが体裁よく表示されています。 こちらの機能、あらゆるURLに対応しているというわけではなく、記述した先のURLのページのhead要素の中で以下のlink要素が設定されている場合に有効となるようで
Facebookログイン機能をWEBサイトにSDK等使わないで実装の流れ - Qiita
Facebookログイン機能をWEBサイトに実装する際、SDK等を使わない方法で考えてみる。 現在、日本語で公式ドキュメント「ログインフローを手作業で構築する」が存在するので、まずはそちらを見た方が良いかも。操作方法などは数ヶ月単位で時々変わっている。以前は設定画面も英語だけだったが、日本語化されている。 ※ 実際、もうこの内容は古くなっていた(2017/10/11)。数ヶ月おきに画面デザインや項目の位置が刷新されているようだ。英語だったのが日本語化されていたり、項目が別の位置に移動していたりで大幅には変わっていない気がする。でも、Facebook API アップデートと付き合う話にあるように、大幅にアップデートされていないか時々確認が必要。 主に参考にしたサイトは Add Facebook Login to Your App or Website facebook OAuth + PHP
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？ 私が
記事タイトルに「PR」って入れるかどうか問題について - ヨッピーのブログ
FBで昨日からケンケンガクガクの議論があったので、 ちょうど良い機会だし観測気球的に色んな人の意見を聞きたいなと思っているのでこのエントリを書きました。 広告まわりの話なので「興味ねーぞ！」って人は読まなくても良いと思います。 【発端】 宮脇 淳 - ヨッピーさんの衣装が謎すぎるけど、スポンサードコンテンツやネイティヴ広告に関する理解が進む良記事でした。... | Facebook ↑のリンク先が舞台ではあるのですが、死ぬほど長いし登場人物が何人かいるので、僕とおおつねまさふみさんのやりとりにフォーカスしておきます。 「タイトルにPRって入れるかどうか問題」については僕が以前にBuzzFeedのインタビューで話した事が僕のスタンスであります。 www.buzzfeed.com そもそも論として、PR表記をどうして入れなきゃいけないかというと、優良誤認を防ぐためでしょう。お金もらって宣伝して
ASCII.jp：ついにブラウザー対応が始まったCSS Grid Layoutで要素を並び替える方法
Firefox 52、Chrome 57でついに正式サポートされた、CSS Grid Layout Module（CSSグリッドレイアウトモジュール）。便利だけどちょっと難しい、CSSグリッドを使ったレイアウトの操作方法を解説。 この記事では、CSSグリッドレイアウトを使って要素（Grid Item）を任意の順番に配置する方法を説明します。そのあと、グリッドで複数の要素の位置を揃える方法を解説します。 過去にもグリッド関係の重要なトピックを掲載しました。最初に『2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方』でグリッドレイアウトで要素を配置するいろいろな方法を、次のステップとして自動で各要素を配置するグリッド自動配置アルゴリズムについてを『徹底検証！CSS Grid Layout Moduleの自動配置アルゴリズムはどう働くか？』で説明しました
Windows Vista と IE9 のサポート終了 （2017年4月11日） まで 10 日を切った件
Windows Vista の延長サポート期間が 2017年 4月 11日で終了することに伴い、Windows Vista 上でのみサポート対象となっていた IE9 についてもサポート対象から外れることで、IE11 が利用可能な唯一の IE バージョンとなります。 2016年1月12日 （米国時間） から適用された新しい、Internet Explorer （以下、IE） のサポートポリシーに伴い、「サポート期間中の各 Windows OS にインストール可能な IE のうち、最新版以外のバージョンの IE」 のみがサポート対象になっています。 これを現時点でサポート期間中の Windows に照らし合わせると、Windows 7 以降の Windows は、すべて IE11 のみがサポートされるブラウザになるのですが、唯一、2017年 4月 11日まで延長サポート期間が残っている Win
スマートフォンサイトの開閉するメニューとアクセシビリティ
今週はスマートフォンサイトの実装を行いました。その中で、スマートフォンサイトではよく見られる、ボタンを押すとメニューが開閉する仕組みの実装がありました。実装後にiOSのVoiceOverを利用して動作を確かめたのですが、他のサイトを見ると上手く開閉することが出来ないメニューボタンがいくつか見つかりました。どのような問題が見られたか等をまとめてみたいと思います。 上手く開閉できないボタンの例 いずれもVoiceOverをオンにして操作した場合の問題です。VoiceOverがオフの場合は、問題なく操作できました。 なお、会社名・サイト名を上げていますが、上手く動作しなかったことを伝えたいだけで、他意はありませんので念のため。 1. JavaScriptの不具合？ ※追記（2014年12月15日）：再度確認したところ、問題なく動作するようでした。 味の素様のウェブサイトにあるメニューの開閉ボタン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
@webbingstudio@githubのマイページ - Qiita
