パソコンと目とVDT症候群。ブルーライトとダークモードの目への影響。 パソコンからの、目と健康管理。VDT症候群。 自分が職業訓練校で講師をしていた頃、カリキュラムの最初の段階で必ず「VDT症候群」についての内容があった。 VDT症候群とは、「Visual Display Terminal Syndrome（ビジュアル・ディスプレイ・ターミナル・シンドローム）」の略で、要...

アナリティクスへログインし、画面左下の「管理」をクリック。 「管理」の画面に切り替わる。 ここの、画面右に「ビューを作成」の項目があるので、その中から「フィルタ」を選択する。 すると、「ビューを作成」の画面が表示される。 「ビューを作成」画面で、「フィルタを追加」ボタンをクリック。 「ビューを作成」の画面に切り替わる。 ここに、「フィルタを追加」...

CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。 実はスマホ以前の書き方。 実はこれは10年以上前の指定方法で、スマホが普及する以前の、主にデスクトップ...

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

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

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

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

さくらインターネットでWordPressを使う場合の問題点。 WordPressの速度が遅い。 速度だけでなく、ムラが多い。 さくらインターネットの共用サーバーでWordPressを使用する場合、残念ながら速度が遅い。 サーバーを移転すれば解決するが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題。 例えば当サイトはもともとデザインのポート...

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

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

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

ダークモードでパソコンやスマホを。Dark Readerのインストール手順。 Dark Readerのダークモードについて。 ダークモードで。 パソコンやスマホで長時間ブラウザを見ているときに、目の負担を軽減する「Dark Reader」を使ってダークモードにすると楽になる。 以前はダークモードがなかったので、個人的にも目を悪くした原因となってしまった。 光か...

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

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

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

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

WordPressで動画を埋め込みたい。 WordPressで動画再生。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[...

iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか？ 「拡大表示」の機能はiPho...

スライダーのカスタムを頑張れば頑張るほど、動きがカクカクする。 jQueryの読み込みの場所。 bodyの閉じタグ前じゃなくてもいい。 スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。 そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良いかもしれない。 jQuery本体はhead内...

職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので（もちろん良い情報もあるが。）、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10...