![ハッシュ](https://design-pull.com/wp-content/uploads/2022/11/hash-img-640x360.jpg)
トップへ戻るボタンをクリックした際にURLにハッシュ「#」がついてしまう【解決方法】
プル デザイン 原神攻略サイト
トップに戻るボタンをクリックするとURLの末尾に#がついてしまう現象を#を付けない処理方法について解説します。 右下にあるボタンをク …![PWA機能を導入](https://design-pull.com/wp-content/uploads/2022/11/pwa-640x360.jpg)
WebサイトにPWA機能を導入する方法 - (Service Workerは未対応)【PWA対応】
プル デザイン 原神攻略サイト
PWAとは「Progressive Web Apps」の略で、Webサイトのコンテンツをアプリのようにスマートフォンで扱える為、アプリとし …![脆弱性を含んだフロントエンド](https://design-pull.com/wp-content/uploads/2022/10/js-library-640x360.jpg)
既知のセキュリティの脆弱性を含んだライブラリが含まれています -【バージョン変更】
プル デザイン 原神攻略サイト
PageSpeed Insightsのチェックで検出された問題点、既知のセキュリティの脆弱性を含んだフロントエンドの JavaScript …![代用テキスト](https://design-pull.com/wp-content/uploads/2022/10/aria-label-640x360.jpg)
リンクに識別可能な名前が指定されていません - 代替テキストを使用する方法【aria-label属性】
プル デザイン 原神攻略サイト
PageSpeed Insightsのチェックで検出された問題点リンクに識別可能な名前が指定されていませんの解決方法についてです。 …![](https://design-pull.com/wp-content/uploads/2022/10/darkmode_js-640x360.jpg)
Webサイトをワンクリックでダークモードに切り替えるボタン実装【Darkmode.Js】
プル デザイン 原神攻略サイト
Webサイト・Adobeソフト・VSCodeコーディングなどなど自身が使っているツールはダークモードで使っています。個人的に背景色は黒かグ …![アイキャッチ画像取得](https://design-pull.com/wp-content/uploads/2022/10/priority-image-640x360.jpg)
アイキャッチ画像が設定されてなくても、記事内の画像をアイキャッチ画像に設定する方法【優先順位を決める】
プル デザイン 原神攻略サイト
WordPressの投稿でアイキャッチ画像が設定されていない場合でも「記事内の画像をアイキャッチ画像に指定する」「アイキャッチ画像と記事内 …![アイキャッチ画像を有効化](https://design-pull.com/wp-content/uploads/2022/10/featured-image-640x360.jpg)
wordpressでアイキャッチ画像を設定できない場合の対処法(ブロックエディタと旧エディター対応)
プル デザイン 原神攻略サイト
有料テーマなどを使っている場合は、元々アイキャッチ画像が有効化されていて、画像を入れるだけで適応されますが、HTMLからPHPに変更し自作 …![クリックイベント](https://design-pull.com/wp-content/uploads/2022/10/click_jquery-640x360.jpg)
jQueryのclick()イベント処理の使い方を解説【ボタンをクリックして色を変更する】
プル デザイン 原神攻略サイト
マウスのクリック操作でイベントを実行することができるclick()についての解説になります。 ▪.click()実装例⇩ …![scrollify.js](https://design-pull.com/wp-content/uploads/2022/10/pull-scrollfy-640x360.jpg)
セクションごとにスクロールさせる方法 - scrollfy.jsの使い方【jQuery】
プル デザイン 原神攻略サイト
各セクションごとにスクロールさせる為には、jQueryを使用して動作させる必要があります。 そこで簡単に実装が可能なjQueryのプ …![Lorem Picsum](https://design-pull.com/wp-content/uploads/2022/09/lorem-picsum-1-640x360.jpg)
ランダムで画像を取得し表示させることができるサイト「Lorem Picsum」【URLでimg取得】
プル デザイン 原神攻略サイト
Web製作でサンプルとして画像を入れておきたい時、表示させる画像を毎回ランダムで表示させたい。 画像をローカルにダウンロードせずに、 …![JINアニメーション](https://design-pull.com/wp-content/uploads/2022/09/jin-customization-640x360.jpg)
JINテーマでページネーションにアニメーションを追加する方法(フワッと順番に表示させる)【jQuery】
プル デザイン 原神攻略サイト
JINテーマを独自にカスタマイズした中で今回はページネーションにアニメーションを追加しましたので紹介します。 ▪アニメーション動作は …![スクロールバーをカスタマイズ](https://design-pull.com/wp-content/uploads/2022/09/webkit-scrollbar-640x360.jpg)
スクロールバー(scrollbar)のデザインを変更する方法【CSS】
プル デザイン 原神攻略サイト
CSSのみでスクロールバーをカスタマイズする方法について解説します。ブラウザで一番右側に表示されているのがスクロールバー。 Goog …![scrdown](https://design-pull.com/wp-content/uploads/2022/09/scrdown-640x360.jpg)
scrdownの実装方法-CSSでアニメーション「animation」と「transition」について【@keyframesの指定方法】
プル デザイン 原神攻略サイト
手軽なアニメーションとしてWeb上でマウスを乗せた場合の:hoverアニメーションをつける場合はCSSプロパティtransitionを使っ …![swiper_html](https://design-pull.com/wp-content/uploads/2022/09/swiper_html-640x360.jpg)
フルスクリーントップ画像をズームしながら全画面で切り替えSwiper組み合わせハンバーガーメニュー付き
プル デザイン 原神攻略サイト
フルスクリーントップ画像を「ズームしながら画像を切り替える」Swiper導入と、「ハンバーガーメニュー」を同時にコピーペーストで実装できる …![swiper](https://design-pull.com/wp-content/uploads/2022/09/swiper-640x360.jpg)
Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】
プル デザイン 原神攻略サイト
スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。 外部 …![Yaku han JP](https://design-pull.com/wp-content/uploads/2022/09/half-size-640x360.jpg)
約物半角専用のWebフォント「Yaku han JP」記号の字詰めを整える【Web Font】
プル デザイン 原神攻略サイト
デザイナーにとって一番難しいとされる「文字詰め」かなり気を使い調整します。 Photoshopやillustratorで作るグラフィ …![トップに戻るボタン](https://design-pull.com/wp-content/uploads/2022/09/top-button-640x360.jpg)
スクロールすると下から出てくる「トップに戻るボタン」をコピペで実装可能【jQueryで作る方法】
プル デザイン 原神攻略サイト
Webサイトの一番上にいる場合は「トップに戻るボタン」が隠れている状態ですが、下にスクロールすると、下から出てくるように設定。 コピ …![CodePen(コードペン)で画像を取得し表示させる方法](https://design-pull.com/wp-content/uploads/2022/09/img-codepen-640x360.jpg)
CodePen(コードペン)で画像を取得し表示させる方法【Googleドライブ】
プル デザイン 原神攻略サイト
CodePenで自身が指定した画像を表示させるためには、Googleドライブが必要でGoogleドライブに画像をアップロードし、その画像を …![カーソルホバー時、ボタン:hoverで背景色が変化するCSSのみで表現](https://design-pull.com/wp-content/uploads/2022/09/button-design-640x360.jpg)
カーソルホバー時、ボタン:hoverで背景色が変化するCSSのみで表現【HTML・CSS】
プル デザイン 原神攻略サイト
WEBデザインに必要なホバー時のボタン:hoverで背景色が変化をCSSのみで様々な動きを加えました。カーソルが要素に乗った際に動作します …![CSSクラス名の命名や短縮名【まとめ一覧】](https://design-pull.com/wp-content/uploads/2022/09/naming-640x360.jpg)
CSSクラス名の命名や短縮名【まとめ一覧】
プル デザイン 原神攻略サイト
よく使われるクラス名を一覧にしてまとめました。 英語が苦手な方でも読み方と意味も付けています。class名は自由に命名した場合、他の人が見て理解できる単語にしておかないと後 …