ゆうひblog

HTMLむずかしすぎる。 本当にこの勉強方法で良いのかわからない。 学習やり切っても、稼げるのか。 こんな風に悩んでいる方いませんか。でも大丈夫です。 なぜならば、Web制作は挫折率9割と言われているほど、そもそも継続が難しいことだから。 今回はどう...

初めてWordPressを開設した。 記念すべき一記事目だ。

swiperのページネーションの色と形ってどうやってかえるの？ ページネーションの大きさを変えたり、色を変えたり、はたまた画像に差し替えたり。 swiperのページネーションをカスタマイズする方法を紹介します。 【ページネーションの付け方】 まずはシン...

カード型レイアウトを並べた時に、他の要素に合わせて高さを自動調整できないかな？ See the Pen Untitled by YT (@YT-the-scripter) on CodePen. ボタンがガタガタ..... こんな感じのカード型レイアウトで、ボタンの高さを下揃えにしたい時ってありますよ...

タブを切り替えて、表示させるコンテンツを変えたい こんな感じのタブをクリックするとそれに応じた、文章とか画像が表示されるやつ。 今回はタブアニメーションの実装方法をご紹介します。 【コード】 こちらが実際のコードと挙動です。 タブをクリックす...

discordを使っていて、こんなことないですか？？ あの人が言ってたアドバイスを見たいけど、どこだっけな.... 確か12月末くらいに投稿したんだけど、履歴遡るのめんどくさすぎる.... 自分のメンションだけ、振り返れないかな... これ全部解決できます。 今...

お問い合わせとかでよく使う、プラスアイコンとマイナスアイコンってどうやって作るんだろう？ 質問項目の右端で、クリックするとプラスアイコンとマイナスアイコンが切り替わるサイトってよくあります。 今回は、プラスとマイナスをどうやってcssで表現す...

wordpressで使うfunctions.php そこに記述したjsがなぜか読み込まれなくて詰まったので原因をまとめます。 原因は「<?php wp_footer(); ?>の記述漏れ」でした。 【<?php wp_footer(); ?>の記述漏れ】 wordpressでオリジナルテーマを作成するとき...

桜吹雪が散るローディング画面を作りたい。 See the Pen 5-6 桜が散る by YT (@YT-the-scripter) on CodePen. ↑こんな感じのローディングアニメーションを作りました。(右下の「Rerun」を押すと、リロードされます。) 実際に実装したサイトをご覧ください...

javascriptでスライドショーってどうやって作るんだろう？？ ↓こんな感じで、画像が切り変わるデザインはよくありますよね。 これはswiper.jsというjavascriptのプラグインを使えば簡単に実装できます。 【swiper.jsの使い方】 swiperを使う方法は、以下二...

テスト環境にアップロードしてください。 え...。なんだそれ初めて聞いた...。 テスト環境？？ アップロード？？どこに何を？？ 自分もそんなふうに思って焦りました。 今日はテスト環境にアップロードとは具体的に何をすることなのか、どうすれば良いのか...

FAQで質問をクリックすると、答えがペラッと出てくる実装ってどうやるんだろう。 質問をクリックすると、答えがペラッと出てくるアニメーションってありますよね。 今回は開閉アニメーションの実装方法を紹介します。 【コード】 質問をクリックすると、答...

JavaScriptとjQueryってどっち使うのが良いの？ JavaScriptとjQuery。どっちを使っても同じ実装は実現できる。 ならどっちを使うのが結局良いの？？？比較するまでもなく、コードが短くなるのでjQueryの方が便利かなと思うのですが、今日は改めてどれくら...

セレクトボックスで選択した内容によって、表示テキストを変えたい。 最近セレクトボックスで選択した内容によって、テキストを変えるという実装をしました。 changeイベントを使えば簡単に実装できるですが、少し詰まったのでまとめます。 【実装例】 ま...

