メモの検索結果です。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memos

GA4への移行。Google タグ(gtag.js)とGoogle タグ マネージャーの違いって? アナリティクスの計測はどちらでもOK。

Google タグ(gtag.js)とGoogle タグ マネージャー。アナリティクス。

Google タグ(gtag.js)とGoogle タグ マネージャー。 Google タグとGoogle タグ マネージャーとの違いがよくわからない。 よくわかってはいないが、とりあえずUA(従来のユニバーサル アナリティクス)からGoogle アナリティクス 4(GA4)へ移行し、下記のようなGoogle タグをhead内へ記述することで、計測はできている。 複数のサ...

ポイントアプリ「Miles」は、運動や移動でポイントを貯められる。

Miles 散歩。

Milesとは? Miles(マイルズ)とは、歩いたり走ったりして移動した分だけマイル(=ポイント)が貯まるスマホアプリ。1マイルにつき1ポイントが貰える。 利用は無料で、近年のウォーキングやランニングなどの運動ブームとの相性が良く、また低賃金や物価高に伴う「ポイ活」の一種にもなる。 貯まったマイルは、その分の特典や景品、抽選、ギフトカードなどと交換できる。また、生活に余...

アイキャッチ画像(WordPressのサムネイル画像)がない場合、いらない場合は、これで解決。

アイキャッチ(サムネイル)

アイキャッチ画像(サムネイル画像)が設定されていないときにできる空白をなくしたい。 ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。 だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなってしまう。 そのようなことにならないために、あらかじめアイキャッチがない場合の代替と...

さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。

さくらインターネットの引越し。

さくらからさくらへ。WordPressではないサイトの引越し。 他社で取得しているドメインのサイトを、さくらのスタンダードプランのサーバーからビジネスプランのサーバーへ移行することとなった。案の定、一筋縄にはいかなかった。 あらかじめ手続き方法をヘルプページやネット上で探すが、さくら-さくら間の引越し方法がよくわからなかった。何度かカスタマーセンターとのやりとりをし、最終的に電...

「第三者コードの影響を抑えてください」と、preconnect。

第三者コードの影響を抑えてください。

「第三者コードの影響を抑えてください」 どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。 PageSpeed Insightsをチェックしていたところ、「第三者コードの影響を抑えてください」との表示が出ていた。 1番目と2番目にGoogl...

さくらインターネットのコンテンツブーストの設定方法。(数ステップで。)

さくらインターネットのコンテンツブースト。

さくらインターネットでWordPressを使う場合の問題点。 さくらインターネットでWordPressを使用する場合、残念ながら速度が遅い。サーバーを移転すれば解決するのだが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題だ。 例えば当サイトはデザインのポートフォリオサイトなので、そもそも画像が多い。画像が多いとサイトの読み込み速度に影響するが、すでにWeb...

iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

iPhone 14の解像度は? デバイスの解像度と、画像サイズと、CSSの解像度。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的だ。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると思われるが、今でも写真の解像度を調べると普通は7...

object-fitで画像に統一感を。CSSだけでトリミングやサイズを調整。

object-fitでトリミングやサイズ調整を。

object-fitプロパティでできること。 coverでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fitプロパテ...

CSSとJS。使い勝手の良いグラデーション・マーカー・アニメーション。

マーカーでWebサイトにアクセントを。

CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、3ステップでOK。 CSSで、マーカーの見た目と動きを作成。(class名「highlight」) JavaScriptで、スクロー...

backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。)

CSSの背景画像を確認しよう。

CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。 デザイン的にシンメトリーとならないのでなんとかした...