WordPress

Contact Form 7で宛先をカスタムフィールドから取得して動的に変更!効率的なお問い合わせフォームの作成方法

今回紹介する方法では、フォームへのリンクURLに記事のIDをパラメータとして設定します。その後、フォームページにアクセスすると、パラメータから宛先のメールアドレスを動的に取得できるようになります。 これはちょっと特殊なケースかもしれませんが...
HTML/CSS

斜めに伸びる要素を実現するCSSアニメーション

こんにちは!今回は、CSSアニメーションを駆使して、斜め方向に伸びるオブジェクトを作成する方法をご紹介します。このアニメーションは、ユーザーの注目を引くデザインや動的なインタラクションに活用できます。 初学者の方でも簡単に取り組めるように、...
WordPress

WordPressで絞り込み検索機能を実装する方法:セレクトボックスとチェックボックスの2例を紹介!

WordPressで絞り込み検索機能を実装する方法を紹介します。 WordPressで絞り込み検索機能を実装するためには、検索フォームにフィールドを追加し、pre_get_postsアクションフックを使用して、検索結果をフィルタリングする必...
WordPress

WordPressでカテゴリ一覧に記事数を表示する方法:functions.phpを編集せずに任意のカテゴリにも対応!

WordPressのカテゴリ一覧ページに、記事数を表示する方法を紹介します。訪問者がサイト内のカテゴリを探しやすくするために、記事数をカテゴリ名の隣に表示することができます。これにより、どのカテゴリが最も人気があるかを素早く把握することがで...
WordPress

ワードプレスで簡単に実現!記事一覧ページに連番を振る方法とは?|初心者でも分かる手順解説

今回はワードプレスの一覧ページやカテゴリー内で記事に連番を振る方法についてご紹介します。 複数の記事を書いていると、読者にとってはどの記事から読めばいいのか迷ってしまうことがありますよね。そこで、記事に連番を振ることで読者がスムーズに記事を...
WordPress

【WordPress】投稿記事をスライドで表示する方法

サイトのトップページなどにおすすめ記事や新着記事をスライドでかっこよくおしゃれに表示したい際に便利な投稿記事をスライドで表示する方法を紹介します。 記事のサムネイル画像をいくつか並べて横にスッとスライドして切り替えが可能です。 自動再生機能...
WordPress

【WordPress】一覧ページで記事をランダムに表示する

WordPressの一覧ページで記事をランダムに表示する方法を紹介します。 通常のブログサイトだともしかしたらあまり出番はないかもしれませんが、固定の表示順にしたくない場合などに使用することがあります。 メインループを使用する 記事表示用フ...
HTML/CSS

CSSで片側だけ画面幅いっぱいに広げる方法

CSSで片側だけ画面幅いっぱいに広げる方法を紹介します。 片側だけ画面いっぱいに広げることでアクセントを付けるデザインはよく見るので、覚えておくと便利かもしれません。 サンプル サンプルページ HTML <section class="co...
jQuery

指定した位置までスクロールすると追従になるヘッダー

指定した位置までスクロールすると追従になるヘッダーの作り方を紹介します。 比較的よく使うテクニックなので、覚えておいて損はないと思います。 サンプル サンプルページ HTML <header class="header"> <div cla...
HTML/CSS

CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタン

CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタンの作り方を紹介します。 CSSのみでjsは未使用なので簡単・軽量です。 サンプル <a href="/contact/" class="contact-btn sli...