WordPressのセキュリティをオンラインチェック、「Sucuri」。 2022.11.11 井川 宜久 WordPressのセキュリティをチェック、「Sucuri」。 WordPressの普及率とセキュリティ対策。 WordPressとSucuri。 非常に多くの人たちに利用されているCMS(コンテンツ・マネジメント・システム)であるWordPress。 世界中のWebサイトの約40%で利用されていると言われるほど。 そのWordPressサイトが、大々的に乗っ... memosWordPressオンラインツール
PageSpeed Insightsでサイト読み込みの改善。増えた4項目。 2022.11.10 井川 宜久 PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の3つがある。これらはSEOに重視... memosPageSpeed InsightsSEOWebデザインオンラインツール
line-clampの使い方。CSSで複数行指定。効かないときは? 2022.11.08 井川 宜久 CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは2行、PCは3行などと簡単に振り分けができる。 li... CSSmemosWebデザイン
CSSの@whenと@else。新しいブレイクポイントの設定方法? 2022.11.03 井川 宜久 @whenと@elseは普及するだろうか? CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト:CSS Conditional Rules Module Level 5 @whe... CSSmemosWebデザイン
text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。 2022.11.01 井川 宜久 text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ... CSSmemosWebデザイン
Highlighting Code Blockがおかしい!Easy Table of Contentsをアップデートするとコンフリクトする。。 2022.10.31 井川 宜久 突然、Highlighting Code Blockの表示に不具合が。 目次用のプラグイン「Highlighting Code Block」の表示が、突然おかしくなった。 ネット上に解決方法が見つからなかったので、もし参考になれば。 pets今回の現象としては、、、 HTMLとPHPのコードは表示不可。PHPの方は壊滅的で、サイトのレイアウトまで崩壊。 ... memosWebデザインWordPress
縁取り文字はCSSのtext-strokeで可能。(非推奨の時代は終わり。) 2022.10.29 井川 宜久 縁取り文字はtext-strokeを使った方が楽で確実。 CSSのtext-stroke。 DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字。 文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。 そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がよ... CSSmemosWebデザインデザイン
CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。 2022.10.23 井川 宜久 CSSで変数(カスタムプロパティ)を使うと、とにかく便利。 CSS変数を使う。 プログラムの基本。 JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。 CSSでも使える便利な機能。 CSS変数のニーズ。 CSS変数(カスタムプロパティ)。 もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプ... CSSmemosWebデザイン
CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。 2022.10.22 井川 宜久 CSSアニメーションでフェードイン。 数年前まではJavaScriptやjQueryプラグインで実装していた、Webサイトのフェードイン。 サイト訪問時にちょっとリッチな雰囲気を醸し出すフェードインは、今ではすっかりCSSだけで表現が可能となった。 シンプルなフェードインは、汎用性もある。 例えば、htmlセレクタに下記CSSをコピペするだけでOK。(値は変更可。)... CSSmemosWebデザイン
CSS カラーコードで透明度を指定したいとき。(16進数6つ+2つで。) 2022.10.20 井川 宜久 16進数(HEX)のカラーコードで透明度を指定したい場合。 CSSで多い、色の指定。 CSSで色を。 CSSで色を指定する際は、#を付けた6つの英数字、16進数のカラーコードを使うことが多い。 カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと厳密に一致させたい場合でも、デザインツールで数値化ができるため再現性が高い。 (※#は正確には「ハッシュ(#... CSSmemosWebデザインデザイン
ゴッホとピカソの違いがわからないのにデザイナー?知らなすぎて搾取されるWeb&DTPデザイン。 2022.10.18 井川 宜久 デザイナーって? MacやWindowsなどの家庭用コンピュータが現れる前までは、日本で「デザイナー」と言えば、「ファッションデザイナー」のイメージが強かった。 現在は「デザイナー」と言えば、パソコンを使った「Webデザイナー」や「DTPデザイナー」を指すことの方が多く感じる。 日常生活でもそうだが、求人情報、ネットで「デザイナー」で検索してみると一目瞭然だ。 これ... DTPデザインmemosWebデザイン脳
学ぶは真似る。模写コーディングの際に気をつけるべきこと。 2022.10.17 井川 宜久 学ぶは真似る。 学ぶの語源は学ぶ、学ぶは真似る、というように、参考にしたい誰かの真似から始めるのは古来からの学習法の一つだ。 それは科学的にも裏付けがある。そもそも生命の遺伝子やミーム(文化的遺伝子)の伝達もコピー、模倣から始まる。 親の遺伝子の半分は子に伝わる。 ちなみにミームは1970年代にRichard Dawkins(リチャード・ドーキンスによって作られた造... memosWebデザインデザイン脳
ニュートンによる虹は7色というのは本当?(絵文字は6色だけど。) 2022.10.16 井川 宜久 ニュートンが虹を7色と決めた? ※敬称略 7色の虹の色。 日本では7色。 日本では虹は7色であるというのは、一般的で、当たり前のこととなっている。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。 2色や4色、5色という国、地域もあるらしい。 Appleの初期のレインボーカラーのロゴは6色だった。現在のAppleやMi... CSSmemosWebデザインデザイン脳
SVGテキストをセンタリングする方法。Safariの挙動も解決。 2022.10.12 井川 宜久 SVGテキストのセンタリングは、ブラウザによって挙動が違う。 SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。 表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。 実際に検証したところ、CSSの問題ではなく、HTML側で... CSSHTMLmemosWebデザイン
ノーコードは必要なのだろうか?ノーコードはなぜ広がらない? 2022.10.09 井川 宜久 ここ数年話題のノーコード。 ※敬称略 オーサリングとノーコード。 ここ数年Web業界でトレンドとなっている「ノーコード」。その名の通り、わざわざコードを書かなくてもカッコよくおしゃれなサイトが作れちゃう、というような一見最先端な技術。 と、言われているような雰囲気だが、そもそも同じようなことは20年ほど前も謳われていた。HTMLやCSSが分からなくても、ホームページ... CSSHTMLmemosWebデザイン
VSCodeのタブ「ピン留め」機能が手軽で快適。 2022.10.07 井川 宜久 常に開いておきたいタブをピンで留められる。 タブのピン留め。 ブラウザでたまに使っていた機能だが、いつの間にかVSCodeでも使えるようになっていた。気が付かなかったが、2020年頃から実装されていたようだ。 参考:Microsoftは、ピン留めされたタブなどが改善されたVS Code1.51をリリースしました-MSPoweruser VSCodeは、Dreamwe... EditormemosWebデザイン
WordPress pタグを投稿記事から削除する1行のコード。 2022.10.06 井川 宜久 記事を書いた後に、意図せずにpタグが挿入されている!? WordPressによる「wpautop」。 wpautop WordPressで記事を作成している時、想定外にレイアウトが変わってしまうことがある。 よくあるのが、ブログ投稿時の「pタグの自動挿入」。 これはデザイナーにとっては(もしかしたらブロガーにも)悩ましく、特にCSSでpタグにスタイルを設定して... HTMLmemosPHPWebデザインWordPress
パソコンと目と健康管理。VDT症候群の予防とダークモードの活用のすすめ。 2022.10.01 井川 宜久 パソコンと目とVDT症候群。ブルーライトとダークモードの目への影響。 パソコンからの、目と健康管理。VDT症候群。 自分が職業訓練校で講師をしていた頃、カリキュラムの最初の段階で必ず「VDT症候群」についての内容があった。 VDT症候群とは、「Visual Display Terminal Syndrome(ビジュアル・ディスプレイ・ターミナル・シンドローム)」の略で、要... DTPデザインmemosWebデザイン脳
Googleアナリティクスで自分のアクセスを除外したい時は「IPv6」で。 2022.09.29 井川 宜久 アナリティクスへログインし、画面左下の「管理」をクリック。 「管理」の画面に切り替わる。 ここの、画面右に「ビューを作成」の項目があるので、その中から「フィルタ」を選択する。 すると、「ビューを作成」の画面が表示される。 「ビューを作成」画面で、「フィルタを追加」ボタンをクリック。 「ビューを作成」の画面に切り替わる。 ここに、「フィルタを追加」... memosWebデザインアナリティクス
CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。 2022.09.28 井川 宜久 CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。 実はスマホ以前の書き方。 実はこれは10年以上前の指定方法で、スマホが普及する以前の、主にデスクトップ... CSSmemosWebデザイン