HTML5やCSS3、SEOなどの先端技術を無料ツールで。 今年2021年、5年ほど前に制作したサイトのリニューアルを承った。前回もリニューアルをしたので、2度目のリニューアルだ。ありがたいことに去年からお願いをされていたのだが、私の目の不調により待ってもらっていた。 だいぶ出来上がったので、ちょっと振り返ってみる。 マイク英会話教室札幌さまのサイト > ...
HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ！
Memos
clearfixは過去に作ったサイトでまだ十分に機能している。
clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。 例えば、次のように。 .clearFloat{ clear: both; ...
WordPressの検索ハイライト表示の仕方。（functions.phpに追加するだけ。）
検索キーワードでのハイライト表示はとても簡単。 WordPressの検索結果をハイライト表示で。 見た目でもわかりやすく。 WordPressの検索機能は比較的簡単に設置できる。ただ、デフォルトの状態だと少々検索結果が分かりにくい。 そこで何か良い方法はないものかと探していたところ、functions.phpに下記の記述を追加するだけで、検索キーワードのハイライト表...
カスタマーサポートの対応力と、日本のIT化の遅れ。
20年遅れのサポート対応を受ける。 カスタマーサポートの対応力。 公式サイトの情報と一致しない案内。 OSのマイナーアップデートを促す通知が届いていたので、週末にアップデートをした。公式サイトにも「すべてのユーザーへ推奨」と書かれている。 ところが、その後、突然不具合が生じた。 ネット上で調べ、自分でいくつか試してみても状況変わらず。翌日にサポート窓口へ問い合...
srcsetとpictureの使い方（レスポンシブ画像指定）はこれでOK。
srcsetとsizesが効かない？ の原因。 以前、srcsetとsizesが効かなかったことがあった。 そのときは、原因はわからなかったが対処方法はわかったので、とりあえず解決用として以下のHTMLコードを記載した。 解決した記述コード。 <picture> <source media="(max-width: 799p...
Chromeのデベロッパーツールで404エラー？
パスにもファイルにも問題ないのに404エラー？ デベロッパーツールのコンソールに不明なパスによるエラー。 前々から気にはなっていたが、作業時間を取られてしまうので無視していた、Chromeのデベロッパーツールのコンソールに出ていたエラー。 ありえない404、かつSEOにも表示にも関係のない画像ファイルに対するものなので放っておいた。一応パスを確認したが問題はな...
引越しなどで、WordPressのメディアが消えた場合の、Moving Media Library。
メディアライブラリが空に！？ WordPressサイトのリニューアル中に。 消えたメディアファイル。 管理画面からのxmlファイル。 WordPressで制作したサイトのリニューアルのため、旧サイトのサーバーの画像類をWP管理画面からxmlファイルでエクスポートし、リニューアル中のテストサーバーのWP管理画面からインポートした。 FTPからのファイルア...
デザイン脳と、運動神経と、子供たちの夢。
絵を描く子供は、比較的運動が苦手となる。 過去を振り返ると、保育園や小学生の頃、絵を描いていたのはいわゆる「運動神経がないひと」だった。逆に言うと、「運動神経があるひと」、例えば同学年で一番足が速いひとは、絵を描いてはいなかった。 神経回路が違うのだ。絵を描くために、足を速く動かす回路は必須ではないように、スポーツの練習に絵を描くことは必須ではない。高校や大学の頃はそれぞれ別の...
BEMとSass。やりすぎなSassやBEMたちと、やりすぎたclassセレクタ。
classセレクタと子孫セレクタ。 職業訓練校の場合。 2014年頃までは、子孫セレクタの使用は普通だった。Webの標準化団体のW3Cがそう策定しているので、自分が講師をしていた職業訓練校でもそのように教えていた。 検定試験用の教科書の場合。 idセレクタや子孫セレクタは検定試験用の教科書に記載されており、実際の試験でも出題されている。おそらく今でもそうだろ...
Appleの社名の由来が、リンゴ・スターである理由？
デザインに徹底的にこだわるApple社の由来。 。 Apple。 高機能なMacintoshに始まり、より洗練されたiMac、iPod、iPhone、iPadなどを発表したApple社。 その名前の由来は諸説ある。 Photo by Ri_Ya 長髪と丸メガネ。 Appleの由来。 それは、創業者の３人のうちの１人であ...
srcsetとsizesがうまく表示され、かつValidになる方法。
imgタグのsrcsetとsizesが効かない？ スマホとパソコンで画像が切り替わらない。 なぜだろう。。 MDNで確認。 MDNのサイトに記載されていた、レスポンシブデザイン用の画像指定のサンプルソースコード。 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w...
SVGアイコンの色を変える方法。（エディタでシンプルに。）
SVG？ SVGアイコン。 多くのフリー素材サイトにある、便利で手軽なアイコンやピクトグラム。 IllustratorやPhotoshop等で自作しなくても、簡単にアイコンが使える時代になった。 なかでもSVG形式のアイコンは、Webサイトで使用するアイコン画像として非常に優れている。 ベクター形式なので、ディスプレイの解像度や大きさによる劣化がなく、かつ軽い...
AtomとGitHubの連携。（コマンドレスで。）
Atom いまさらながら、Atomの使い方を勉強している。ネットで調べていると、使い方について教えてくれるサイトが出てくる。とにかく、とっかかりが欲しい。 Howponさんサイト（https://howpon.com/6391）では、 「AtomがGitHubと連動できるようになると、エディタで編集したものをクリックのみでGitHubに同期まで行えるようになって非常に便利です...