GA4への移行。Google タグ(gtag.js)とGoogle タグ マネージャーの違いって? アナリティクスの計測はどちらでもOK。 2022.09.26 井川 宜久 Google タグ(gtag.js)とGoogle タグ マネージャー。 Google タグとGoogle タグ マネージャーとの違いがよくわからない。 よくわかってはいないが、とりあえずUA(従来のユニバーサル アナリティクス)からGoogle アナリティクス 4(GA4)へ移行し、下記のようなGoogle タグをhead内へ記述することで、計測はできている。 複数のサ... memosSEOWebデザインアナリティクス
アイキャッチ画像(WordPressのサムネイル画像)がない場合、いらない場合は、これで解決。 2022.09.23 井川 宜久 アイキャッチ画像(サムネイル画像)が設定されていないときにできる空白をなくしたい。 アイキャッチ画像、サムネイル画像がないとき。 ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。 だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなってしまう。 代わりの画像を用意し... memosPHPWebデザインWordPress
さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。 2022.09.19 井川 宜久 さくらからさくらへ。WordPressではないサイトの引越し。 他社で取得しているドメインのサイトを、さくらのスタンダードプランのサーバーからビジネスプランのサーバーへ移行することとなった。案の定、一筋縄にはいかなかった。 あらかじめ手続き方法をヘルプページやネット上で探すが、さくら-さくら間の引越し方法がよくわからなかった。何度かカスタマーセンターとのやりとりをし、最終的に電... memosWebデザインWordPress
第三者コードの影響を抑えてください?の対応と、preconnect。 2022.09.16 井川 宜久 第三者コードの影響を抑えてください!? PageSpeed Insightsの悪化。 どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。 PageSpeed Insightsをチェックしていたところ、「第三者コードの影響を抑えてください」との表示が... HTMLmemosPageSpeed InsightsWebデザイン
さくらインターネットのコンテンツブーストの設定方法。(数ステップで。) 2022.09.15 井川 宜久 さくらインターネットでWordPressを使う場合の問題点。 さくらインターネットでWordPressを使用する場合、残念ながら速度が遅い。サーバーを移転すれば解決するのだが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題だ。 例えば当サイトはデザインのポートフォリオサイトなので、そもそも画像が多い。画像が多いとサイトの読み込み速度に影響するが、すでにWeb... memosWebデザインWordPress
iPhone 14-15の解像度と、画像サイズ、CSSのピクセル設定をどうするか? 2022.09.12 井川 宜久 iPhoneの解像度とは? デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない!? 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると... CSSHTMLiPhonememosWebデザイン
CSSのobject-fitの使い方。トリミングやサイズの実装例。 2022.09.08 井川 宜久 CSSのobject-fitプロパティでできること。 object-fitでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fit ... CSSmemosWebデザイン
backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。) 2022.09.06 井川 宜久 CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ... CSSmemosWebデザイン
Dark Readerのインストールと使い方。(PC & スマホ)ダークモードで目を大切に。 2022.09.05 井川 宜久 ダークモードでパソコンやスマホを。Dark Readerのインストール手順。 Dark Readerのダークモードについて。 ダークモードで。 パソコンやスマホで長時間ブラウザを見ているときに、目の負担を軽減する「Dark Reader」を使ってダークモードにすると楽になる。 以前はダークモードがなかったので、個人的に、目を悪くした原因となってしまった。 光か... memosオンラインツール
Webデザインを独学で学ぶのなら。Webデザインで行き詰まったのなら。【ちょっと客観的に】 2022.09.03 井川 宜久 そもそも独学で可能なのか? 年齢による見極めが重要。 Webデザインを独学で学ぶことは可能だ。ただし、自分の年齢は考慮すべきである。 大前提として、ここの見極めをしなければならない。家族を養う立ち位置にいる人ならば、最重要の確認事項だ。 一部で溢れているような甘い情報に振り回されては危険なのだ。 中途採用のWebデザイナー、コーダーたち... JavaScriptjQuerymemosWebデザイン
マズローの欲求5段階説と、実社会とSNSと、Webデザイナーの報酬と。 2022.09.02 井川 宜久 マズローの欲求5段階説と、「志を高く持とう」や「意識高い系」。 実社会でもSNSでも制作の現場でも、「志を高く持とう」とか「意識高い系」とか、重いのか軽いのかどっちかよくわからない用途で言葉が使われていたりする。 こうして活字で見比べると、前者の意味は重くも清くも、また後者はただの揶揄だったりもする。 栄養補給、体力回復には、お金と家、部屋が必要。 しっかり飯を食え... memosWebデザイン脳
肖像権と著作権。ネットにあるのはタダじゃないの? 2022.09.01 井川 宜久 ざっくりと言うなら、肖像権とは写真に写っている人の権利。 例えば写真に写った人の場合。 何気なく撮った写真の背景などに顔が特定できる第三者が映り込んでいたという場合がある。 その写真をネット上に公開する際は、その第三者の方が一般人でも許可を得なければならない。 また、著名人などの写真がネット上にあったからといって、その写真を無断で使用することもできな... memosWebデザイン
CSS filterで色変更。色相・彩度・明度? filterプロパティでできること。 2022.08.28 井川 宜久 CSS filterプロパティでできること。 CSSのfilterの種類。 filterプロパティの関数は代表的なもので10種類ほど。かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 色の三属性やぼかし、シャドウなども。 filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、... CSSmemosWebデザイン
WordPressで動画が再生されない!ときの対処。 2022.08.25 井川 宜久 WordPressで動画を埋め込みたい。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[ /video ]のショートコードが記... HTMLmemosWebデザインWordPress
iPhoneの解像度一覧(iPhone8〜13まで)と、CSSブレイクポイントの目安は? 2022.08.22 井川 宜久 iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか? 「拡大表示」の機能はiPho... CSSiPhonememosWebデザイン
スライダーがうまく動かない時の対応。(jQueryはbodyの閉じタグの前じゃない。) 2022.08.20 井川 宜久 スライダーのカスタムを頑張れば頑張るほど、動きがカクカクする。 jQueryの読み込みの場所。 bodyの閉じタグ前じゃなくてもいい。 スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。 そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良いかもしれない。 jQuery本体はhead内... JavaScriptjQuerymemosWebデザイン
Webデザインは職業訓練校(ハロートレーニング)かスクールか。迷った場合はどっち。 2022.08.18 井川 宜久 職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので(もちろん良い情報もあるが。)、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10... CSSHTMLjQuerymemosPHPWebデザインWordPressデザイン
WordPressの投稿とカスタム投稿を振り分けたい時はこれで解決。(条件分岐できない時の対処方法。) 2022.08.17 井川 宜久 投稿とカスタム投稿タイプ。 is archiveの仕様。 WordPressでテーマを作っている時、デザインを分けるためなどで、デフォルトの「投稿」と「カスタム投稿タイプ」を条件分岐したい時がある。 (例えばアーカイブページやシングルページなどのヘッダー画像や、見出し部分、文章など。) ところが、投稿、カスカム投稿タイプに共通する「is_archive()」... memosPHPWebデザインWordPress
辿ったリンクは期限が切れています!? WordPressテーマのアップロードエラー対処。 2022.08.15 井川 宜久 辿ったリンクは期限が切れています? テーマのアップロード。 WordPress管理画面からテーマをアップロードしようとすると、「辿ったリンクは期限が切れています。もう一度お試しください。」というエラーが出ることがある。 単にこのメッセージからでは、原因がなかなか想定しにくい。 WordPressサイトだったので、まずWordPressの原因を疑ってみたが、そうではな... memosPHPWebデザインWordPress
Macの寿命を伸ばすためにやってみていることと、過去の検証。 2022.08.12 井川 宜久 Macの寿命は4年? ネット上で調べてみると、Macの寿命(使用年数)は4年という情報が出てくる。公式サイトに記載されている、という理由からだ。 Appleサイトの質問回答ページに、「Appleは、Apple製品の温室効果ガスのライフサイクル評価をどのように行っていますか。」という項目で記載がある。 参考:環境 - よくある質問 - Apple(日本) ちょっと長く... iPadMacmemosWebデザイン