デザイナー、コーチ、ディレクター / いがわ

.

Memos

Google Tag Managerの設置場所は一体どこにすれば良いの?

Google Tag Manager(GTM)とは? Google Tag Managerとは、UA(ユニバーサル アナリティクス)に変わるアナリティクス(分析)ツールで、「サイトへのアクセス状態」がわかるもの。 Google Tag Manager Googleアカウントさえあれば、無料で利用が可能。 導入自体は比較的簡単にできる。ネット上にも情報が多い。 企業...

「データベース接続確立エラー」の対処。wp-configに問題がないとき。

「データベース確立エラー」が出たときの復活方法。

データベース接続確立エラーの対処。 このエラーが出ると画面が真っ白(ダークモードの場合は真っ黒)となり、WordPressの管理画面へも入れなくなるので、初めてのときはあたふたしまう。 焦ってしまうが、もし、WordPressのインストール時や引越しの際にこのエラーが出る場合は、wp-config.phpのファイルに誤りがあることが多い。 管理画面へは入れなくても...

GA4のページビュー数(PV数)は、page_viewとは違う?

アナリティクス GA4とUAのPV数。

GA4のpage_viewと、表示回数と、UAのページビュー数と。 ※2024.01.11 追記あり。   GA4のPV数はどこにある? UA→GAから移行中のため、2022年12月現在は両方のアナリティクスで指標が見られる状態となっている。 とりあえず両方での「ユーザー数」はほとんど同じだ。(期間が若干違うため一致はしていない。) ただし、「ページビュ...

WordPressの投稿IDを確認したい時は、ここを見るのが簡単。

WordPressの投稿IDを確認したい時。

投稿IDで条件分岐したいとき。 WordPressサイトを構築・運用する際に、投稿IDを知りたいときがある。特定の記事でのみでJavaScriptやGoogle Fontsを読み込みたい場合などに。 普通にheader.phpなどで読み込むと、全ての投稿記事に適用されてしまう。そうなるとページの表示速度にも影響してしまうので、できれば条件分岐をしたい。 その場合、条件分岐...

オンラインで動画を圧縮する、「オンラインでビデオを圧縮」。

オンラインで動画を圧縮する、「オンラインでビデオを圧縮」。

オンラインでビデオを圧縮。Compress Video Online。 動画は1枚1枚の画像のコマ送り。そのためどうしても容量が重たくなる。かと言って圧縮のためだけに動画編集ソフトを立ち上げるのもこれもまた気が重たい。 そこで重宝するのが、オンライン圧縮サイト「Compress Video Online / オンラインでビデオを圧縮」。 インストールの必要も、アカウント登...

写真の一部を消せるオンラインツール「Cleanup Pictures」。

写真の一部を消すオンラインツール、Cleanup Pictures。

写真に映り込んだ不要な箇所を消したい。 Photoshopのように。 Cleanup Picturesで消していく。 写真の一部を消したいときに、なぞって消すことができるオンラインツール。 まるで、Photoshopの「修復ブラシ」や「コンテンツに応じた〜」のように。 Cleanup Pictures。 消したい写真をアップロード。 真ん中の点線で...

detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い...

Material Symbols and Iconsの使い方。表示されないときの対処法。

Googleのアイコン。Material Symbols and Iconsの使い方。

Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる...

CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを!

CSSブレンドモード。Photoshopのような乗算をmix-blend-modeで。

CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode(ブレンドモード)」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m...

counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。

CSSで連番。counter-incrementの使い方。

CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って...

CSS フォントサイズはどうする? remの基本かつ効果的な使い方。

CSS フォントの単位はpx? %? em? rem?

remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確...

Chromeデベロッパーツールでスマホ表示チェックする際の注意点。

Chrome デベロッパーツールでスマホ表示確認時の注意点。

デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット。 Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。) Windows: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。) ...

ウイルス・マルウェアチェックサイト。オンラインかつ無料利用可。

オンラインで無料、ウィルスチェックサイト。

ファイルやサイトのウイルスをチェック、「VirusTotal」。 VirusTotal オンラインかつ無料で、ウイルスやマルウェアをチェックしてくれるサイトがある。 いずれも英語だが、URLのコピペやファイルのアップロードだけでチェックしてくれるので、ブラウザの翻訳機能を利用すればほとんど苦にならない。 VirusTotal by Google Wik...

PageSpeed Insightsでサイト読み込みの改善。増えた4項目。

サイトの読み込み速度を測る、PageSpeed Insights。

PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の3つがある。これらはSEOに重視...

line-clampの使い方。CSSで複数行指定。効かないときは?

CSS line-clampが効かないときに確認すべきこと。

CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは2行、PCは3行などと簡単に振り分けができる。 li...

CSSの@whenと@else。新しいブレイクポイントの設定方法?

CSSの新しいブレイクポイント設定。

@whenと@elseは普及するだろうか? CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト:CSS Conditional Rules Module Level 5 @whe...

text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。

CSS text-shadowで影がうまくいかない場合は、drop-shadowで代用可能。

text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ...