UX向上のため、クラシックなWebデザインにスタイリッシュなハンバーガーメニューと目次を設置しテーマの不具合を修復(VK Blocks対応)

⌛この記事を読むのにかかる時間: 4

update 最終更新日:2025年3月28日 at 10:05 AM

本WebサイトのUX向上を図るため、WordPressプラグイン Popup Maker と CSS を活用し、クラシックなWebデザインにスタイリッシュなハンバーガーメニューと目次を設置しました。

モーダルウィンドウで開かれるポップアップメニューは、ブロックエディタで作成し、各種ボタンの装飾やマウスオーバー時の制御は、全て CSS での作り込みです。

これらの対応により、クラシックなWebデザインでありながらも、少しスタイリッシュでスマートな GUI を実装したことで、ブラウジングにおけるUXの向上を期待したいと思います。

なお、上記の機能追加に併せて、表示に不具合があった箇所の修復とWebデザイン変更の作業も実施しました。実際のところは、ジャストシステム提供「ホームページビルダー (hpb22)」の WordPress テーマが古く Gutenberg に対応していなかっただけの事ですが。

詳細につきましては、以下の動画とブログの記事にて…。

ブログ閲覧の画面で、右上のハンバーガーメニューをクリックしてからの一連の操作を動画でご覧ください。

ハンバーガーメニューの設置に関する記事は以下の通りです。

2025.03.20 追記

テーマのCSS設定(style.css)の影響でブロックエディタでテーブルの色設定が反映されなかったため、以下のような追加CSSで対応しました。この機能の適用記事はこちら ☞ FU-S50-W の仕様

また、他プラグインとのコンフリクト等が原因と考えられますが、表示に不具合があった見出しH2装飾(PC/タブレット端末)の修正と VK Blocks への対応(H2~H5装飾、枠線ブロック、FAQブロック、テーブルブロック)、ならびに、タイトルエリアの見出しH1装飾(スマホ)のデザインを変更し、記事一覧イメージのマウスオーバー時のアイキャッチ拡大処理も実装しました。

なお、’h2~h6.has-text-align-center’ は、スマホ動作時に見出しH2~H6装飾の中央揃えが効かない問題への対処です。各見出しブロックのクラスに ‘has-text-align-center’ が定義されていれば、強制的に中央揃えになります。
IMGタグでも同様の事象が発生するため、’aligncenter’ で対応します。

但し、これらのクラスはブロックエディタで中央揃えにすると自動的に追加されるため、ユーザが追加CSSのクラスを入力する必要はありません。

‘.list-disc ul li’ は、本文中において、番号無し階層リスト内の ul (Unordered List) リストアイテムに記述された箇条書きなどの文頭に黒丸記号を強制記入するためのクラスです。同様に、’.list-circle ul li’ は白丸記号の指定です。

これらのクラスは、リストブロックの追加CSSのクラスで定義することで機能します。この機能の適用記事はこちら ☞ 上位機種EH-NA9Mとの違い

この定義をクラスを使わず記事全体に適用した場合、目次生成など、他のプラグインの動作に悪影響を及ぼしてしまうため、このような対応になりました。

/*
	テーブルの文字色 & 背景色設定を有効化 for Gutenberg
*/
.wp-block-table th { color:inherit; background: none; }
.wp-block-table td { color:inherit; background: none; }

/* 
 番号無しリストの文頭を黒丸記号に
*/
.list-disc ul li { list-style-type: disc !important; }

/* 
 番号無しリストの文頭を白丸記号に
*/
.list-circle ul li { list-style-type: circle !important; }

/*
 VK Blocks の H2装飾対応(else-stylesを除き以下の記述をh3.*~h5.*まで定義)
*/
h2 .is-style-vk-heading-plain, .is-style-vk-heading-double_black, .is-style-vk-heading-double_bottomborder_black, .is-style-vk-heading-solid_black, .is-style-vk-heading-solid_bottomborder_black, .is-style-vk-heading-dotted_bottomborder_black, .is-style-vk-heading-both_ends, .is-style-vk-heading-solid_bottomborder_black, .is-style-vk-heading-brackets_black {
	background-image: none !important;
	border-color: inherit !important;
	:not(&) {
    /* else-styles
		見出しH2装飾(PC/タブレット)の変更(.is-style-vk-heading-background_fill_lightgray「背景塗り 灰色」を含む)*/
		.entry-content h2 {
			color: #e0c64f;
			background-image : url(/images/icon_viewtype-date-h3-sp.png);
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size:100% 2px;
			margin-bottom: 1.0em !important;
			border-color: inherit !important;
			padding-top: 0.5em !important;
			padding-bottom: 0.5em !important;
		}
	}
}
h2.is-style-vk-heading-plain {
	background-image: none !important;
}

