WEB制作– WEB –
-
CSS「transition」プロパティでアニメーション
Webサイトを見ていると、マウスホバーで色が変わったり動いたりするボタンをよく見かけます。「こんなアニメーションを、自分のサイトにも取り入れたいな」と思ったことはありませんか？ CSSだけで簡単にアニメーションができるんです。 今回はそのひとつ... -
Retinaディスプレイで画像がぼやけるときの対策【初心者向け】
MacやiPhone・iPadは、Retina（レティナ）ディスプレイが採用されていて、画面が非常にキレイなことはご承知の通りです。 でもWebサイトを制作したときに、なぜか画像がぼやけてしまうことがありませんか？ 初心者の時につまづいた、この現象の対策をご紹... -
FaviconをWebサイトから取得する方法
サイトリニューアル時、Favicon（ファビコン）をクライアント様から支給してもらえなかったので「リニューアル前のサイトから抜き出したい」というときに行った方法をまとめました。 【Google の API を使えば簡単！】 Googleには、ドメインを入力するとFa... -
未経験からWEBデザイナー！オンラインスクールおすすめ
昨今のコロナ禍において在宅ワークやリモートワークが注目されていますが、そのリモートワークにうってつけの仕事がWEBデザインです。 WEB業界はまだまだ活況で、今後の需要も見込めます。フリーランスや副業・複業・転職を検討している方で、未経験から「... -
Google推奨！reCAPTCHAを消す方法
WordPressのスパム対策として、Googleの「reCAPTCHA V3」はとても便利です。 ただ、お問い合わせ画面の右下にreCAPTCHAのロゴが表示されて少々邪魔に感じます。 とくに、WordPressでお問い合わせフォームを設置するためのプラグイン「Contact Form 7」を使... -
画像の差し替えをCSSで行う方法
WordPressで画像を差し替える必要があって、CSSで簡単に対応できないかと思って調べたことを備忘録的に記事にいたします。 なるべくCSSだけで画像を置き換えたかったのですが、コーディングはCSSまでしかできません！という方にはオススメです。 以下は「○... -
CSSで行間と字間を調整する方法
行間（行高）や字間（文字間隔）は、文章の読みやすさに大きく影響します。 読みづらい文章だと、続けて読みたいと思わないですよね。離脱率やセッション継続時間の低下に繋がりかねません。 きれいなサイトは、文章スペースもスッキリしていて読みやすい... -
CSSを使ってテキストを置き換える方法
WordPressで、カスタマイザーでは変更できないテキストに対して「変更してほしい」とクライアント様からご要望があり、CSSで簡単に対応したときのことを備忘録的にまとめます。 CSSだけでテキストを書き換えることはできないかな？と思ってやってみました... -
CSSで画像や文字に影をつける方法
今回は、CSSで画像や文字などの要素に影をつける方法（ドロップシャドウ）をご紹介します。 【】 CSSで影をつけるのによく使われるのがbox-shadowです。要素のボックス全体（ボーダーとその内側）に対して影をつけます。 .sample { box-shadow:（横に影... -
jQueryでチェックボックスをグループごとに全選択・全解除する方法
今回は、jQueryでチェックボックスを変更する方法をご紹介します。 「チェックボックス、全部チェック入れる・全部チェックを外す、特定のグループを全部チェック入れる・全部チェックを外す、という機能がほしい」というクライアント様のご要望があり、お... -
WordPress必須プラグイン『PuSHPress』の使い方
SEO対策としてGoogleにブログ更新を通知する（インデックスさせる）プラグイン「PuSHPress」の機能と使い方をご紹介します。 -
レスポンシブの単位は『vh,vw』が便利！『%』より使えるCSSの単位
レスポンシブ全盛の今、CSSで要素の幅や高さを指定するときの単位に px よりも % を使うことが増えたと思います。でも、もっと便利な単位がありました。vh,vw。いやー不勉強でした…ということで備忘録的にまとめたいと思います。 【】 vh,vwは、ブラウザ（...
