ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

CSSテキスト無限ループアニメーション

CSSだけでテキスト無限ループアニメーションさせる方法

CSSによるテキストの無限ループ アニメーションについて、備忘録として掲載しておきます。
テキストのみならず画像などでも対応可能ですので、同じような事を行いたいどなたかの参考になれば幸いです。

続きを読む

ChatGPTを使用してWordpressのタグにカラー設定項目を追加する方法を聞いてみた

ChatGPTにWordpressカスタマイズのコードを書かせてみた 今流行りの自然言語を理解するAIによる会話チャットツール 「ChatGPT」 超優秀で、既にかなり仕事に活用させて頂いています。

そこでお題にある通り、こんなの出来るかなってことで下調べがてらChatGPTにタグのカラー項目追加について聞いてみたところ、サクッと返答を返してくれました。
実際に動くのかどうか、コードも含めて見ていきましょう。

続きを読む

URLを間違えたので正しくリダイレクトさせるJavaScript (はてなブログの場合)

はてなブログでURLを間違って投稿した時503リダイレクトさせるJavaScript解説 よくやってしまいがちな日本語タイトルのままのブログ記事投稿。
一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。
ですので、気づいたらURLを正しく半角英数の自然なものに変更し、JavaScriptを使ってリダイレクトさせています。

その際につけてもらったはてなスターが消えてしまうのは残念で申し訳ないところではありますが、いた仕方無し。
具体的な方法を知りたい方は是非当記事をご覧頂ければ幸いです。

続きを読む

ContactForm7の条件分岐つきフォームで確認画面実装

ContactForm7と条件分岐Conditional Fields、確認画面Muti-Step Formプラグイン併用問題

Wordpressで一般的によく使われているフォームプラグインとして有名な
「Contactform7」

こちらに確認画面や完了画面を追加するプラグインとして
「Contact Form 7 Multi-Step Forms」
が割と有名かと思います。

 

さらに条件分岐付きのフォームにするためには
「Conditional Fields for Contact Form 7」
というプラグインがよく使われているのですが、これとMulti-Step Formsのプラグインの併用で少々つまづきがあったので、解決法も合わせてメモしておきたいと思います。

続きを読む

マイク問題?M1チップ搭載MacBook Air 2020年モデルの音声ノイズ検証と問題解決方法

M1チップ搭載Macbook Air2020年モデルのマイク音声ノイズ問題。Krispノイズ除去で解決

AppleシリコンことM1チップ搭載のMacが2020年発表されて話題になりました。

 

 

 

私は長らく2014年のMacbook Proを使っていましたが、ちょっと古くなったので売却。

今回M1チップのパフォーマンスがどうやら凄いらしいということで惹かれて新規購入しました。

 

巷で言われているように、バッテリーの持ちや動作の軽快さは非常に素晴らしいもので、M1にネイティブ対応していないアプリの互換起動も特に問題なく満足していました。

 

ただ一点、マイクに問題がありました。

マイクの位置の関係で、キー操作の際にノイズが乗るという問題です。

些細なことかもしれませんが、Web会議など頻繁に内臓マイクを使用される方はかなり致命的。

 

どのようなノイズかの詳細、また、問題の回避方法を含めてこちらの記事では解説したいと思います。

Web会議など音声通話をよくする方でM1チップ搭載Macを購入検討されている方は、是非検討材料にして頂ければと思います

続きを読む

コードに使う大なり小なり、各かっこなど記号の読み方

コーディングに使う括弧<>{}<span data-unlink>や$#"!'などの記号の正式名称、正しい読み方

コーディングには「<>」←こんな大なり小なりに使う記号や「{}」←こんな波型のかっこ、「」←こういった角ばったかっこなど色々な記号が登場しますよね。

他にも「:」や「;」、「"」「'」なんかも常用します。

 

このあたりいつも使っているけれどなんと呼べばいいのか、正しい読み方はなんなのかを今回紹介したいと思います。

いつもレッスン時も伝わりやすいよう「ちょんちょん」とか「タグのカッコ」とか呼んでいますが、正しい読み方も覚えてさらっと使えるようになりましょう。

続きを読む