WebデザインやDTP、AIなどについてのメモです。 / いがわ

いがわ.

Memos

サイトが高速化？.htaccessをチェック。キャッシュ指定は要注意。

サイトの.htaccessファイルが間違っているかも。 サイトが重たいときやSEO対策をしたいとき、.htaccessで対策することが度々ある。 そのような場合、あちこちとサイトを検索して、コードを拝借して利用していることもあるだろう。 ありがたいことに、ネット上には色々とコピペOKなコードが提供されている。 ただし肝心のコピー元や自分自身のアレンジが間違っていた場...

gapの使い方。対応ブラウザとflexboxでレスポンシブ。

gapとは？ CSS gapプロパティ。 gapという選択肢。 divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 対応ブラウザ。 すでにモダンブラウザはgapに対応している。 参考： gap" |...

ODAN（オーダン）の使い方。商用利用と利用規約。

O-DAN（オーダン） 商用利用可能なフリー写真や画像を世界から横断。 商用利用可。著作権フリー。 UnsplashやPixabayを横断検索。 ここ数年すっかりお世話になっている、商用利用可かつ著作権フリーな写真・画像の検索サイトO-DAN。 とにかく使い勝手が手軽で、アカウント登録の必要さえもない。 基本的にクレジット表記も不要で、加工もOK。ブログの記事...

Table of Contents Plusの目次が急に消えたときの対処法。

WordPeessのブログ記事の目次が急に消えた!? ふと気づいたら、WordPressのブログ記事の目次が消えていた。 あれ？と思ったら、Table of Contents Plusのアップデートの影響らしい。 ひとまず下記の手順で解決しました。 （※特にTable of Contents Plusをダウングレードする必要はない。） 今回表示がされなくな...

"Atom.app"を開くとコンピュータが破損します。ついにAtomの日の入り。

Atomがいよいよ。 開発終了が発表されていたAtomが、いよいよ使用不可となってきた。 起動しようとすると「"Atom.app"を開くとコンピュータが破損します。ゴミ箱に入れる必要があります。」という結構な強めのメッセージが表示され、起動自体ができない。 （※Macの場合。おそらくWindowsも似たようなメッセージかと思われる。） ...

変数と関数によるCSSプログラミング。

CSSでも変数や関数が使えるように。 CSS変数やCSS関数によるプログラミング。 CSSでプログラミング。 CSSの生みの親であるHåkon Wium Lie（ホーコン・ウィウム・リー）氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。 そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング...

Google Tag Managerの設置はどこが良いの？

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

データベース接続確立エラーへの対処方法。

データベース接続確立エラーの対処。 WordPress作業時の突然のデータベース接続確立エラー。 データベース接続確立エラー発生時の表示例。 このエラーが出ると画面が真っ白（ダークモードの場合は真っ黒）となったりし、WordPressの管理画面へも入れなくなるので、初めてのときはあたふたしまう。 焦ってしまうが、もし、WordPressのインストール時や引越...

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

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

WordPressの投稿IDを確認したいときの確認方法。

WordPressの投稿IDで条件分岐したいとき。 投稿IDを確認したい。 投稿には個別にIDが振られている。 WordPressサイトを構築・運用する際に、投稿IDを知りたいときがある。特定の記事でのみでJavaScriptやGoogle Fontsを読み込みたい場合などに。 普通にheader.phpなどで読み込むと、全ての投稿記事に適用されてしまう。そうなると...

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

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

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

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

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

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

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

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

CSSブレンドモード。乗算をmix-blend-modeで。

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

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

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