/*
	VK Blocks の 枠線ブロック装飾対応
*/
.is-style-vk_borderBox-style-solid-kado-tit-onborder {
	.vk_borderBox_title_container {
	/* 枠線ブロック「直線 ピンカド 線上」の背景色(黒) */
		background-color: black !important;
		@media (max-width:480px) {
			background-color: #151515 !important;	
		}
	}
}
.wp-block-vk-blocks-border-box {
	.vk_borderBox_body p {
	/* 枠線ブロック内のテキスト色 */
		color: #ca9b33 !important;	/* 標準文字色 */
	}
}

/*
	定義リストの横並びを解除(VK Blocks のFAQブロック対応)
*/
.vk_faq {
	dl dt { float: none !important; }
	dt { float: none !important; }
}

/* 
 VK Blocks の テーブル装飾対応
*/

/* ストライプ, 枠線無し(追加CSS) */
.is-style-stripes, .table-noborder  td {
	border: 0px !important;
}

/* 直線上下 */
.is-style-vk-table-border-top-bottom td {
	border-color: #ca9b33 !important;	/* 標準文字色 */
	border-left-width: 0px !important;
	border-right-width: 0px !important;
}

/* 枠線ストライプ */
.is-style-vk-table-border-stripes  td {
	border-color: #ca9b33 !important;	/* 標準文字色 */
}

/* 枠線 */
.is-style-vk-table-border td {
		border-color: #ca9b33 !important;	/* 標準文字色 */
}

/* 
	見出しH1装飾(スマホ)の変更
*/
@media (max-width:480px) {
	h1#hpb-page-title {
		padding-left: 0px !important;
    padding-right: 0px !important;
		background-image: url(/images/icon_viewtype-date-h3.png) !important;
		background-position: center middle !important;
		background-repeat: no-repeat !important;
		background-size:100% 20px !important;
		background-color: black !important;
		clear: both !important;
		text-align: center !important;
	}
}

/*
	見出しH2-H6ブロックの中央揃え強制
	(スマホ動作時の不具合対応)
*/
h2.has-text-align-center, h3.has-text-align-center, h4.has-text-align-center, h5.has-text-align-center h6.has-text-align-center {
	text-align: center !important;
}

/*
	IMGタグ中央揃え強制(不具合対応)
*/
.aligncenter {
	text-align: center !important;
}

/*
	記事一覧イメージをHover時に拡大 
*/
.entry-thumbnail img {
	overflow: visible;
	display: block;
	transition-duration: 0.5s;
}
.entry-thumbnail img:hover {
	transform: scale(1.13,1.13);
	transition-duration: 0.5s;
}

VK Blocks への対応

今回の修正では、見出しブロックの装飾をよりスタイリッシュにするため、Gutenberg のブロックを拡張するプラグイン VK Blocks も利用しています。

VK Blocks は、(株)ベクトルの WordPress 無料テーマ「Lightning」に付属するブロックエディター用のプラグインであり、無料で利用可能な優れたプラグインです。
しかしながら、背景色が白を基調とした Lightning とは異なり、背景色が黒を基調としたジャストシステムが提供する当サイトのテーマでは、そのまま利用すると一部のパーツ(ブロック)がデフォルト設定では適合しません。

そこで、未だ全てのパーツは検証していませんが、利用頻度の高いブロックを対象とし、CSS を追加することで、VK Blocks に非対応のブロックに対応させました。

以下のギャラリーは、その VK Blocks を使用した場合における「見出しH2ブロック」の表示サンプルです。

VK Blocks 表示サンプル

上記の表示サンプルにおいて、周りの枠線は、VK Blocks の枠線ボックス「直線 ピンカド 線上」を利用しています。
残念ながら、現在のテーマで VK Blocks の全ての見出し装飾に対応するには、レスポンシブ対応部分で style.css に対し、かなりの修正が必須であり、追加CSSだけでは対応出来ないことが判明しています。
よって、今のところ、見出しブロックH2/H3については、デフォルト、装飾無し、背景塗りのみの対応とします。テーブルブロックに関しては、デフォルト、直線上下、ストライプ、枠線ストライプ、枠線無し(追加CSSクラス)の全ての装飾に対応できるようにしました。
なお、細かな修正となりますが、見出しブロックH3のロゴ(icon_h3.png)の背景が透過モードで作成されておらず、スマホでは表示に違和感があったため、PhotoshopでH3ロゴの背景を透過変換しリメイクしました。

その他、Webデザイン変更の詳細につきましては、以下の記事も併せてご覧ください。

目次の表示例

