トップへ戻るボタンをクリックした際にURLにハッシュ「#」がついてしまう【解決方法】
プル デザイン 原神情報サイト
トップに戻るボタンをクリックするとURLの末尾に#がついてしまう現象を#を付けない処理方法について解説します。 右下にあるボタンをク …Webサイトをワンクリックでダークモードに切り替えるボタン実装【Darkmode.Js】
プル デザイン 原神情報サイト
Webサイト・Adobeソフト・VSCodeコーディングなどなど自身が使っているツールはダークモードで使っています。個人的に背景色は黒かグ …アイキャッチ画像が設定されてなくても、記事内の画像をアイキャッチ画像に設定する方法【優先順位を決める】
プル デザイン 原神情報サイト
WordPressの投稿でアイキャッチ画像が設定されていない場合でも「記事内の画像をアイキャッチ画像に指定する」「アイキャッチ画像と記事内 …jQueryのclick()イベント処理の使い方を解説【ボタンをクリックして色を変更する】
プル デザイン 原神情報サイト
マウスのクリック操作でイベントを実行することができるclick()についての解説になります。 ▪.click()実装例⇩ …セクションごとにスクロールさせる方法 - scrollfy.jsの使い方【jQuery】
プル デザイン 原神情報サイト
各セクションごとにスクロールさせる為には、jQueryを使用して動作させる必要があります。 そこで簡単に実装が可能なjQueryのプ …ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方【JavaScript】
プル デザイン 原神情報サイト
端末の幅が狭い場合にハンバーガーメニューを表示しますが、PC版のサイトでもナビゲーションメニューが入りきらなかった時にも使用します。 …【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー
プル デザイン 原神情報サイト
基本の「slickの実装方法」については下記の記事で確認できます。 https://design-pull.com/web-desi …モーダルウィンドウを簡単実装する。jQueryプラグイン【Lightbox2の使い方】
プル デザイン 原神情報サイト
画像をクリックしたらモーダルウィンドウとして表示されるコードの書き方について解説。簡単にモーダルウィンドウを表示できるようにjQueryの …コピペで簡単実装できる!粒子アニメーション生成方法【HTML・CSS・JS】
プル デザイン 原神情報サイト
WEBサイトのトップページで使える粒子アニメーションの作り方について解説します。ほぼコピペで実装可能で用意するのは画像.pngのみなのでコ …WordPressの投稿や記事ページごとに個別のCSSとJSを追加する方法【カスタマイズ】
プル デザイン 原神情報サイト
基本的にトップページや投稿ページは同じCSSとJSを読み込んでいます。なので1つのページ投稿のみに適応したCSSを追加した場合でも、他のペ …Codepenをもっと便利に使うための設定【無料機能】
プル デザイン 原神情報サイト
CodePenで設定しておきたい便利な機能設定についてまとめておきます。無料版での設定ですので、コードの練習に最適ですね。 設定を変 …子テーマでJSを読み込む方法【WordPress】
プル デザイン 原神情報サイト
WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上 …Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】
プル デザイン 原神情報サイト
「自分で書いたコードを共有したい」「記事内にコードを埋め込みたい」「コードのプレビューを表示したい」この悩みを解決してくれる便利な機能が揃 …Slick/全画面でふわっと切り替えスライドショー【jQuery】
プル デザイン 原神情報サイト
スライダープラグイン【slick】を使って全画面スライドショーを実装。 「slickの実装方法」と「slickのカスタマイズ」につい …ハンバーガーメニューをコピペで簡単実装【HTML・CSS・jQuery】
プル デザイン 原神情報サイト
PCなどの大きいモニターサイズでナビゲーションメニューを全部表示できるが、スマホなどの小さいディスプレイでは表示できる面積が狭い為、ヘッダ …