WordPress/履歴メニュー項目をボタンの形に変更する方法

WordPress ナビゲーションメニューの特定の項目をボタンの形で表示するように変更できます。この WordPress ブログでは、「お問い合わせ」メニューのスタイルをボタンの形に変えて、他のメニュー項目に比べて目立つようにしてみました。

テーマに関係なく、すべてのテーマで特定のメニュー項目のスタイルを変更する方法と GeneratePress テーマで固定ナビゲーションを使用してナビゲーションメニューを固定する場合は、スクロール時にスタイルを設定する方法について説明します。また、ボーナスとしてティーストーリーでメニューの最後の項目をボタンの形に変更する方法も追加しました。

次の記事では、メニュー項目にアイコンを表示する方法について説明します。

• WordPress メニューにアイコンを追加する（CSSを使用）

WordPress メニュー項目をボタンの形に置き換える

最後に、次のように特定のメニュー項目のスタイルを変更する方法を見てみましょう。

1 デザイン » メニューでスタイルを異ならせるメニュー項目にCSSクラスを指定します。

CSSクラス名は自由に指定します。ここでは jointoday_buttonで指定します。

CSSクラスフィールドが表示されない場合WordPress メニューにカスタムCSSクラスを追加する方法「を参照してください。

2 WordPress 管理者ページ » デザイン（外観） » カスタマイズ » 追加のCSS下のjsfiddleの CSSタブにあるコードを追加します。 ul部分のコードを除いて jointoday_button 関連コードのみを入力してください。

背景色、文字色、文字サイズ、ハーバー時の効果などはお好みに合わせて変更してください。このコードは GeneratePress テーマと Diviテーマでうまくいくことを確認しましたが、テーマによっては一部のスタイルが適用されない場合があります。そのような場合 基本的なCSSを理解すれば解決できます。

上記のコードを適用すると、指定したメニュー項目が緑色のボタンで表示されます。以下のCSSコードを使用すると、紫色のボタンで表示されます。

.jointoday_button a {
	background: linear-gradient(135deg, #8A2BE2, #9370DB, #BA55D3) !important;
	padding: 12px 30px !important;
	font-size: 18px;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.3s ease, box-shadow 0.3s ease !important;
	border: none !important;
	box-shadow: 0 4px 6px rgba(138, 43, 226, 0.2);
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2em !important;
	vertical-align: middle;
}

.jointoday_button a:hover, 
.jointoday_button a:focus {
	background: linear-gradient(135deg, #BA55D3, #9370DB, #8A2BE2) !important;
	box-shadow: 0 6px 12px rgba(138, 43, 226, 0.3);
}

デスクトップデバイスにのみ適用

モバイルデバイスでは、メニュー項目をボタンで表示せず、PC解像度デバイスでのみ適用するようにしたい場合は、CSSメディアクエリを使用します。

@media screen and (min-width: 1024px) {
// CSS 스타일
}

メディアクエリの詳細については、Mozilla ドキュメントの「メディアクエリ初心者ガイド「を参考にしてください。

GeneratePress テーマでスクロールするときにメニュー項目のスタイルを変更する

GeneratePress（ジェネレートプレス）テーマの有料版を使用する場合 WordPress 管理者ページ » デザイン (外観) » Layout » Sticky Navigationでメニューナビゲーションを固定できます。スクロールするとメニューが上部に固定されます。

Hide when scrolling down (下にスクロール時に非表示) オプションを有効にすると、下にスクロールするとメニューが非表示になり、上にスクロールするとメニューが上部に固定され、作り付けがナビゲーションメニューとして表示されます。以前はMediumでこのように機能していましたが、ブログでユーザーが投稿に集中できるようにしたいときにこのオプションを有効にすることができます。

GeneratePress テーマで特定のメニュー項目のスタイルをボタンの形に変更し、スクロール時にヘッダーが固定されたときにそのメニュー項目のスタイルを異なるように設定（例：色、メニューサイズなど変更）したい場合は、以下のjsfiddleに示されているCSSコードを適用できます。あります。

結果 タブをクリックすると、スクロール前のメニュー項目の外観とスクロール時にメニューが上部に固定されているときにメニュー項目の外観を確認できます。

同様に、背景色、テキストカラー、文字サイズなどの詳細なスタイルを調整してください。また、PCにのみ適用したい場合は、CSSメディアクエリを使用できます（上記の「デスクトップデバイスにのみ適用する」セクションを参照）。

ティーストーリーの特定のメニュー項目をボタンの形で表示する

上記で取り上げた内容をティーストーリーにも適用できます。ティーストーリーの場合、スキンによってコードが異なる場合があります。

Odysseyスキンを使用している場合は、次のCSSコードを追加すると、ナビゲーションメニューの最後にあるアイテムのスタイルがボタンの形に変わります。

@media screen and (min-width: 1061px) {
.t_menu_category.last {
	background: linear-gradient(135deg, #006400, #228B22, #32CD32) !important;
	padding: 12px 30px !important;
	font-size: 18px;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.3s ease, box-shadow 0.3s ease !important;
	border: none !important;
	box-shadow: 0 4px 6px rgba(0, 100, 0, 0.2);
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2em !important;
	vertical-align: middle;
}

.t_menu_category.last:hover, 
.t_menu_category.last:focus {
	background: linear-gradient(135deg, #32CD32, #228B22, #006400) !important;
	box-shadow: 0 6px 12px rgba(0, 100, 0, 0.3);
}

.t_menu_category.last a {
    color: white !important;
}

.t_menu_category.last:hover > a:after { 
    background: transparent !important; 
    }

}

PC解像度の機器でのみ適用されます。実際の操作 ここで確認することができます。

同様に、背景色、文字色などを必要に応じて変更できます。 チャットGPTに上記のコードを入れて希望の色を教えてください。適切なスタイルを提示します。

最後に、

以上で WordPressで特定のメニュー項目をボタンの形で表示する方法について説明しました。 Diviテーマとして有名なエレガント Theme■サイトでPricingメニュー項目をボタンの形で表示しており、下にスクロールするとメニューが上部に固定され、Pricingメニュー項目のスタイルも変わります。

Diviテーマサイトを参照して、このサイトにも同様の方法で動作するようにコードを追加してみました。😄

特定のメニュー項目を際立たせたい場合は、そのメニュー項目を他のメニューとは異なる形にするようにスタイルを設定することを検討してください。

参照

• GeneratePress テーマポストナビゲーションの順序とスタイルを変更する
• Diviスターターサイト：事前に作成されたサイトテンプレート（デモ）をロードする方法
• クラウドウェイズPHP 8.3を追加する（+ PHPバージョンを変更する方法）