ChatGPTを使用してWordpressのタグにカラー設定の項目を追加する方法を聞いてみたら、functions.phpに記述するPHPコードがばっちり返ってきました。

よくやってしまいがちな日本語タイトルのままのブログ記事投稿。 一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。 ですので、気づい…

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による遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。

独自にココナラのビデオチャットに画面共有機能を追加するGoogleChrome拡張機能を作成しました！ 現在β版のココナラビデオチャット機能は画面共有が出来ないため、画面を見ながらのレクチャーが必要な教育、指導、占い、案内、ご相談などの分野で困ります。 …

▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。 webabc.hatenablog.jp 今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。 よくある模…

模写コーディングに挑戦する前に、さらにシンプルなhtml/cssでコーディングできる練習用オリジナルデザインテンプレートを作成しました。 非常に簡素な構成なので、初心者の方のWebサイト作成入門に最適です。

前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。 ▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。 we…

「模写コーディングって難しい」、「やり方が分からない」 と、HTML/CSSを学んだ次のステップでつまづく方は多いと思います。 まず、模写コーディングとは 「既存のサイトの見た目をそっくりそのまま、自力でHTML/CSS/JSなどコーディングをして再現する」 こ…

Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。 HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方…

前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。 webabc.hatenablog.jp 年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。 Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。 入…

レッスンの質問への返答や、案件での調べ物などメモがわりに始めた、当ABCウェブエンジニアblog。 10月初旬から2020年の大晦日の当記事執筆時点まで約3ヶ月。ぼちぼち更新して50記事弱となりました。 ３ヶ月のアクセス合計は5000弱。 始めた当初はアクセスも…

Webブラウザ界の問題児Internet Explorer、通称IE。 サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。 こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応…

TwitterやFacebookなど大手SNSのアイキャッチともいえるOGPに最適とされる画像の縦横比は何対何がベストなのか。 今回はOGPに設定すべき画像の縦横の比率(アスペクト比)について調査してみたので、記したいと思います。

SEOのひとつに、サイトのURLの正規化というものがあります。 サーバーによって初期設定では同じ内容で別のURLが混在してしまっているので、wwwの有無、SSL接続の有無を統一することを言います。 http://サイト名.com https://サイト名.com http://www.サイト…

font-weight: boldが効かない！そんな、思うように文字の太さを調整出来ない時、太字を適用させる対処法「text-shadow」を用いる方法と「ウェブフォント」を用いる方法、２つをご紹介します。

動作が軽快かつ、様々な拡張機能が使えて便利なコードエディタ「Visual Studio Code」、通称VScode。 とても使いやすいですが、たまに予期せぬ動作で困ることもあったりします。 今回はGitLensがサイドバーから消えて困った時の対処法です。

レスポンシブにスマホ対応する際にviewport設定が何故必要なのか、理解するためにはスマホの画面の解像度がどのようになっているか理解する必要があります。 この設定についての理解がおろそかなまま、レスポンシブなコーディングをしようとしていてつまづい…

多くの方がご愛用の「Googleマップ」。 お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。 このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Ma…

aタグのmailto属性を使って件名や本文定型文、CC、BCC入力済の状態でメールソフトを起動する方法を解説しています。WebサイトのリンクからOutlookなどOS標準メーラーが起動するようにできます。