WordPressの不要なメディアファイルを削除する方法。Media Cleaner。 2024.04.26 井川 宜久 メディアライブラリの「未添付」検索では追いつかない。 増えていく不要なメディアファイル。 メディアファイルを減らしたい。 WordPressでサイト運営をしていると、ついついと使っていない画像が溜まってしまうことがある。 特に更新頻度が高いサイトや、ブログを運用している場合などは、結構な数のファイルがメディアライブラリ内に含まれていく。 〜中略〜 未... memosWebデザインWordPress
rgb()で透明度も。CSSの新しい色指定と使い方の例。 2024.03.22 井川 宜久 rgb()で透明度も指定可能に。 rgb()関数での色指定。 rgb()の新しい書き方。 rgb(r g b) rgb(r g b / a) Red(赤) Green(緑) Blue(青) Red(赤) Green(緑) Blue(青) / Alpha(アルファ) カンマからスペースでの区切りへ。 rgbの値はこれまで通り0〜255。区切りが... CSSmemosWebデザイン
WordPressのトップページがindex.phpでもfront-page.phpでもhome.phpでも問題はない。 2024.03.21 井川 宜久 WordPressのトップページのテンプレート。 トップページ用の3つのテンプレートファイル。 トップページにindex.phpを使うのは間違いなの? 会社やチーム、大規模なプロジェクトなどで「共通したルール」がある場合は別として、個人や少人数で制作する場合はindex.phpでも全然構わない。 トップページにfront-page.phpやhome.phpを使用。 ... memosWebデザインWordPress
CSSで縦書き。writing-modeの使い方。効かないときは? 2023.11.27 井川 宜久 CSSで縦書き。writing-modeの使い方。 CSSの縦書き方法。 CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。 サイト全体を縦書きにするよりも、見出しやアクセントの方が需要が多そう。 CSS .selector { writing-mode: vertical-rl; } writing-modeで縦書き指定。 ... CSSmemosWebデザイン
CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ? 2023.05.22 井川 宜久 ブレイクポイント、メディアクエリの最小値は? 基本は375pxからだが。 320pxも現存している。 Webデザイナーを悩ますブレイクポイント。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 スマホの元祖である、初代iPhoneの横幅は320pxだった。それが基準となっているのか、2023年7... CSSmemosWebデザイン
Adobe Fireflyの使い方例。商用利用可、著作権フリーな画像生成AI。 2023.03.28 井川 宜久 Adobe Fireflyとは? 画像生成AIと文章生成AI。 Adobeによる、画像生成AI。 Stable Diffusionがすごい、DALL·Eがやばい、ChatGPTがとんでもない、というハイスピードなAI新時代に、デザインツールの大御所と言えるAdobe社がいよいよ本格参入。 無料で使えるプランもある。 参照元:Adobe ... AIFireflymemos脳
サイトが高速化?.htaccessをチェック。キャッシュ指定は要注意。 2023.03.17 井川 宜久 サイトの.htaccessファイルが間違っているかも。 サイトが重たいときやSEO対策をしたいとき、.htaccessで対策することが度々ある。 そのような場合、あちこちとサイトを検索して、コードを拝借して利用していることもあるだろう。 ありがたいことに、ネット上には色々とコピペOKなコードが提供されている。 ただし肝心のコピー元や自分自身のアレンジが間違っていた場... memosSEOWebデザインWordPress
FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。 2023.02.19 井川 宜久 GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion(コンパニオン)」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに... AIFigmamemosデザイン
Illustrator 「クロスと重なり」の使い方。簡単操作が作業効率を上げる! 2023.02.18 井川 宜久 クロスと重なりとは? 「クロスと重なり」機能の登場で、デザインでよく使う、オブジェクトの重ね方が一瞬でできるようになった。 例えば、オリンピックの五輪マークのようなデザインをしたいときなどは、とても便利にできる。 以前はハサミツールでパスを切ったり、切ったオブジェクトを同じ場所に重ねたりと、色々と合わせ技が必要だったが、「クロスと重なり」はその作業を短縮させられる。 ... Illustratormemosデザイン
Illustratorの「スケッチをベクターに変換」を実際にやってみた手順。 2023.02.17 井川 宜久 手書きのスケッチをベクターデータへ変換。 「スケッチをベクターに変換」の機能は、その名の通り、ペンや鉛筆などで描いたスケッチのJPGやPNG画像をベクター化することができる。 ずっと欲しかった機能で、ありそうでなかった。使い方は簡単で、数ステップで可能。 アートボードにJPGやPNGなどを配置する。 今回はボールペンで描いたエッフェル塔のスケッチをスキャンし... Illustratormemosデザイン
CSS aspect-ratioの使い方。効かないときはどうする? 2023.01.24 井川 宜久 CSSで縦横比の指定。aspect-ratioの使い方。 aspect-ratioプロパティ。 aspect-ratio aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比(アスペクト比)の指定がCSSでできるようになった。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYo... CSSmemosWebデザイン
FigmaからWebPで書き出しす方法。Olive Pressの使い方 2023.01.16 井川 宜久 Figmaのプラグイン「Olive Press」とは? WebPで書き出すことが増えている。個人的にはWeb用の画像のほとんどは.webp形式を使用している。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグイン「Olive Press」は、Fig... Figmamemosデザイン
GA4のページビュー数(PV数)は、page_viewとは違う? 2022.12.31 井川 宜久 GA4のpage_viewと、表示回数と、UAのページビュー数と。 ※2024.01.11 追記あり。 GA4のPV数はどこにある? UA→GAから移行中のため、2022年12月現在は両方のアナリティクスで指標が見られる状態となっている。 とりあえず両方での「ユーザー数」はほとんど同じだ。(期間が若干違うため一致はしていない。) ただし、「ページビュ... memosSEOWebデザインアナリティクス
Photopeaの使い方や主な機能。Photoshopのような無料ツール。 2022.12.22 井川 宜久 Photoshopなどでちょこっとだけ画像編集したくなったとき。 無料プランで使えるオンライン画像編集ツール「Photopea」。 ちょっとした画像編集作業をしたくなったとき、このパソコンにPhotoshopが入っていればなぁ、と思うことがある。 しかしPhotoshopはなかなか高価であり、単発や短時間の作業ではコスパが良くない。 そういうときに、ブラウザ上で無料... memosデザイン
オンラインで動画を圧縮する、「オンラインでビデオを圧縮」。 2022.12.19 井川 宜久 オンラインでビデオを圧縮。Compress Video Online。 動画は1枚1枚の画像のコマ送り。そのためどうしても容量が重たくなる。かと言って圧縮のためだけに動画編集ソフトを立ち上げるのもこれもまた気が重たい。 そこで重宝するのが、オンライン圧縮サイト「Compress Video Online / オンラインでビデオを圧縮」。 インストールの必要も、アカウント登... memosWebデザインオンラインツール
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。 2022.12.10 井川 宜久 detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い... CSSHTMLJavaScriptjQuerymemosWebデザイン
Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。 2022.12.01 井川 宜久 Figmaのモザイクプラグイン「Pixels」とは? ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理... Figmamemos
viewport-fit=coverで対応。iPhoneのSafe Area問題。 2022.11.17 井川 宜久 viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian ... CSSHTMLiPhonememosWebデザイン
CSS フォントサイズはどうする? remの基本かつ効果的な使い方。 2022.11.15 井川 宜久 remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確... CSSmemosWebデザイン
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。 2022.11.14 井川 宜久 デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット。 Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。) Windows: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。) ... CSSiPhoneJavaScriptmemosWebデザイン