検証第1回では、外部スクリプト(SNSボタンとGoogle AdSense)がDOMContentsLoadedとLoad時間に与える影響を調べましたが、第2回の今回はPageSpeed Insightsの影響を調べます。 実験3. 外部スクリプトによる各指標の変化 とある記事において以下の2つの状…続きを読む
SNSボタンとAdSenseが表示スピードにだいぶ悪い影響を与えている事は知っているのですが、急にそれがどれ程なのかが気になったので実験しました。 まぁ運営観点上、この2つを外すという選択はとれないのですが。純粋に知的好奇心によるものです。 今回は、DOMContentLoadedとLoad時間の影…続きを読む
PCブラウザ版Twitterのサイドカラムの挙動を実装します。 下方向にスクロールする時は、 上方向にスクロールする時は、 その間の場合は、 2020年3月時点のUIです。将来挙動は変わるかもしれません。 仕様はこうです。 下方スクロール時は、下端がFixedするまで下方スクロール 上方スクロール時…続きを読む
弊サイト、記事の最後に「関連するかもしれない記事」というコーナーがあるのですが(まぁどのブログもだいたいあるわな)、ここで表示する記事数を増やしてみました。6記事から9記事に。 こういうやつ↓ そしたら1セッションあたりの平均PVが増えるのかなと思ってやったのですが…。 何とも言えない結果になりまし…続きを読む
モーダルウインドウが開いた際に裏のページが上下してしまう問題、CSSだけで固定できないかと試行錯誤したのですが、iOSのSafariでどうしても挙動が安定しなかったので、とうとうJavaScriptで実装することにしました。ちょっと悔しい。 基本的な考え方 背景が固定された状態(position :…続きを読む
先日、とあるデジタル系企業のウェブサイトをスマホで見ていると、図版(画像ファイル)中に書かれた文字があまりに小さく読めないレベルだったので、頭に来たことがあった。 「別に目くじらを立てる程のことでは…」と思われそうな気もするが、その図版がどう見ても「パワポのスクリーンショットです」というレベルとは一…続きを読む
タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。 CSSで文字コードを指定する XXXXX:before { content:’\E89E’; font-family: “Ma…続きを読む
このブログ、Google Analyticsによると1セッションあたりの平均PVが スマホで1.23 PC・タブレットで1.29 とのことで、世の中のブログの平均がどうなのか知らんが、なんか低い気がする。 低いとすれば、たぶん記事のカテゴリーがバラバラすぎるのが理由だと思われる。一応自分のライフログ…続きを読む
発作的に自分のサイト構造を見直しているのですが、ふとよく見る「前の記事へ」「次の記事へ」のリンクって必要なのか?と思いました。 そういえば最近のオシャレなブログではこんなエリアは無いような気がします。気がしてるだけかもしれませんが。 いわゆるこういうやつです。 こういうリンクが効果を発揮するのは、ブ…続きを読む
1年ぶりくらいにコーディングしてみまして、なんだかんだで使いたくなる上下左右センタリング。昔はネガティブマージンとか使ってせっせとやってたのですが、最近調べてみると画期的に省エネな方法がありました。毎回検索するのも面倒なので自分用の備忘録として残します。 こんな感じにマークアップしているとします。 …続きを読む
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメー…続きを読む
久しぶりのサイト制作ネタです。 ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。 だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いことも…続きを読む