HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ! / いがわ

.

Memos

HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ!

HTML5やCSS3、SEOなどの先端技術を無料ツールで。 今年2021年、5年ほど前に制作したサイトのリニューアルを承った。前回もリニューアルをしたので、2度目のリニューアルだ。ありがたいことに去年からお願いをされていたのだが、私の目の不調により待ってもらっていた。 だいぶ出来上がったので、ちょっと振り返ってみる。 マイク英会話教室札幌さまのサイト > ...

htmlとcssによるカラムレイアウト。

clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。 例えば、次のように。 .clearFloat{ clear: both; ...

WordPressの検索ハイライト表示の仕方。

検索キーワードでのハイライト表示はとても簡単。 WordPressの検索結果をハイライト表示で。 見た目でもわかりやすく。 WordPressの検索機能は比較的簡単に設置できる。ただ、デフォルトの状態だと少々検索結果が分かりにくい。 そこで何か良い方法はないものかと探していたところ、functions.phpに下記の記述を追加するだけで、検索キーワードのハイライト表...

サポート

20年遅れのサポート対応を受ける。 OSのマイナーアップデートを促す通知が届いていたので、週末にアップデートをした。公式サイトにも「すべてのユーザーへ推奨」と書かれている。 ところが、その後、突然不具合が生じた。 ネット上で調べ、自分でいくつか試してみても状況変わらず。翌日にサポート窓口へ問い合わせをした。最初に出た対応の方は親切で話しやすかった。OSの再インストールを提...

デベロッパーツールで404エラー?

パスにもファイルにも問題ないのに404エラー? デベロッパーツールのコンソールに不明なパスによるエラー。 前々から気にはなっていたが、作業時間を取られてしまうので無視していた、Chromeのデベロッパーツールのコンソールに出ていたエラー。 ありえない404、かつSEOにも表示にも関係のない画像ファイルに対するものなので放っておいた。一応パスを確認したが問題はな...

WordPressのメディアファイルが消えた?

メディアライブラリが空に!? WordPressサイトのリニューアル中に。 消えたメディアファイル。 管理画面からのxmlファイル。 WordPressで制作したサイトのリニューアルのため、旧サイトのサーバーの画像類をWP管理画面からxmlファイルでエクスポートし、リニューアル中のテストサーバーのWP管理画面からインポートした。 FTPからのファイルア...

江戸時代のデザイン、浮世絵。葛飾北斎 富嶽三十六景 神奈川沖浪裏。

絵を描く子供は、比較的運動が苦手となる。 過去を振り返ると、保育園や小学生の頃、絵を描いていたのはいわゆる「運動神経がないひと」だった。逆に言うと、「運動神経があるひと」、例えば同学年で一番足が速いひとは、絵を描いてはいなかった。 神経回路が違うのだ。絵を描くために、足を速く動かす回路は必須ではないように、スポーツの練習に絵を描くことは必須ではない。高校や大学の頃はそれぞれ別の...

HTMLとCSS。やりすぎなSassやBEM。

classセレクタと子孫セレクタ。 職業訓練校の場合。 2014年頃までは、子孫セレクタの使用は普通だった。Webの標準化団体のW3Cがそう策定しているので、自分が講師をしていた職業訓練校でもそのように教えていた。 検定試験用の教科書の場合。 idセレクタや子孫セレクタは検定試験用の教科書に記載されており、実際の試験でも出題されている。おそらく今でもそうだろ...

SVGアイコンの色を変える方法。

SVG? SVGアイコン。 多くのフリー素材サイトにある、便利で手軽なアイコンやピクトグラム。 IllustratorやPhotoshop等で自作しなくても、簡単にアイコンが使える時代になった。 なかでもSVG形式のアイコンは、Webサイトで使用するアイコン画像として非常に優れている。 ベクター形式なので、ディスプレイの解像度や大きさによる劣化がなく、かつ軽い...

AtomとGitHubの連携。

Atom いまさらながら、Atomの使い方を勉強している。ネットで調べていると、使い方について教えてくれるサイトが出てくる。とにかく、とっかかりが欲しい。 Howponさんサイト(https://howpon.com/6391)では、 「AtomがGitHubと連動できるようになると、エディタで編集したものをクリックのみでGitHubに同期まで行えるようになって非常に便利です...