CSS– category –
-
SafariのみにCSSを適用させる方法【Chrome・Firefox・Edgeも】
ブラウザによってうまく表示されないことはありますが、どうしてもSafariだけ調整しないといけない…というときの対処法を、Chrome・Firefox・Edgeなど他のブラウザも含めてまとめてみました。【Safariにのみ適用させるCSS】_:lang(x)+_:-webkit-full-scree... -
CSS「transition」プロパティでアニメーション
Webサイトを見ていると、マウスホバーで色が変わったり動いたりするボタンをよく見かけます。「こんなアニメーションを、自分のサイトにも取り入れたいな」と思ったことはありませんか？CSSだけで簡単にアニメーションができるんです。今回はそのひとつ「t... -
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】CSSで影をつけるのによく使われるのがbox-shadowです。要素のボックス全体（ボーダーとその内側）に対して影をつけます。.sampl... -
レスポンシブの単位は『vh,vw』が便利！『%』より使えるCSSの単位
レスポンシブ全盛の今、CSSで要素の幅や高さを指定するときの単位に px よりも % を使うことが増えたと思います。でも、もっと便利な単位がありました。vh,vw。いやー不勉強でした…ということで備忘録的にまとめたいと思います。ブラウザの大きさを基準と... -
2ステップで投稿記事に『何分で読めます』を表示する方法 コピペOK
いろんなブログで見かける『この記事は約○分で読めます』。もともと標準で実装しているテーマもありますが、Tobiが（2019年現在）使用しているテーマ【SWALLOW】にはありません。無くても問題ないのですが、アクセシビリティを考えるとあったほうがいいの... -
2ステップでアドセンスをセンタリング（中央寄せ）する方法
アドセンス広告をそのまま普通に貼ると、デフォルトでは右揃えになってしまい不格好です。そこで、非推奨のセンタータグを使わずに、中央寄せする方法を紹介します。コピペによる2ステップで終わりますので、3分もかからず完了です。とっても簡単です。デ...
1