静的コーディングが圧倒的に楽になる、EJS。前回は、forEach文で同じ要素を繰り返す方法についてまとめました。 https://yuhi-web.com/2024/12/18/ejs%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%98%e8%bf%b0%e9%87%8f%e3%81%8c3%e5%88%86%e3%81%ae1%e3%81%ab%e3%8...

パスワード入力で文字の表示非表示を切り替えれるようにしたい。 ↓パスワード入力には右端の目のアイコンをクリックすると、　表示非表示を切り替えれるボタンがあります。 こちらの実装も想像以上にシンプルで簡単なので、今日は表示非表示について紹介し...

静的コーディングって大変ですよね。特に長いページだと、HTMLの記述量が多くて混乱する。コード量が多くなると修正漏れも出てきて地獄。 自分もずっと悩んでたのですが、EJSを使い始めてからそのストレスがかなり減りました。EJSは、簡単にいうと静的コー...

クリックで、ページをSNSに投稿する方法は？ ボタンをクリックするとそのページのURL付きで、SNSに投稿できるボタンってありますよね。↓こんな感じのボタン。(Amazonの蟹ですいません。) このSNSボタンを最近実装したので、今日はそれについてまとめます！...

inputが未入力の時に、ボタンを非活性にしたい。 よく入力フォームとかで、必須項目のインプットが未入力だとボタンがグレー色で動かせないサイトってありますよね。↓こんな感じでグレーアウトされてるボタンです。 今日はjavascriptで、inputが未入力の時...

