CSS・デザイン– category –
-
【Contact Form 7】スマホで送信ボタンが中央に寄らない！スピナーが原因のズレをCSSで強制的に直す方法
WordPressのお問い合わせフォームプラグイン「Contact Form 7」を使っていると、「パソコンでは綺麗に表示されているのに、スマホで見ると送信ボタンが左にズレている」という現象に悩まされることがあります。 text-align: center; を指定しても変わらな... -
CSS「::before」を使った一覧タイトルの「・」実装事例と、共通classの影響範囲を限定する実装の注意点
制作概要と技術 既存サイトの実績一覧タイトルの視認性向上が目的。シンプルな装飾ながら、汎用性の高い疑似要素 ::beforeを活用し、デグレード（既存機能の不具合）を徹底的に回避したCSS実装を行いました。 実装上の課題 タイトルに使われているclassが... -
【強化書：STEP①】基本レイアウト
一番簡単なレスポンシブ 一段組みの可変レイアウト シンプルな１カラム シンプルな１カラムのボックスがブラウザ幅に合わせて伸縮します。 <div class="container-1"> <p>ここにテキストが入ります。ここにテキストが入ります。ここ... -
【reCAPTCHA】Contact Form 7で設定後に表示されるロゴを非表示にする！WordPressサイトでの設定を初心者向けに解説
閲覧ありがとうございます。 ページテーマ Google公式の方法でreCAPTCHAを非表示にする reCAPTCHAを導入できたけどロゴがボタンと被ってる・・・ 表示を消す方法あるのかな？ ロゴを消していいの？ そんな問題を解決します。 \ このサイトで利用しています... -
【WordPress】javascriptを使う方法をSWELLとLightningのテーマ別に手順を説明（簡単なテストもご用意）
閲覧ありがとうございます。 ページテーマ javascriptを使えるようにしよう！ Javascriptを使ってアニメーションのタイミングを変えたい！ Javascriptを使える環境を作りたい そんな問題解決につながれば嬉しいです。 \ このサイトで利用しています / おす... -
【WordPress】get_template_directory_uri()とget_stylesheet_directory_uri()の違い
閲覧ありがとうございます。 ページテーマ WordpressでURLを呼び出しているのに動かないを解消 ｊｓを使用したくてfunction.phpにコードを書いたのに動かない… そんな問題解決につながれば嬉しいです。 \ このサイトで利用しています / おすすめテーマ お... -
【cording】「cubic-bezier」でanimation-timing-functionの表現の幅を広げよう
閲覧ありがとうございます。 ページテーマ CSSアニメーションのスピードを操る！ アニメーションで来たけど微妙にタイミングが違う… 画面に現れた時にはアニメーションが終わりかけてる… そんな問題の解決につながれば嬉しいです。 「cubic-bezier」とは ... -
【WordPress】メインビジュアルをアニメーション化してみた
閲覧ありがとうございます。 ページテーマ メインビジュアルにアニメーションを追加する 単調なトップ画像に変化をつけたい！ 来訪者の興味を引けるアクションが欲しい！ そんな問題解決につながれば嬉しいです。 こんな感じになりました シンプルなアニメ... -
【WordPress】いろんなCSSアニメーションを取り入れてみました（導入手順とコピペ用コードも）
訪問ありがとうございます。 今回の記事は以前紹介したCSSアニメーションを使って自分のサイトに取り入れたアニメーションの紹介とそのコードをコピペで使えるように載せておきました。 シンプルな動きなのでご自身のサイトにアレンジして使っていだけたら... -
【cording】“calc()”—数値を計算する関数—
calc()は、CSSで数値を計算するための関数です。この関数を使用することで、異なる単位や値を組み合わせて動的に計算した結果をスタイルに適用することができます。特にレスポンシブデザインやレイアウト調整に役立ちます。 calcのイメージ 使用方法 calc(...