更なる UX向上のため、本Webサイトのニュースとブログの記事、一部の固定ページに標記アイキャッチの目次も設置しました。
本機能は、WordPressプラグイン Table of Contents Plus での実装となります。
但し、少量コンテンツのページや、規格に沿っていない古い記事に関しては、目次が表示されないページもあります。
目次の自動生成プラグインでは、他に Easy Table of Contents も良く使われているようですが、Google AdSense 等、他のプラグインとの相性が悪く、動作しないページが多かったため、このプラグインの使用は断念しました。
参考までにですが、以下の CSS は、目次コンテナのマージン設定の例です。

/*
	目次のマージン設定
*/
#toc_container {
	margin: auto; /* 中央揃え */
	margin-bottom: 30px;
}

記事の読了時間表示機能を追加

なお、今回の目次機能と併せて、ブログ記事の読了時間を表示できるプラグイン Reading Time WP もインストールしました。
これにより、ブログならびに、ニュースの記事の先頭で、以下のように記事の読了時間の概算が表示されるようになりました。

Google AdSense の広告によるパフォーマンス低下への対策のため、AdSense を遅延読み込みさせるツールを使用し、パフォーマンス対策を講じました。

詳しくは、以下の記事「アドセンスの遅延読み込み」の方法を実施した事により、PageSpeed Insights のパフォーマンス値が少し上がりました。

2025.03.21 追記

通常では WordPress の投稿ページにアーカイブページがサポートされていないため、標題のアイキャッチ画像に示すように、プログ一覧は以下に示す WordPress API である WP_Query の URL で表示していました。

/?post_type=post&cat&order&orderby

このクエリーからの表示だと、ページネーションが機能せず、不便であるため、ニュースやギャラリーのカスタム投稿と同様に、以下のURLにてブログもアーカイブページのテンプレートプログラムで表示できるようにしました。

/post/

WordPressの「投稿」にアーカイブページを追加する方法

ブログにアーカイブページを追加するためには、テーマの functions.php に以下のスニペットを追加する必要があります。追加後、WordPress の管理画面より [設定 ≫ パーマリンク設定] にてパーマリンク構造を更新することで有効化されます。以下の例では、’/post/’ を投稿のアーカイブページに設定しています。

/**
 * WordPressの「投稿」アーカイブページをサポート
 */
function post_has_archive( $args, $post_type ) {
	if ( 'post' == $post_type ) {
 		$args['rewrite'] = true;
 		$args['has_archive'] = 'post';  //任意のスラッグ名 ←アーカイブ
 		//$args['label'] = 'ブログ一覧';  //管理画面に「投稿」の代わりに表示される(任意)
 	}
 	return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );

これに併せて、ブログ表示のテンプレートプログラム blog.php も以下の通り修正します。WP_Query のパラメータ部分の記述はコメントアウトしました。

<!-- <h3><a href="<?php echo esc_attr( add_query_arg( $query_more, home_url( '' ) ) ); ?>">ブログ一覧</a></h3> -->
<h3><a href="/post/">ブログのアーカイブ</a></h3>

ブログのアーカイブページ表示

上記の修正作業により、以下の通りブログのアーカイブページが表示されるようになりました。ページネーションも問題なく機能します。

ブログアーカイブページのぱんくずリストを追加

前記の対応だけでは、ブログのアーカイブページにぱんくずリストが表示されないため、以下のようにぱんくずリスト表示プログラム breadcrumb.php を修正しました。
マークした行が追記、訂正箇所です。

【 breadcrumb.php: 修正前 】

<!-- breadcrumb list -->
<div id="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
	<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="<?php echo home_url(); ?>" itemprop="item"><span itemprop="name">トップ</span></a>
		<meta itemprop="position" content="<?php echo ++$position; ?>" />
	</div>
	<div></div>

	<?php if ( is_year() ) : ?>
		<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<span itemprop="name"><?php echo $my_year; ?></span>
			<meta itemprop="position" content="<?php echo ++$position; ?>" />
		</div>
		…… 以下省略

【 breadcrumb.php: 修正後 】

<!-- breadcrumb list -->
<div id="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
	<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="<?php echo home_url(); ?>" itemprop="item"><span itemprop="name">トップ</span></a>
		<meta itemprop="position" content="<?php echo ++$position; ?>" />
	</div>
	<div></div>

	<?php if ( strpos($_SERVER["REQUEST_URI"],'/post/') !== false ) : ?>
		<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<span itemprop="name"><?php $post_type_label = 'ブログ';echo $post_type_label; ?></span>
			<meta itemprop="position" content="<?php echo ++$position; ?>" />
		</div>
		
	<?php elseif ( is_year() ) : ?>
		<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<span itemprop="name"><?php echo $my_year; ?></span>
			<meta itemprop="position" content="<?php echo ++$position; ?>" />
		</div>		
		…… 以下省略

このエントリーをはてなブックマークに追加
X(ポスト)

コメントを残す