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

DESIGN NOTES

WordPressやCSS、調べたことをまとめておけばスピードアップできるかなぁ。
制作メモをマイペースでアップしています。

よく見るページ

よく使うWordPressテンプレートタグ

2021/01/11

よく使うWordPressテンプレートタグ

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

特定のページだけに表示させたい! よく使う条件分岐

2021/01/11

特定のページだけに表示させたい! よく使う条件分岐

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

テキストに縁や影をつける

2020/05/28

テキストに縁や影をつける

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

CSS Transitionで手軽にアニメーションを取り入れたい

2019/08/09

CSS Transitionで手軽にアニメーションを取り入れたい

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


最近の記事

【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

2022/07/28

【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

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

vivus.jsを使って文字のアニメーションを作りたい!

2022/07/13

vivus.jsを使って文字のアニメーションを作りたい!

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

メインビジュアルをブラウザ画面ぴったりになるように調整したい!

2022/06/23

メインビジュアルをブラウザ画面ぴったりになるように調整したい!

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

最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

2022/05/29

最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

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

Google Fontsの好きな書体を気軽に使いたい!コード記述方法でページ軽量化も

2022/05/05

Google Fontsの好きな書体を気軽に使いたい!コード記述方法でページ軽量化も

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

「ダークモード」対応の注意点と手順を知りたい!

2022/04/18

「ダークモード」対応の注意点と手順を知りたい!

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

バージョンアップしたContact Form 7 に入力確認画面をつけたい!

2022/03/14

バージョンアップしたContact Form 7 に入力確認画面をつけたい!

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

【MW WP Form】ラジオボタンの選択項目によって分岐させたい!

2022/01/08

【MW WP Form】ラジオボタンの選択項目によって分岐させたい!

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