デザイナー、コーチ、ディレクター / 井川

.

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

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

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

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

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

iPhone 解像度と画面サイズ、CSSピクセル設定について。

iPhoneの解像度とは? デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない!? 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来し...

CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。

CSSマーカー。コピペで使えるグラデーション・アニメーション。

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

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

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

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

Dark Readerのインストールと使い方。(PC & スマホ)ダークモードで目を大切に。

ダークモードの設定。パソコンとスマホのDark Reader。

ダークモードでパソコンやスマホを。Dark Readerのインストール手順。 パソコンやスマホでWebサイトを見ているときに、目の負担を軽減する「Dark Reader」を使ってダークモードにするととても楽になる。 以前はダークモードがなかったので、個人的に、目を悪くした原因となってしまった。 強い日差しからサングラスで目を守るときのように、これからパソコン作業に関わって...

Figmaがダークモードに対応。背景色設定も簡単、目に優しい!

Figma(フィグマ)がダークモードに対応。背景色設定も簡単。

Figmaがダークモードに対応。 無料プランでも十分に使えるデザインツール「Figma」がついにダークモードに対応している。 以前からブラウザ版では拡張機能の「Dark Reader」で対応できていたが、インストール版でもダークモードでデザインができるようになった。 [affiliate] ※後日追記) petsブラウザ版も同じ手順でダークモー...

Webデザインを独学で学ぶのなら。Webデザインで行き詰まったのなら。【ちょっと客観的に】

Webデザインを独学で。

そもそも独学で可能なのか? 年齢による見極めが重要。 Webデザインを独学で学ぶことは可能だ。ただし、自分の年齢は考慮すべきである。 大前提として、ここの見極めをしなければならない。家族を養う立ち位置にいる人ならば、最重要の確認事項だ。 一部で溢れているような甘い情報に振り回されては危険なのだ。 中途採用のWebデザイナー、コーダーたち...

マズローの欲求5段階説と、実社会とSNSと、Webデザイナーの報酬と。

マズローの欲求5段階説と、実社会とSNSと、Webデザイナーの報酬と。

マズローの欲求5段階説と、「志を高く持とう」や「意識高い系」。 実社会でもSNSでも制作の現場でも、「志を高く持とう」とか「意識高い系」とか、重いのか軽いのかどっちかよくわからない用途で言葉が使われていたりする。 こうして活字で見比べると、前者の意味は重くも清くも、また後者はただの揶揄だったりもする。 栄養補給、体力回復には、お金と家、部屋が必要。 しっかり飯を食え...

肖像権と著作権。ネットにあるのはタダじゃないの?

著作権と肖像権は大切な権利。

ざっくりと言うなら、肖像権とは写真に写っている人の権利。 例えば写真に写った人の場合。 何気なく撮った写真の背景などに顔が特定できる第三者が映り込んでいたという場合がある。 その写真をネット上に公開する際は、その第三者の方が一般人でも許可を得なければならない。 また、著名人などの写真がネット上にあったからといって、その写真を無断で使用することもできな...

CSS filterで色変更。色相・彩度・明度? filterプロパティでできること。

CSS filterの使い方。効かないときの対応。

CSS filterプロパティでできること。 CSSのfilterの種類。 filterプロパティの関数は代表的なもので10種類ほど。かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 色の三属性やぼかし、シャドウなども。 filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、...

スマホを落とさない、無くさない、忘れないためにっ!

スマホを落とさないように。

スマホを落とした時のリスク。 スマホの画面が割れる。 スマホの画面は液晶や有機ELが採用されているが、表面はあくまでもガラスであることが多い。なので当然、硬い地面に落としたら割れてしまう。 一旦割れてしまうと自分では修理できないので、業者に修理に出すか、もしタッチパネルが無事であればそのまま使ったりする。しかし修理代はバカにならないし、割れたまま使うのは見た目が気...

脳のエネルギーは、酸素とブドウ糖。それでダメなら睡眠を。

砂糖よりもブドウ糖を。

脳のエネルギーは、酸素とブドウ糖。 身体が疲れているときや、汗をかいたとき。 スポーツや肉体労働時、また夏場では汗を書くことが多いので、よく「水分と塩分補給をしましょう。」と言われる。そして水やお茶、スポーツドリンクなどで補給をする。 ただし、忘れてはならないのは、「糖分」、特に「ブドウ糖」だ。 ブドウ糖(グルコース)はスポーツドリンク、ポカリスエットやアク...