プラグイン無しでアクティブパラメータを付与して投稿ページのテンプレートを出し分けする方法
WordPressのカスタマイズを行っていると、記事の内容によってページの出し分けをするためにページのテンプレートをいじり、手動でテンプレートを指定することがあります。 ですが、アクティブパラメータをURLに付与して、一 …
HTMLとCSSのコピペでできるmp4の背景動画のスニペット
このページで紹介しているスニペットが、このページの背景で実装しています。 このページのスニペットは背景用の物ですが、スニペットをいじることでFVにも使うことが可能です。 FV(ファーストビュー)に動画を使ったサイトは、動 …
jQueryのコピペでタイル状のグリッドレイアウトができるRect Grid Helper
CSSの grid-column と、grid-row を使うなどして、タイル状に敷き詰めるグリッドレイアウトのデザインを表現することができます。 ですが、一部カラム数を変更しようと思うと全体の数を見比べて計算する必要が …
プラグインなしでWordPressのログイン画面にBasic認証を設定する方法
WordPressのログイン画面URLへのアクセスは簡単で、ウェブサイトのURLの末尾に/admin/（例：www.sample.jp/admin/）または/login/（例：www.sample.jp/login/）と …
HTMLとCSSのコピペでできるグローデザインのボタン10個
クリエイティブでは、テクノやサイバーパンクのネオン街に出てきそうな世界観のもので、特にDribbbleの海外のサイトで見かけるデザインが、Glow(グロー)です。 WEBサイトでの実装では、奥行きや立体感が自然と出やすい …
プラグインなしでWordPressダッシュボードをカスタマイズするスニペット
よく使うショートコードや、リンク先はメモ帳やブラウザのお気に入りに登録するなどして、すぐ使えるようにしておくことがありますが、サイトの更新で特に頻繁に使うものは、WordPressの管理画面のどこかに設置しておくと便利で …
jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペット
よく見かける、上下のスクロールに応じてヘッダーを表示したり・非表示にしたりの仕組みは、jQueryで簡単に実装することができ、このページに実装しているものが、実際にコピペのコードを貼り付けした仕様です。 そこで今回は、j …
jQueryのコピペでできるアコーディオンヘッダーのレスポンシブデザインテンプレート
アコーディオンは、クリックするとそれに対応したコンテンツが表示され、もう一度クリックすることで閉じるUIです。 PCのヘッダー周りは、スペースがある為あえてアコーディオンにする必要はないかもしれませんが、スマホのヘッダー …
jQueryのコピペでcookieを使って初回アクセス時にモーダルを表示させるスニペット
cookieを使ってコンテンツを表示したりしなかったりなど、動的コンテンツの奥行きを自由にすることができますが、書き込む際の文字列を指定したりと結構手間も多くなりがちです。 ですが、jQueryの「jquery.cook …
jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット
それぞれのオブジェクトまでスクロールした時に、classをつけたオブジェクトにアニメーションを付与させます。 このアニメーションは、別途jQueryのライブラリなどを使用することなく、簡単で数行程度のjQueryとCSS …
