ウエブ制作デザイン覚え書きDESIGN NOTES

URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。ドメインが変わってもコードの修正なし！ ホームページのU …

phpで使える便利な条件分岐 「トップページだけに表示させたい」「一覧ページだけ変更したい」 そんな時便利なのが条件分岐です。 トップページとその他 <?php if ( is_home() | …

cssでテキストに縁や影をつけます。

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね！

MW WP Formで作る資料ダウンロード用フォーム 先日、お客さまの要望で「名前などを入力してもらってから資料をダウンロードできるような仕組みにしてほしい」というのがありました。 登録すると資料がも …

ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました！ やりたいこと ・Il …

パソコン、スマホ、タブレットでも メインビジュアルが画面いっぱいになるように設定 パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。 画像の左右 …

【プラグイン無し】moreタグ以降はログインで表示させる限定をコンテンツを作成！ 今回はログインフォーム、限定コンテンツについて調べました！ やりたいことは下記になります。 ・コンテンツの最初の数行を …

初心者でもカンタン！Google Fontsを使ってみよう ユーザーの端末によって、作ったサイトの書体が変わるのって、ちょっと残念。 見てくれてる側は、あまり気にしてないかもしれないけど、思ったより細 …

Webサイトの「ダークモード」対応にチャレンジ！ 「ダークモード」とは？ パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」 Contact Form 7をアップデートしたらフォームが動かなくなってしまった！　調べてみると確認画 …

ラジオボタンの選択によって表示・非表示を変える 難しいと思って避けてた案件… 下のサンプルのように、選択したラジオボタンによって表示・非表示を切り変えるフォームを作ります！ 資料請求のラジオボタンで「 …