閉じるボタン付きの注意ボックスを設置する方法
固定ページや投稿ページに「閉じるボタン付きの注意ボックス」を設置すると、重要なお知らせや注意点を目立たせながら、ユーザーが自由に閉じられるようになります。ここでは、クラシックエディタで簡単に設置できる方法をご紹介します。 […]
全幅で流れる画像を作る方法
以下のコードを使うと、画面いっぱいの横幅で、画像がゆっくりと左右に流れる「無限スライダー」を作ることができます。 HTMLコード <div class="flow-banner" id=" […]
ページの途中で全幅コンテンツを掲載する方法（Lightning対応）
WordPressで固定ページや投稿ページを作る際、通常はテーマの中央幅にコンテンツが制限されます。しかし、ページの途中で「画面の端から端まで広がる全幅コンテンツ」を掲載したい場合があります。function.phpにコ […]
画面の右横にフローティングバナーを設置する方法
画面の右横にフローティングバナーを設置する方法 この記事では、画面の右端に常に表示される「フローティングバナー」をHTML＋CSSで設置する方法を解説します。 スクロールしても消えないため、お問い合わせ・LINE登録・キ […]
JavaScriptを使わず、HTML＋CSSだけで棒グラフを作る方法
Webサイトで売上やアクセス数などのデータを視覚的に見せたい場合、 グラフを使うと一目で理解できます。 多くの人は「Chart.js」などのJavaScriptライブラリを使いますが、 今回はあえてJavaScriptを […]
tableタグの見出しで昇順、降順の並び替えをする方法
この記事では、テーブルの列をクリックすると昇順・降順で並び替えできるHTML＋JavaScriptの実装方法を紹介します。 実装のポイント HTMLでテーブルを作成し、function.phpとJavaScriptでクリ […]
フロントエンドから簡単に記事投稿できるフォーム（掲示板）作成方法
この記事では、WordPressの管理画面にアクセスせず、ユーザーがフロントエンドから記事を投稿できるフォームを作成する方法と、削除パスワードを使って安全に削除できる仕組みを紹介します。 ショートコード [fr […]
dl・dt・ddで作る会社概要ページでよく使われる定義リストの作り方
企業サイトの「会社概要」ページでは、表組みのように左に項目、右に内容を並べることが多いです。 サンプルHTML <div class="company-profile"> <dl> <div […]
フローティングボタンで常時表示されるCTA（お問い合わせ）を設置する方法
この記事では、スクロールに応じて表示されるフローティングCTAボタン（お問い合わせ・予約）を設置する方法を紹介します。 実装のポイント Lightningテーマのフッター上部のウィジェットにHTMLを貼り付けCSSで指定 […]
画像が横にスライドするカルーセル・スライダーを設置する方法
今回は、WordPressでプラグインを使わずに横スライドのカルーセル・スライダーを作る方法を紹介します。 任意の固定画像だけで横スライドカルーセルを作る方法です。投稿や固定ページに簡単に設置でき、テーマに合わせたCSS […]
画像が切り替わるカルーセル・スライダーを設置する方法
WordPressサイトでカルーセル・スライダーを表示したいとき、プラグインに頼らなくてもPHP＋JavaScript＋CSSだけで実装できます。 投稿や固定ページにショートコードで呼び出せるようにしておけば、軽量かつ自 […]
カスタム投稿タイプを作成しショートコードでお知らせ欄を作る方法
通常のブログ記事とお知らせ記事を完全に分けたい場合は、カスタム投稿タイプを作成するのが最適です。 以下の手順で専用お知らせ欄を作成できます。 functions.php にコードを追加 //--------------- […]
ランダム記事リストを固定ページにショートコードで表示する方法
ランダム記事リストをショートコード（件数・列数・抜粋・画像サイズ変更可能）で表示します。 //------------------------------------------- // ランダム記事ショートコード // […]
任意のHTMLブロックをショートコードで挿入する方法
この記事では、WordPressに[ショートコード]を追加して、任意のHTMLブロックを記事本文に挿入する方法を解説します。 よく使う広告バナー、定型文、注意ボックスなどをショートコード化すると、管理 […]