CSSだけでテキストを無限ループアニメーション可能です。実際のコード例と解説、注意点などまとめて掲載しています。
ChatGPTを使用してWordpressのタグにカラー設定の項目を追加する方法を聞いてみたら、functions.phpに記述するPHPコードがばっちり返ってきました。
よくやってしまいがちな日本語タイトルのままのブログ記事投稿。 一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。 ですので、気づい…
WordpressでContactform7を使用した際の確認/完了画面にMulti-Step Forms、条件分岐にConditional Fieldsを併用した際のうまく動かない問題解決方法。
AppleシリコンことM1チップ搭載のMacが2020年発表されて話題になりました。 // 最新 Apple MacBook Air Apple M1 Chip (13インチPro, 8GB RAM, 512GB SSD) - ゴールド 私は長らく2014年のMacbook Proを使っていましたが、ちょっと古くなったので売却。 今回M…
や$#"!'などの記号の正式名称、正しい読み方" title="" class="hatena-fotolife" itemprop="image" /> コーディングには「<>」←こんな大なり小なりに使う記号や「{}」←こんな波型のかっこ、「」←こういった角ばったかっこなど色々な記号が登場しますよね。 …
Amazon.co.jpのKindleストアで50%オフのセールが開催されています。 インプレスグループフェアとしてIT・デザイン・ビジネス・実用などの電子書籍が2021年2月いっぱいまでお得に購入できるので、特に当ブログ対象のWeb/IT/デザイン系の方、学習中の方は是非…
Photoshop CCで簡単お手軽に矢印を描く方法をキャプチャを交えて解説しています。 Adobe CSからCCまで同じ方法で対応可能です。現在Photoshop 2021バージョン22を用いての解説となっています。
Amazon Kindle UnlimitedをWebデザイナー・エンジニア視点での活用の仕方や、料金・役立つ読み放題の書籍・雑誌などをご紹介。
Web制作初学者向けにVisual Studio Codeの日本語化設定から、おすすめ拡張機能をご紹介。 リアルタイムプレビューできる機能をはじめ、最低限まず入れておくといい拡張機能9選の解説記事です。
デザイナー必須のイラストレーターやフォトショップなど、Adobe Createve Cloudのソフトウェア群。通称アドビCC。 かなり高額のソフトなので、定価よりなるべく安くなる方法で賢く購入していきましょう。 ▼月額のサブスクリプションの他、12ヵ月版がAmazonで…
ネットショップを開きたいという場合、自社サイトに組み込む方法や他社の提供しているサービスと連携する方法など、いくつかパターンがあります。 ショップ開設のご相談の際に、ざっとパターンを比較してお話することもあるので、今回あらためて比較・解説記…
width、height、align、radius、relativeなど間違いがちなHTML/CSSの読み方を、一般的な読まれ方と実際の英語の発音などと照らし合わせてWeb現場で使えるようまとめて解説しています。
面白いサイトがないかリサーチしていると、ふと、「お！」と目を引かれるサイトがありました。 ▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。 www.freestyle-entertainment.co.jp フリースタイルエンターテイメントさん…
VScodeの設定の同期機能を使えば、拡張機能やUI設定などを、新しいデバイスへまるごと移行出来ます。 簡単便利な機能をキャプチャを交えて解説した記事ですのでお役に立てれば幸いです。
Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説します。 data属性を利用したjavascriptによる遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。
前回に引き続きWordpressのマルチサイト機能をご紹介したいと思います。 ▼前回Part.1ではマルチサイト化におけるメリット・デメリットをご紹介しています。 webabc.hatenablog.jp Part.2の今回は実際に導入する手順を解説していきます。 Wordpressの多言語対…
Wordpressには標準でいくつもサイトを運営できるマルチサイトの機能が備わっています。 通常は無効化されているこのマルチサイト機能を使うと、ひとつのWordpress本体データと、ひとつのデータベース内に異なるサイトを複数持つことが出来ます。 今回はとあ…
Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。 その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。 多言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい…
Wordpressのテーマファイルの各テンプレート内で使う独自の関数をテンプレートタグと呼びます。 例えば記事ループ内で本文を表示させる「the_content()」などもテンプレートタグ。 前回記事で「Wordpressの独自テーマ作成に良く使う関数や記述」ということで…
Wordpressの独自テーマ作成時、カスタマイズによくつかう関数や記述をまとめました。 自分もよく何だっけなと調べながら使用する事も多いので備忘録です。 独自テーマ作成の流れに沿って記述しているので、是非テーマの作成の際などお役立て頂ければと思いま…
前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。 ▼#1からご覧になられる方はこちらからどうぞ。 webabc.hatenablog.jp 模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました…
以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。 webabc.hatenablog.jp webabc.hatenablog.jp 今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。 …
独自にココナラのビデオチャットに画面共有機能を追加するGoogleChrome拡張機能を作成しました！ 現在β版のココナラビデオチャット機能は画面共有が出来ないため、画面を見ながらのレクチャーが必要な教育、指導、占い、案内、ご相談などの分野で困ります。 …
PHPで文字列の置換えを実現する関数、str_replaceと、正規表現を使ったpreg_replace()についての解説記事です。 str_replaceは日本語でも置換え可能です。
▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。 webabc.hatenablog.jp 今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。 よくある模…
模写コーディングに挑戦する前に、さらにシンプルなhtml/cssでコーディングできる練習用オリジナルデザインテンプレートを作成しました。 非常に簡素な構成なので、初心者の方のWebサイト作成入門に最適です。
前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。 ▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。 we…
「模写コーディングって難しい」、「やり方が分からない」 と、HTML/CSSを学んだ次のステップでつまづく方は多いと思います。 まず、模写コーディングとは 「既存のサイトの見た目をそっくりそのまま、自力でHTML/CSS/JSなどコーディングをして再現する」 こ…
CSSのみで実装したハンバーガーメニューの動きのバリエーション5種をサンプルコードとともに解説しています。 ２本線のメニューアイコンから、定番の3本線ハンバーガー。ステンシル風、ブラインド風の動きなど紹介しています。
