ファイルやサイトのウイルスをチェック、「VirusTotal」。 VirusTotal オンラインかつ無料で、ウイルスやマルウェアをチェックしてくれるサイトがある。 いずれも英語だが、URLのコピペやファイルのアップロードだけでチェックしてくれるので、ブラウザの翻訳機能を利用すればほとんど苦にならない。 VirusTotal by Google Wik...
ウイルス・マルウェアチェックサイト。オンラインかつ無料利用可。
Memos
PageSpeed Insightsでサイト読み込みの改善。増えた４項目。
PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の３つがある。これらはSEOに重視...
line-clampの使い方。CSSで複数行指定。効かないときは？
CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは２行、PCは３行などと簡単に振り分けができる。 li...
CSS box-sizingは、リセット用のCSSに書いておくと使いやすい。
box-sizing: border-box;が、あちこちに記載されている。 便利な「box-sizing: border-box;」。 box-sizingの値。 Webサイトのコードを参照したり、コーディングの添削をしたりする際に、意外と遭遇するのが「box-sizing: border-box;」が指定されているCSSファイル。 box-sizingとは？ ...
CSSの@whenと@else。新しいブレイクポイントの設定方法？
@whenと@elseは普及するだろうか？ CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト：CSS Conditional Rules Module Level 5 @whe...
text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。
text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ...
Highlighting Code Blockがおかしい！Easy Table of Contentsをアップデートするとコンフリクトする。。
突然、Highlighting Code Blockの表示に不具合が。 目次用のプラグイン「Highlighting Code Block」の表示が、突然おかしくなった。 ネット上に解決方法が見つからなかったので、もし参考になれば。 pets今回の現象としては... HTMLとPHPのコードは表示不可。PHPの方は壊滅的で、サイトのレイアウトまで崩壊。 ...
縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。）
縁取り文字はtext-strokeを使った方が楽で確実。 CSSのtext-stroke。 DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字。 文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。 そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がよ...
CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。
CSSで変数（カスタムプロパティ）を使うと、とにかく便利。 CSS変数を使う。 プログラムの基本。 JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。 CSSでも使える便利な機能。 CSS変数のニーズ。 CSS変数（カスタムプロパティ）。 もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプ...
CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。
CSSでフェードインできる、animationプロパティ。 CSSだけでフェードイン。JavaScript不要。 フェードインがCSSのanimationで実装できるように。 数年前まではJavaScriptやjQueryプラグインで実装していた、Webサイトのフェードイン。 サイト訪問時にちょっとリッチな雰囲気を醸し出すフェードインは、今ではすっかりCSSだけで表...
CSS カラーコードで透明度を指定したいとき。（16進数6つ+2つで。）
16進数（HEX）のカラーコードで透明度を指定したい場合。 CSSで多い、色の指定。 CSSで色や透明度を指定する。 CSSで色を指定する際は、#を付けた6桁の英数字、16進数のカラーコードを使うことが多い。 カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと厳密に一致させたい場合でも、デザインツールで数値化ができるため再現性が高い。 16進数、16...
ゴッホとピカソの違いがわからないのにデザイナー？知らなすぎて搾取されるWeb&DTPデザイン。
デザイナーって？ ファッションデザイナーからWebデザイナー、DTPデザイナーへ。 デザイナーのイメージ。 MacやWindowsなどの家庭用コンピュータが現れる前までは、日本で「デザイナー」と言えば、「ファッションデザイナー」のイメージが強かった。 現在は「デザイナー」と言えば、パソコンを使った「Webデザイナー」や「DTPデザイナー」を指すことの...
模写コーディングの際に気をつけるべきこと。学ぶは真似る。
模写コーディングの注意点。 模写コーディングによるコーディング学習 学ぶは真似るは、コーディング学習でも一緒。 学ぶの語源は学ぶ、学ぶは真似る、というように、参考にしたい誰かの真似から始めるのは古来からの学習法の一つだ。 それは科学的にも裏付けがある。そもそも生命の遺伝子やミーム（文化的遺伝子）の伝達もコピー、模倣から始まる。 遺伝子もコピーに...
ニュートンによる虹は７色というのは本当？（絵文字は６色だけど。）
ニュートンが虹を7色と決めた？ ニュートンの光のスペクトルでは7色。 日本では7色。 日本では虹は7色であるというのは、一般的で、当たり前のこととなっている。 アメリカでは6色。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。 2色や4色、5色という国、地域もあるらしい。 Appleの初期のレインボー...
SVGテキストをセンタリングする方法。Safariの挙動も解決。
SVGテキストのセンタリングは、ブラウザによって挙動が違う。 SVGテキストのセンタリング問題。 SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。 表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。 実際に検証した...
ノーコードは必要なのだろうか？ノーコードはなぜ広がらない？
ここ数年話題のノーコード。 オーサリングとノーコード。 ノーコードのあれこれ。 ここ数年Web業界でトレンドとなっている「ノーコード」。その名の通り、わざわざコードを書かなくてもカッコよくおしゃれなサイトが作れちゃう、というような一見最先端な技術。 と、言われているような雰囲気だが、そもそも同じようなことは20年ほど前も謳われていた。HTMLやCSS...
VSCodeのタブ「ピン留め」機能が手軽で快適。
常に開いておきたいタブをピンで留められる。 VSCodeのタブをピンで固定。 VSCodeのタブのピン留め。 ブラウザでたまに使っていた機能のピン留め。いつの間にかVSCodeでも使えるようになっていた。2020年頃から実装されていた模様。 ファイルを閉じて開き直したり、VSCodeを終了して再度立ち上げたときにもピン留めしたタブはそのまま保持される。 VSC...
WordPress pタグを投稿記事から削除する1行のコード。
記事を書いた後に、意図せずにpタグが挿入されている！？ WordPressによる「wpautop」。 wpautop WordPressで記事を作成している時、想定外にレイアウトが変わってしまうことがある。 よくあるのが、ブログ投稿時の「pタグの自動挿入」。 これはデザイナーにとっては（もしかしたらブロガーにも）悩ましく、特にCSSでpタグにスタイルを設定して...
パソコンと目と健康管理。VDT症候群の予防とダークモードの活用のすすめ。
パソコンやスマホと、VDT症候群。 VDT症候群。目と健康管理。 VDT症候群とは？ 自分が職業訓練校で講師をしていたころ、カリキュラムの最初の段階で必ず「VDT症候群」についての内容があった。 VDT症候群とは、「Visual Display Terminal Syndrome（ビジュアル・ディスプレイ・ターミナル・シンドローム）」の略で、要するにパソコンの前での...
Googleアナリティクスで自分のアクセスを除外したい時は「IPv6」で。
アナリティクスへログインし、画面左下の「管理」をクリック。 「管理」の画面に切り替わる。 ここの、画面右に「ビューを作成」の項目があるので、その中から「フィルタ」を選択する。 すると、「ビューを作成」の画面が表示される。 「ビューを作成」画面で、「フィルタを追加」ボタンをクリック。 「ビューを作成」の画面に切り替わる。 ここに、「フィルタを追加」...
CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。
CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 max-widthとレスポンシブの誤解。 ピクセル指定では対応しきれない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。 よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定。 max-wid...
GA4への移行。Google タグ（gtag.js）とGoogle タグ マネージャーの違いって？ アナリティクスの計測はどちらでもOK。
Google タグ（gtag.js）とGoogle タグ マネージャー。 Google タグとGoogle タグ マネージャーとの違いがよくわからない。 よくわかってはいないが、とりあえずUA（従来のユニバーサル アナリティクス）からGoogle アナリティクス 4(GA4)へ移行し、下記のようなGoogle タグをhead内へ記述することで、計測はできている。 複数のサ...
アイキャッチ画像（WordPressのサムネイル画像）がない場合、いらない場合は、これで解決。
アイキャッチ画像（サムネイル画像）が設定されていないときにできる空白をなくしたい。 アイキャッチ画像、サムネイル画像がないとき。 画像はないけど投稿はしたい。 ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。 だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなって...
さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。
さくらからさくらへ。WordPressではないサイトの引越し。 さくらのサーバーからさくらのサーバーへの引越し。 他社から静的サイトの移転。 他社で取得しているドメインのサイトを、さくらのスタンダードプランのサーバーからビジネスプランのサーバーへ移行することに。案の定、一筋縄にはいかなかった。 あらかじめ手続き方法をヘルプページやネット上で探しても、さくら-さくら間...
第三者コードの影響を抑えてください？の対応と、preconnect。
第三者コードの影響を抑えてください！？ PageSpeed Insightsの悪化。 第三者コードの影響。 どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。 PageSpeed Insightsをチェックしていたところ、「第三者コードの影響...
さくらインターネットのコンテンツブーストの設定方法。（数ステップで。）
さくらインターネットでWordPressを使う場合の問題点。 WordPressの速度が遅い。 速度だけでなく、ムラが多い。 さくらインターネットの共用サーバーでWordPressを使用する場合、残念ながら速度が遅い。 サーバーを移転すれば解決するが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題。 例えば当サイトはもともとデザインのポート...
iPhone 14-17の解像度と、画像サイズ、CSSのピクセル設定をどうするか？
iPhoneの解像度とは？ デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない！？ 解像度の基本設定。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると思わ...
CSSのobject-fitの使い方。トリミングやサイズの実装例。
CSSのobject-fitプロパティでできること。 object-fitでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fit ...
CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。
CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、３ステップでOK。 CSSで、マーカーの見た目と動きを作成。（class名「highlight」） JavaScriptで、スクロー...
backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。）
CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に２つ表示されるが、Safariでは１つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ...
Webデザインを独学で学ぶのなら。Webデザインで行き詰まったのなら。【ちょっと客観的に】
そもそも独学で可能なのか？ 年齢による見極めが重要。 Webデザインを独学で学ぶことは可能だ。ただし、自分の年齢は考慮すべきである。 大前提として、ここの見極めをしなければならない。家族を養う立ち位置にいる人ならば、最重要の確認事項だ。 一部で溢れているような甘い情報に振り回されては危険なのだ。 中途採用のWebデザイナー、コーダーたち...
マズローの欲求５段階説と、実社会とSNSと、Webデザイナーの報酬と。
マズローの欲求５段階説と、「志を高く持とう」や「意識高い系」。 実社会でもSNSでも制作の現場でも、「志を高く持とう」とか「意識高い系」とか、重いのか軽いのかどっちかよくわからない用途で言葉が使われていたりする。 こうして活字で見比べると、前者の意味は重くも清くも、また後者はただの揶揄だったりもする。 栄養補給、体力回復には、お金と家、部屋が必要。 しっかり飯を食え...
肖像権と著作権。ネットにあるのはタダじゃないの？
肖像権とは、ざっくりと言うなら、写真に写っている人の権利。 Photo by Connor Olson 例えば写真に写った人の場合。 肖像権の有無があり、「ネット画像 = 無料」ではない。 何気なく撮った写真の背景などに顔が特定できる第三者が映り込んでいたという場合がある。 その写真をネット上に公開する際は、その第三者の方が一般人でも許...
iPhoneでWebMを再生できるように。（2025年暫定）
WebMとWebP。 WebPはすでに対応済み。 名前が似ているように、Googleが開発したファイル形式。 WebMは、動画のファイル形式。拡張子は「.webp」。 WebPは、画像のファイル形式。拡張子は「.webm」。 WebMはまだ対応途中。 AppleとGoogleと。 スマホは事実上、AppleのiOSかGoogle...
CSS filterで色変更。色相・彩度・明度？ filterプロパティでできること。
CSS filterプロパティでできること。 CSSのfilterの種類。 filterプロパティについて。 filterプロパティの関数は代表的なもので10種類ほど。以前はPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 filterプロパティの例。 （※下記に実装例あり。） filter: ...
WordPressで動画が再生されない！ときの対処。
WordPressで動画を埋め込みたい。 WordPressで動画再生。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[...
iPhoneの解像度一覧（iPhone8〜13まで）と、CSSブレイクポイントの目安は？
iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか？ 「拡大表示」の機能はiPho...
スライダーがうまく動かない時の対応。（jQueryはbodyの閉じタグの前じゃない。）
スライダーのカスタムを頑張れば頑張るほど、動きがカクカクする。 jQueryの読み込みの場所。 bodyの閉じタグ前じゃなくてもいい。 スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。 そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良いかもしれない。 jQuery本体はhead内...
Webデザインは職業訓練校（ハロートレーニング）かスクールか。迷った場合はどっち。
職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので（もちろん良い情報もあるが。）、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10...
WordPressの投稿とカスタム投稿を振り分けたい時はこれで解決。（条件分岐できない時の対処方法。）
投稿とカスタム投稿タイプで条件分岐。 投稿のis_single()と、カスタム投稿タイプのis_archive()。 is_archive()ではパラメータを指定できない。 is_archive()の仕様。 WordPressでテーマを作っているとき、デザインを分けるためなどで、デフォルトの「投稿」と「カスタム投稿タイプ」を条件分岐したいときがある。 ...