javascriptでモーダルを横からふわっとスライドさせたい。 Webサイトでよくある、ボタンをクリックすると横からふわっとスライドしてくるモーダル。今日はその実装例を紹介します。 【実装例】 さてまずは実装例です。 See the Pen Untitled by 勇飛高松 (...

スクロールしたらヘッダーの色が変化する実装をしたい。 今日はサイト制作でよく出てくる、画面をスクロールしたらヘッダーの色が変化する実装についてです。 初見だと少し難しく感じますが、意外とシンプルに実装できます。 【実装例】 早速実際のコード...

textareaに文字数カウントをつけたい。 画像のように入力する度に文字数がカウントされる実装。 初見だと悩んでしまう実装ですが、Javascriptを使えば結構簡単に実装できます。今日は文字数カウント機能についてまとめます。 【実装例】 早速実装例です。R...

スクロール位置に合わせて、目次がハイライトされる実装をしたい。 zennの目次のように、スクロール位置に合わせてサイドバーの目次のハイライト位置が変わる実装。https://zenn.dev/nondescript/articles/72aabaaeda4e39前回の記事では、本文から目次を動...

WordPressに急にアクセスできなくなった....!まさにこの当ブログにしばらくアクセスできない状況でした。下記のようなエラー画面が出ていた。 特に設定ファイルをいじった覚えもない。そもそも管理画面ここ1週間触ってもいない！ なのに、なぜ急にアクセス...

WordPress管理画面のユーザー名を変える方法ってある？？ ※本記事はLocal（旧 Local by Flywheel）を使用しての変更方法です。 管理画面右上の部分。(セキュリティの観点で黒塗りしてます。) ユーザー画面にいくと「ユーザー名は変更できません。」という...

WordPressのプラグインAdvanced Custom Fieldsでバリデーションを設定したい。(下記画像のように日付チェックを実装したい) 例えば、イベントの開催期日を選択する時は、開始日付と終了日付を入力できます。 でもACFの基本機能では、終了日＞開始日という...

静的コーディングが圧倒的に楽になる、EJS。前回までで、forEachとheaderの共通化についてまとめました。 第3回目の今日は、Web制作必須のbuttonの効率化です。全ページで使うbuttonだけど、場所によってテキストが変わったり色が変わったりと面倒。これを...

静的コーディングが圧倒的に楽になる、EJS。前回は、forEach文で同じ要素を繰り返す方法についてまとめました。 https://yuhi-web.com/2024/12/18/ejs%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%98%e8%bf%b0%e9%87%8f%e3%81%8c3%e5%88%86%e3%81%ae1%e3%81%ab%e3%8...

静的コーディングって大変ですよね。特に長いページだと、HTMLの記述量が多くて混乱する。コード量が多くなると修正漏れも出てきて地獄。 自分もずっと悩んでたのですが、EJSを使い始めてからそのストレスがかなり減りました。EJSは、簡単にいうと静的コー...

今回はRaycastで便利だと思ったコマンドを紹介します。ズバリ「ボタンひとつで複数のサイトを開く方法」についてです。Raycastの基本機能クイックリンクでは基本的に一つのサイトしか開けません。例えば自分は技術ブログを作成するときに、「WordPress」「...

discordを使っていて、こんなことないですか？？ あの人が言ってたアドバイスを見たいけど、どこだっけな.... 確か12月末くらいに投稿したんだけど、履歴遡るのめんどくさすぎる.... 自分のメンションだけ、振り返れないかな... これ全部解決できます。 今...

セレクトボックスで選択した内容によって、表示テキストを変えたい。 最近セレクトボックスで選択した内容によって、テキストを変えるという実装をしました。 changeイベントを使えば簡単に実装できるですが、少し詰まったのでまとめます。 【実装例】 ま...

ホバーした時にSVGアイコンの色を変えたい。 先日SVGアイコンをホバーさせた時に、色を変えるという実装をしました。 色が違う画像を書き出しても良いのですが、ファイルも煩雑になるし冗長です。調べてみると、SVGをインライン形式で書き出すことで対応で...

今日はテキストの左右に均等に直線を引く方法について解説します。タイトルとかで下記の画像のようなデザインってよくありますよね。 ポイントはテキストの長さが変わっても、左右均等で自動調整すること。 実装としてはすごく簡単なので解説します。 【実...

静的コーディングが圧倒的に楽になる、EJS。前回までで、forEachとheaderの共通化についてまとめました。 第3回目の今日は、Web制作必須のbuttonの効率化です。全ページで使うbuttonだけど、場所によってテキストが変わったり色が変わったりと面倒。これを...

静的コーディングが圧倒的に楽になる、EJS。前回は、forEach文で同じ要素を繰り返す方法についてまとめました。 https://yuhi-web.com/2024/12/18/ejs%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%98%e8%bf%b0%e9%87%8f%e3%81%8c3%e5%88%86%e3%81%ae1%e3%81%ab%e3%8...

パスワード入力で文字の表示非表示を切り替えれるようにしたい。 ↓パスワード入力には右端の目のアイコンをクリックすると、　表示非表示を切り替えれるボタンがあります。 こちらの実装も想像以上にシンプルで簡単なので、今日は表示非表示について紹介し...

静的コーディングって大変ですよね。特に長いページだと、HTMLの記述量が多くて混乱する。コード量が多くなると修正漏れも出てきて地獄。 自分もずっと悩んでたのですが、EJSを使い始めてからそのストレスがかなり減りました。EJSは、簡単にいうと静的コー...

textareaに文字数カウントをつけたい。 画像のように入力する度に文字数がカウントされる実装。 初見だと悩んでしまう実装ですが、Javascriptを使えば結構簡単に実装できます。今日は文字数カウント機能についてまとめます。 【実装例】 早速実装例です。R...

ヘッダーとフッターは固定にして、コンテンツだけをスクロールさせたい、 この画像のように、コンテンツ部分だけスクロールさせる実装。 今回は、cssを使ってコンテンツ部分をスクロールさせる方法についてまとめます。 【実際のコード】 それでは実際のコ...

PCの時とスマホの時で、構造を変えることってできるの？ 例えばこんな感じのデザインの時。PCの時は、左と右で2分割。SPの時は、右の青色を挟むようにして並べる。 「村上春樹」と「海辺のカフカ」は親要素があるので、SPで分割できない。どうすれば良いん...