WordPressのリニューアルとSSL化を同時に実施する際のURL設計とリダイレクト：運営堂サイトリニューアル (3)
運営堂さんのサイトリニューアルを振り返るシリーズ、3つ目は「URL設計とリダイレクト」です。運営堂さんのサイトは有効な記事数が2200ページ。リニューアルに合わせてURLの変更もするし、同時にSSL化も実施します。ここでしくじると、コツコツと積み上げてきたページの評価は暴落…。森野さんから白い目で見られ、私にとっても死活問題になりかねません…！ というのは半分冗談ですが、起こってしまうと笑えないのは確かです。そうならないために実施した、URL設計とリダイレクトについてまとめたいと思います。 URL設計の方針と課題 URL設計の方針 運営堂さんのサイトは初期構築からだいぶ月日が経っていて、長年の運用の中でURLが日本語になっていたり、URLの構造がコンテンツと一致していない部分が多くありました。リニューアルの目的の一つに常時SSL化もあるので、結局全てのURLが変更になります。URL構造を再
ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方
今回お届けするのは、「localStorage（ローカルストレージ）」について。 HTML5から導入されたAPI、Web Storageの一種で、その仕組みはcookieによく似ています。 Web Storageと一体どのような違いがあるのか、今回はその概要と使い方を見ていきましょう。 ブラウザにデータを保有してどうするの？ cookieもWeb Storageもクライアント側（ブラウザ）にデータを保有する機能ですが、なぜそのような仕組みが登場したのでしょうか？ その答えは、HTTPが「ステートレスな（=状態をもたない）プロトコル」であることに関連しています。少しだけおさらいしてみましょう。 HTTP通信は「リクエストを投げる→レスポンスを返す」の一往復のやりとりで完結します。 全通信のひとつひとつが全く別のリクエストとして扱われるため、例えば再訪問かどうかを判断することは不可能で、同じク
計測できなかったフォーム遷移をGoogleタグマネージャ（GTM）で計測する方法 | SNBI - アクセス解析/マーケティングを中心に生きた知識をお届け
フォームの入力画面の到達状況や、フォームの各ステップ毎の到達状況や遷移率などを測ることで、「どのステップでユーザーが離脱しているか」を把握することがフォーム分析の第一歩になります。 ですが、入力画面・確認画面とURLが変わらないフォームがよくあります。 その場合、計測タグはURL別でアクセス数を計測するため、入力画面から確認画面に遷移しても2度同じページにアクセスしたことになってしまいフォームの各ステップ毎の到達状況や遷移率などを測ることができません。 今回は、Googleタグマネージャを利用しているフォームでの”仮想ページビュー”という技術を利用して、通常ではブラックボックスになってしまっていたフォームの各ステップ毎の計測を明らかにする方法をご紹介します。
カスタム投稿タイプやカテゴリーアーカイブのパーマリンクをゴリゴリいじる – 運営堂サイト裏話(3)
運営堂さんサイトリニューアルにあたって苦労したところを書き残しておくシリーズの3つ目です。 正直、今回一番苦労したのがこれです。 今回の要件定義で、URL構造も細かく指定がありました。 例えば、ブログならこんな感じ。 ブログトップ https://www.uneidou.com/blog/ カテゴリーアーカイブ https://www.uneidou.com/blog/renewal/ ブログ記事 https://www.uneidou.com/17718.php もうひとつのメインコンテンツである「ズバッと解決！GoogleAnalytics」はこんな感じ。 カスタム投稿タイプアーカイブ https://www.uneidou.com/ga-solution/ カスタムタクソノミーアーカイブ https://www.uneidou.com/ga-solution/words/ 個別記事
GTMでGoogleアナリティクスのアクセス時間を計測しよう
Googleアナリティクスでカスタマー（ユーザー）一人ひとりの行動を分析（＝カスタマーアナリティクス）するためには、GoogleアナリティクスのカスタムディメンションにClient IDとタイムスタンプを格納しておき、ヒット単位のデータをGAから取り出して時系列で並べて処理・集計する必要があります。 GTMでGoogleアナリティクスのカスタムディメンションにClient IDをセットする方法については、前回の記事で紹介しました。今回は、さらにGTMでアクセス時間（タイムスタンプ）をセットする方法について紹介します。 なぜタイムスタンプもカスタムディメンションに入れるのか？Googleアナリティクスに標準装備されている「日付」(ga:date)、「時間」(ga:hour)、「分」(ga:minute)のディメンションを取り出して結合させることもできますが、 秒単位が無い APIで一度に取り
CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 - Design Color
ブラー（ぼかし）エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです！この「ぼかす」表現を「ブラー（blur）エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの？」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします！ なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜！ CS
コーディング初心者こそ知っておきたい便利な「CSS関数」5選
HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog