CSSのobject-fitの使い方。トリミングやサイズの実装例。 2022.09.08 CSSのobject-fitプロパティでできること。 object-fitでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fit ... CSSmemosWebデザイン
backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。） 2022.09.06 CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に２つ表示されるが、Safariでは１つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ... CSSmemosWebデザイン
Dark Readerのインストールと使い方。（PC & スマホ）ダークモードで目を大切に。 2022.09.05 ダークモードでパソコンやスマホを。Dark Readerのインストール手順。 Dark Readerのダークモードについて。 ダークモードの活用で。 パソコンやスマホで長時間ブラウザを見ているときに、目の負担を軽減する「Dark Reader」を使ってダークモードにすると楽になる。 以前はダークモードがなかったので、個人的にも目を悪くした原因となってしまった。 ... memosオンラインツール
Webデザインを独学で学ぶのなら。Webデザインで行き詰まったのなら。【ちょっと客観的に】 2022.09.03 そもそも独学で可能なのか？ 年齢による見極めが重要。 Webデザインを独学で学ぶことは可能だ。ただし、自分の年齢は考慮すべきである。 大前提として、ここの見極めをしなければならない。家族を養う立ち位置にいる人ならば、最重要の確認事項だ。 一部で溢れているような甘い情報に振り回されては危険なのだ。 中途採用のWebデザイナー、コーダーたち... JavaScriptjQuerymemosWebデザイン
マズローの欲求５段階説と、実社会とSNSと、Webデザイナーの報酬と。 2022.09.02 マズローの欲求５段階説と、「志を高く持とう」や「意識高い系」。 実社会でもSNSでも制作の現場でも、「志を高く持とう」とか「意識高い系」とか、重いのか軽いのかどっちかよくわからない用途で言葉が使われていたりする。 こうして活字で見比べると、前者の意味は重くも清くも、また後者はただの揶揄だったりもする。 栄養補給、体力回復には、お金と家、部屋が必要。 しっかり飯を食え... memosWebデザイン脳
肖像権と著作権。ネットにあるのはタダじゃないの？ 2022.09.01 肖像権とは、ざっくりと言うなら、写真に写っている人の権利。 Photo by Connor Olson 例えば写真に写った人の場合。 肖像権の有無があり、「ネット画像 = 無料」ではない。 何気なく撮った写真の背景などに顔が特定できる第三者が映り込んでいたという場合がある。 その写真をネット上に公開する際は、その第三者の方が一般人でも許... memosWebデザイン
CSS filterで色変更。色相・彩度・明度？ filterプロパティでできること。 2022.08.28 CSS filterプロパティでできること。 CSSのfilterの種類。 filterプロパティについて。 filterプロパティの関数は代表的なもので10種類ほど。以前はPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 filterプロパティの例。 （※下記に実装例あり。） filter: ... CSSmemosWebデザイン
WordPressで動画が再生されない！ときの対処。 2022.08.25 WordPressで動画を埋め込みたい。 WordPressで動画再生。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[... HTMLmemosWebデザインWordPress
iPhoneの解像度一覧（iPhone8〜13まで）と、CSSブレイクポイントの目安は？ 2022.08.22 iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか？ 「拡大表示」の機能はiPho... CSSiPhonememosWebデザイン
スライダーがうまく動かない時の対応。（jQueryはbodyの閉じタグの前じゃない。） 2022.08.20 スライダーのカスタムを頑張れば頑張るほど、動きがカクカクする。 jQueryの読み込みの場所。 bodyの閉じタグ前じゃなくてもいい。 スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。 そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良いかもしれない。 jQuery本体はhead内... JavaScriptjQuerymemosWebデザイン
Webデザインは職業訓練校（ハロートレーニング）かスクールか。迷った場合はどっち。 2022.08.18 職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので（もちろん良い情報もあるが。）、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10... CSSHTMLjQuerymemosPHPWebデザインWordPressデザイン
WordPressの投稿とカスタム投稿を振り分けたい時はこれで解決。（条件分岐できない時の対処方法。） 2022.08.17 投稿とカスタム投稿タイプで条件分岐。 投稿のis_single()と、カスタム投稿タイプのis_archive()。 is_archive()ではパラメータを指定できない。 is_archive()の仕様。 WordPressでテーマを作っているとき、デザインを分けるためなどで、デフォルトの「投稿」と「カスタム投稿タイプ」を条件分岐したいときがある。 ... memosPHPWebデザインWordPress
辿ったリンクは期限が切れています！？ WordPressテーマのアップロードエラー対処。 2022.08.15 辿ったリンクは期限が切れています？ WordPressで作業中のエラー。 テーマのアップロード。 WordPress管理画面からテーマをアップロードしようとすると、「辿ったリンクは期限が切れています。もう一度お試しください。」というエラーが出ることがある。 単にこのメッセージからでは、原因がなかなか想定しにくい。 WordPressサイトだったので、まずWor... memosPHPWebデザインWordPress
Macの寿命を伸ばすためにやってみていることと、過去の検証。 2022.08.12 Macの寿命は4年？ Macの寿命と高額化。 Macのコスパ。 ネット上で調べてみると、Macの寿命（使用年数）は4年という情報が出てくる。 公式サイトに記載されている、という理由から。 Appleサイトの質問回答ページに、「Appleは、Apple製品の温室効果ガスのライフサイクル評価をどのように行っていますか。」という項目で記載がある。 参考：環境 ... iPadMacmemosWebデザイン
PHPの配列の括弧の違いは？WordPressでよく見るarray()と[]。 2022.08.06 PHPの配列 PHPの配列の括弧の違い。 array()と[]。 PHPのバージョンアップによる配列の短縮構文で、array()を[]で置き換えることが出来るようになっている。 array()でも[]でも、配列変数argsのキーにダブルアロー演算子（=>）で値を入れられる。 PHP5.4からは、配列の短縮構文を使用できる。 PHP5.4から配列の短... memosPHPWebデザインWordPress
リダイレクトがうまくいかない時のプラグイン、「Redirection」の設定方法。 2022.07.31 .htaccessファイルなどでは上手くいかなかった。 普段はサイトの移転などでURL変更があった場合、.htaccessで301リダイレクトの設定をしているが、今回のケースでは上手くいかなかった。 ネット上で情報を探していたところ、functions.phpに記述する方法もあったが、これも上手くいかなかった。 WordPressプラグイン、「Redirection」で解決。... memosSEOWebデザインWordPress
WordPressに最終更新日を表示させる方法。（プラグイン不要。） 2022.07.27 WordPressのテンプレートタグでOK。 「the modified date」と「get_the_modified_date」。 記事の最終更新日。 WordPressで投稿した内容を、後になって追記したり修正したりする場合がある。 そういった場合は「最終更新日」を表記させた方が、訪問する方へ対して親切であり、SEO的にも何かしら効果があると思われる。 ... memosPHPSEOWebデザインWordPress
widthの読み方は、ウィドスやウィドゥスよりもウィズが良い理由。 2022.07.23 widthのカタカナ読みはウィズ。 widthの読み方。 スペルでも発音記号でも。 widthはスペルや発音記号を見てもウィズと読めて、英語圏の外国人と話すときもウィズというカタカナ発音で通じる。 HTMLやCSSでよく使うwidth。 width="" / width: ""; Webデザインで幅の指定に使う「w... CSSmemosWebデザイン
VSCodeでファイルをダブルクリックで開きたい時。 2022.07.06 ファイルはダブルクリックで開きたい。 VSCodeでファイルを開く時は、左側のサイドメニューの「エクスプローラー」から開くことができるが、デフォルトでは「シングルクリック」になっている。 慣れると便利なのかもしれないが、通常、ファイルを開くときは「ダブルクリック」で開く方が一般的ではないだろうか。 一般的にはダブルクリックで開く方が多い。 MacでもWind... EditormemosWebデザイン
CSS position: stickyの使い方。効かない！ときはここをチェック。 2022.06.29 position: stickyの使い方。 CSSでsticky。 position: sticky; サイドバーをスクロールの途中で固定させたい場合は、以前はJavaScriptなどを組み合わせなければ実装できなかった。 それが「position: sticky」の登場により、CSSだけで可能になった。 ブラウザ対応もすでに追いついており、使い方を覚えると、... CSSmemosWebデザイン
jQuery + JavaScript + CSSでコピーボタンを実装。（コピペ可。） 2022.06.21 Codeのコピーボタン追加のWordPressプラグイン。 意外としっくりくる感じのものが見つからなかった。 ネット上でよく見る、コードをコピーできるボタンをWordPressのプラグインなどで実装しようとしたところ、なかなか見つからなかった。 「Copy Anything to Clipboard」や「highlight.js」、「prism.js」はうまくいか... jQuerymemosWebデザインWordPress
WebP対応。JPGやPNGからの変換も簡単。SEOにも効果的に。 2022.06.21 WebPの壁、IEが公式にサポート終了。 Internet Explorerがサポート終了に。 IEの終了とWebPの台頭。 いよいよというか、ついにというか、2022.06.16にIEのサポートが終了。 そこで、改めて画像形式、WebPについて考察。 WebPの開発元であるGoogle社のChromeはもちろん、Apple社のSafariも202... FigmamemosSEOWebデザイン
VSCodeのテーマ変更方法。 2022.06.15 VSCodeの配色テーマ選択方法。 GitHubからAtomの開発終了が発表されたので、ひとまずVSCodeへ移行することに。 VSCodeはちょっと画面がガチャガチャしているので、極力シンプルにしたいときは... 手順。 「Code」 > 「基本設定」 > 「配色テーマ」へ進む。 画面左下の歯車マークからも進むことができる。 ショートカット ... EditormemosWebデザイン
デザインの原則。想像力と、時代や国や地域でも有効な法則たち。 2022.06.01 想像力がなければ、デザインしようがない。 デザインには想像力が必要だ。そして想像力を持つためには知識と経験が必要だ。なので知識の中に原則・法則を入れておくととても役に立つ。 知らないことを想像することはできない。 200年前に地球の反対側に住んでいた人の流行りごとは何なのか？ 現代で最もクールでホットで新しくて古い画家は誰なのか？ 深海の底... memosWebデザインデザイン
Webや絵画制作の着手金は、しっかり請求した方が絶対に無難。 2022.03.24 仕事の報酬を得られないのは非常にまずい。 過去に、数万円が数度、数十万円が１度、数百万円が1度、計数名から未払いを食らったことがある。全て当時の「知り合い」の紹介だった。 今でも連絡先はわかる。仕事上のやりとりのメールや制作物も大体残っている。ちなみに当時の労働基準監督署は残念ながら全くと言って良いほど動いてくれなかったので、数百万円の時はさすがに弁護士へ依頼した。 We... memosWebデザインデザイン
jQueryの読み込み位置はhead内。（bodyの閉じタグの前じゃない!?） 2022.01.21 jQueryの読み込みは、bodyの閉じタグの前じゃない。 jQueryはどこに書くか？ bodyの閉じタグ前じゃなくてもいい。 なんとなくjQueryの読み込みは、bodyの閉じタグの直前に書いた方が良いと言われている。 ただし、盲目的にbodyの閉じタグの前に書く、というのはやめておいた方が無難。 jQueryはどこに書くか？という... HTMLJavaScriptjQuerymemosWebデザイン
WebサイトSEO検証。Google5位以内を達成。ビッグなワードで。 2022.01.19 SEOの実証結果。その後。 SEO対策でさらに順位が上がる。 少し前に何度かSEO対策についてのメモ書きをしたが、その後、さらに順位が上がっていった。なので改めてメモに残して置こうと思う。 あるサイトで「地域名+ビッグキーワード」でスマホ・パソコンともに5位以内となった。被リンクの購入はしていない。Google マイビジネスで数えると、競合サイトは200ほどある。 ... memosSEOWebデザイン
Webデザイナー、Webコーダーのお金事情。Are you hungry? 2021.12.30 Webデザイナーは、なぜか日本では対価に見合っていないらしい。 Webデザイナーの収入の問題。これは、10年以上前から言われていたことだ。 まず、「Webデザイナー」という定義が曖昧だ。制作作業的には、コーディングができるかどうかで大きく違う。 なのでひとまずここでのWebデザイナーは、Webサイト制作のデザイナー、コーダーは、Webサイト制作でのコーダーと定義する。 ... memosWebデザインデザイン
WebデザインのSEOとは？SEOに強いデザイン脳とは？ 2021.12.16 SEO対策？ 本職はデザイン業、デザイン脳なのに。 デザインとSEO。 SEOに強くなった。 というか、実はずっと前から強い。 SEOとデザインは基本的には別種だが、デザイン思考でSEO対策をすることは不可能ではない。 例えば〇〇教室。 「地域名 + 〇〇」で検索すると、スマホでもパソコンでも10位前後で推移している。 前後の順位にあるのはすでに名前の知れ... memosSEOWebデザイン
Contact Form 7に確認画面がない！の対処方法。CSSか固定ページで。 2021.12.14 Contact Form 7には確認画面、サンクスページはない。 確認画面、サンクスページ。 かつてはよく見た確認画面、サンクスページ。 いまの時代に、そもそも確認画面やサンクスページは必要だろうか。 チェックボックスや送信完了後のメッセージ、自動返信メールで確認した方が確実ではないだろうか？ Contact Form 7と確認画面。 Contact F... memosWebデザインWordPress
WordPressの引越しは、All-in-One WP Migrationでささっと。 2021.12.03 All-in-One WP Migration。WordPressの引越しのトラブルを防ぐ。 All-in-One WP Migration。WordPressの引越し用プラグイン。 All-in-One WP Migration and Backup WordPressの引越し作業では、何かしら問題が起こりやすい。 なのでトラブルが起こることを前提として、気持ちや... memosWebデザインWordPress
Sassは必要？メリットは？ Sassからの卒業。Back to CSS。 2021.11.16 Sassで書く意味はなんだろう？ Sassのメリット。 まず第一に、Sassを使用する理由・メリットは何だっただろう？ 個人的には... 変数を使える。 関数を使える。 四則演算が使える。 Sassのかっこよさげなイメージ。 この4つは大きかった。テキストや背景色などのカラーコードを変数に格納、widthの幅を四則演算、というのは非常に便利だった。そ... CSSmemosWebデザイン
WebPとは？JPGからWebPへ。HTMLへの実装・検証結果。 2021.10.22 WebPってどうなのだろう？ メリットは？ 画像はWebP形式の時代へ。 WebPはGoogleが作った画像ファイル形式。 Webサイトで使用されている画像をJPGからWebPにしよう、という流れがある。 Googleの推しが凄いが、実際に軽くなる。 JPGやPNGからWebPへ。 WebPのメリット。 画像自体の見た目のクオリティはJPG... HTMLmemosWebデザイン
CSSのidセレクタは使ってはいけないって本当なの？ 2021.10.07 idセレクタは使ってはいけない？ あるときある学校で、idセレクタは遅いから使ってはいけない、という講師と出会ったことがある。CSSのセレクタはclassセレクタが一番速い、検証してみたから間違いない、そうだ。 正直なところまったく賛同できなかった。本当に検証したのならそうなのかもしれないが、実際にはその証拠を見せていなかった。 ちなみに、学校で学ぶことも多いWebデザイ... CSSmemosSEOWebデザイン
SEO対策とキーワード。コミットするならGoogleとW3Cへ。 2021.09.21 SEO対策の真実？ 自分は元々鉛筆画やデザインがメインなので、サイトのSEO対策は補助的に行っている。 だが、複数のサイトで数年間、ある程度の全国的なビッグキーワードでも、15位以内には入っている。中小企業の社名やパーソナルなサイト名では（同名の会社名がいくつかあっても）全国1位は普通で、ローカルSEOや、2〜3単語以内のキーワードで10位以内に入ることも普通だ。モバイル検索で... memosSEOWebデザイン
CSSのサーバー反映が遅い？原因切り分けはW3Cで。 2021.09.12 CSSが反映されない。 CSSが効いていない？ ブラウザかサーバーのキャッシュでは？ どうもCSSが反映されない事が多い。というかサーバー上で直接編集していると、ほぼ毎日、反映されない現象が起きる。 サーバーのキャッシュが原因だと思われるが、ここ数年全く改善されていない気がする。 CSSが反映されない原因としては、 ブラウザのキャッシュ。 サーバー... CSSmemosPageSpeed InsightsWebデザイン
CSS filterプロパティの使い方。画像調整は楽しく使いやすい。 2021.09.10 CSS3 filterプロパティの優秀さ。 Webサイトにとって写真は重要だ。古来から百聞は一見に如かずとも言うように、人間は文字情報よりも視覚情報の方がはるかに早く伝わる。 腕の良いカメラマン、カメラウーマンが撮ってくれた写真があればベストなのだが、当然費用がかかる。個人的には写真素材はプロにお願いしたいが、小規模サイトの場合、そうもいかないことがある。必ずしもプロの写真を用... CSSmemosSEOWebデザイン
HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ！ 2021.09.09 HTML5やCSS3、SEOなどの先端技術を無料ツールで。 今年2021年、5年ほど前に制作したサイトのリニューアルを承った。前回もリニューアルをしたので、2度目のリニューアルだ。ありがたいことに去年からお願いをされていたのだが、私の目の不調により待ってもらっていた。 だいぶ出来上がったので、ちょっと振り返ってみる。 マイク英会話教室札幌さまのサイト > ... CSSHTMLmemosSEOWebデザイン
clearfixは過去に作ったサイトでまだ十分に機能している。 2021.08.31 clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。 例えば、次のように。 .clearFloat{ clear: both; ... HTMLmemosWebデザイン
WordPressの検索ハイライト表示の仕方。（functions.phpに追加するだけ。） 2021.08.25 検索キーワードでのハイライト表示はとても簡単。 WordPressの検索結果をハイライト表示で。 見た目でもわかりやすく。 WordPressの検索機能は比較的簡単に設置できる。ただ、デフォルトの状態だと少々検索結果が分かりにくい。 そこで何か良い方法はないものかと探していたところ、functions.phpに下記の記述を追加するだけで、検索キーワードのハイライト表... memosPHPWebデザインWordPress
![PHPのカッコのarray()と[]。WordPressでの使い方の例。](https://igawa.co/wp-content/uploads/2022/08/a-woman-learning-php-brackets-array-600x400.jpg)
