CSSで縦書き。writing-modeの使い方。 CSSの縦書き方法。 writing-modeの実装。 CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。 サイト全体を縦書きにするのはもちろん、見出しやアクセントとして一部分への指定する際も、下記の記述が基本となる。 CSS .selector { writing-mode: ver...

「モデレートしてください」が止まらないとき。 WordPressの投稿画面で、自分の記事にリンクを張った場合、「モデレートしてください」という通知が届くことがある。 本来は他のブログからリンクが張られたときに届く通知 (ピンバック・トラックバック)の設定だと思うが、なぜか自分自身から通知が届いてしまう、「セルフピンバック」という現象らしい。 セルフピンバックへの対...

ChatGPTに、個人情報や著作権を学習されたくないとき。 ChatGPTから個人情報や肖像権を制限。 ChatGPTは便利な反面、勝手にAIに学習されると困るという場合がある。 例えば... 個人情報が含まれるサイト。 著作権があるコンテンツ。 ログインが必要なサイト。 有料コンテンツがあるページ。 など。 そのような場合は、「robots....

scroll-snap-typeの使い方例。CSSでシンプルなカルーセル。 CSSカルーセル。 ちょっと前まではJavaScriptが必須だった、カルーセルやスナップするスクロール。 いまではもう、CSSだけでも結構いける。 スマホのスワイプにも対応している。 scroll-snap-typeの特徴。 CSSのみ。JavaScriptが不要。 sc...

MacやWindowsの隠しファイルとは？ 隠しファイルは表示されない。 MacでもWindowsでも。 謝って変更や削除をしてしまわないように、デフォルトでは見えなくされているファイル。 ところがWeb制作の際に必要となる、.htaccessや.ssh、.ftpconfigなども見えない、不可視状態となってしまう。 そのようなときは... 隠し...

CSSブレイクポイント、メディアクエリの最小値は？ Webサイトのブレイクポイントの決め方はどうするべきか。 ブレイクポイントの意味との決め方。320pxも現存している。 Webデザイナーやコーダーを悩ます、ブレイクポイントの決め方。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 320px以...

iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 iPhoneのブラウザ（Safari、Chrome、Edge）でのみ、表示に不具合がある。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起...

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

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

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

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

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

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

CSSで縦横比の指定。aspect-ratioの使い方。 aspect-ratioプロパティ。 aspect-ratio aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比（アスペクト比）の指定がCSSでできるようになった。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYo...

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

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

CSSで文字数の制御。text-overflowの使い方。 text-overflowの仕様。 text-overflow text-overflowで３点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。 width: 30em; (幅の単位や広さは任意。) overflow: hidden; white-space: nowr...

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

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

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