最終更新日：2025年9月4日 at 3:50 PM
本WebサイトのUX向上を図るため、WordPressプラグイン Popup Maker と CSS を活用し、クラシックなWebデザインにスタイリッシュなハンバーガーメニューと目次を設置しました。
モーダルウィンドウで開かれるポップアップメニューは、ブロックエディタで作成し、各種ボタンの装飾やマウスオーバー時の制御は、全て CSS での作り込みです。
これらの対応により、クラシックなWebデザインでありながらも、少しスタイリッシュでスマートな GUI を実装したことで、ブラウジングにおけるUXの向上を期待したいと思います。
なお、上記の機能追加に併せて、表示に不具合があった箇所の修復とWebデザイン変更の作業も実施しました。WordPress のブロックエディタの機能を拡張するプラグイン「VK Blocks」にも対応させました。
表示の不具合については、ジャストシステム提供「ホームページビルダー (hpb22)」の WordPress テーマが古く Gutenberg に対応していなかったのも原因の一つです。
詳細につきましては、以下の動画とブログの記事にて…。
目次
ハンバーガーメニューのデモ（動画）
ブログ閲覧の画面で、右上のハンバーガーメニューをクリックしてからの一連の操作を動画でご覧ください。
ハンバーガーメニュー設置の関連記事
ハンバーガーメニューの設置に関する記事は以下の通りです。
2025.03.20 追記 / 2025.09.04 更新
Webデザイン変更（Gutenberg対応）
テーマのCSS設定（style.css）の影響でブロックエディタでテーブルの色設定が反映されなかったため、以下のような追加CSSで対応しました。この機能の適用記事はこちら ☞ FU-S50-W の仕様
今回の対応は、従来の WordPress クラシックテーマを前提としたものであり、WordPress 5.9（2022年2月にリリース）からサポートが開始されたブロックテーマには対応しません。
また、他プラグインとのコンフリクト等が原因と考えられますが、表示に不具合があった見出し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-circle0 li’ ならびに ‘.list-circle ul li’ と ‘.list-circle2 ul li 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-circle0 li { list-style-type: circle !important; }
.list-circle ul li { list-style-type: circle !important; }
.list-circle2 ul li ul li { list-style-type: circle !important; }
/*
リストブロックの行間・文字サイズ変更
*/
.entry-content li {
line-height: 1.3 !important;
font-size: 0.813rem !important; /* 13px */
}
/*
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.3em !important;
padding-bottom: 0.3em !important;
padding-left: 0.5em !important;
padding-right: 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; /* 標準文字色 */
}
/*
ブロック クオートのスタイル
*/
.wp-block-quote {
background-color: #202020;
border-color: #404040 !important;
border-radius: 10px !important;
border-width: 2px!important;
border-style: solid;
padding-top: 10px !important;
padding-bottom: 0 !important;
}
blockquote.is-style-plain {
/* プレーンスタイル */
background-color: black;
border-radius: 0 !important;
border-left-width: 4px !important;
border-left-style: solid;
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
padding-left: 5px;
padding-right: 5px;
padding-top: 0 !important;
padding-bottom: 0 !important;
@media (max-width:480px) {
background-color: #151515 !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)
*/
.entry-content h2, h3, h4, h5, h6
{
line-height: 1.3 !important;
margin-top: 0 !important;
}
/* 見出しh1 */
h1.entry-title, h1.page-title {
line-height: 1.3 !important;
margin-top: 0 !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;
}2025.04.03 追記
スマホ動作時に見出しブロック内の文字列が折り返されると行間にスペースが空きすぎてしまうため、上記の追加CSS「見出しブロック折り返しの行間調整」で対応しました。リストブロックについても同様に「リストブロックの行間・文字サイズ変更」にて対応しています。
なお、テーマの style.css で定義されている段落ブロックの行間（line-height）を現状の 1.4 から、推奨値の 1.5 （フォントサイズの1.5倍）に変更し、パディング値を設定しました。追加CSSにおいて、以下の通りマークした箇所を追加しています。
/*
段落ブロックの文字サイズとパディング、行間の変更
*/
.entry-content p {
font-size: 1.167em; /* 14px */
padding-top: 0.300em;
padding-bottom: 0.300em;
line-height: 1.5;
}2025.04.20 追記
ブロック クオートの装飾
‘.wp-block-quote’ は、ブロック クオートのデフォルトスタイルの背景色とその他の装飾を定義します。これは、ブロックエディタのプルクオートを有効化するための対策でもあり、それと同時に、以下のようにテーマの style.css において、blockquote の ‘background-color’ をコメントアウト（マークした箇所）する必要があります。
‘blockquote.is-style-plain’ では、独自のブロック クオートのプレーンスタイルをサポートします。これは、引用記事の左端に縦線を表示するスタイルです。
blockquote{
/*color: #666666;*/
color: #808080; /* ブロッククオート文字色 by Senri */
/*background-color: #202020;*/
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
margin: 0;
}2025.08.02 追記
テーマの設定において、記事のヘッダー画像の横幅サイズに制限（max-width: 260px）が加えられていたため、テーマの style.css を以下のように修正しました。修正箇所はマークしたところで、計２か所あります。
WordPress の画像ブロックでは、スマホでも画像がビューポート内で適切に表示されるようレスポンシブ対応で設計されているため、以下のようなCSS記述は不要になっています。
#hpb-content img{
/*height: auto;*/
/*max-width: 260px !important;*/
}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デザイン変更の詳細につきましては、以下の記事も併せてご覧ください。
フォントサイズのデフォルト値を設定
フォントサイズ一覧
今回のWebデザイン変更においては、各種フォントサイズのデフォルト値を以下のように設定しました。レスポンシブに対応するため、極力 em/rem 指定にしています。
- 見出しブロック: h1 (1.583em:19px) / h2 (1.500em:18px) / h3 (1.417em:17px) / h4 (1.333em:16px) / h5 (1.250em:15px) / h6 (1.167em:14px)
- ブロックエディタのブロックフォントサイズ: Small (1.000em:12px) / Medium (1.167em:14px) / Large (1.583em:19px) / X-large(2.000em:24px)
- 段落ブロック: p (Medium)
- リストブロック: li (0.813rem:13px)
- テーブルブロック: table (Small )
ブロックフォントサイズのデフォルト値を変更するためは、テーマの functions.php に以下のスニペットを追加する必要があります。
/*
* ブロックフォントサイズのデフォルト値を変更・登録
* h1(1.583em:19px) / h2(1.500em:18px) / h3(1.417em:17px) / h4(1.333em:16px)
* h5(1.250em:15px) / h6,p(1.167em:14px) / 基本(1.000em:12px = 0.75×16px)
* x-large(2.000em:24px)
*/
function my_theme_setup() {
add_theme_support( 'editor-font-sizes', array(
array(
'name' => esc_attr__( 'Small', 'themeLangDomain' ),
'size' => '1.000em',
'slug' => 'small'
),
array(
'name' => esc_attr__( 'Medium', 'themeLangDomain' ),
'size' => '1.167em',
'slug' => 'medium'
),
array(
'name' => esc_attr__( 'Large', 'themeLangDomain' ),
'size' => '1.583em',
'slug' => 'large'
),
array(
'name' => esc_attr__( 'X-large', 'themeLangDomain' ),
'size' => '2.000em',
'slug' => 'x-large'
),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup');
目次の設置
目次の表示例
更なる UX向上のため、本Webサイトのニュースとブログの記事、一部の固定ページに標記アイキャッチの目次も設置しました。
本機能は、WordPressプラグイン Table of Contents Plus での実装となります。
但し、少量コンテンツのページや、規格に沿っていない古い記事に関しては、目次が表示されないページもあります。
目次の自動生成プラグインでは、他に Easy Table of Contents も良く使われているようですが、Google AdSense 等、他のプラグインとの相性が悪く、動作しないページが多かったため、このプラグインの使用は断念しました。
参考までにですが、以下の CSS は、目次コンテナのマージン・文字サイズ設定の例です。
/*
目次のマージン・文字サイズ設定
*/
#toc_container {
margin: auto; /* 中央揃え */
margin-bottom: 2.0rem; /* 32px */
font-size: 0.813rem; /* 13px */
border-width: 3px !important;
border-radius: 10px !important;
}記事の読了時間表示機能を追加
なお、今回の目次機能と併せて、ブログ記事の読了時間を表示できるプラグイン Reading Time WP もインストールしました。
これにより、ブログならびに、ニュースの記事の先頭で、以下のように記事の読了時間の概算が表示されるようになりました。
⌛この記事を読むのにかかる時間： 5 分
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>
…… 以下省略以下の通り、「ブログのアーカイブ」をクリックすると、ぱんくずリスト「トップ › ブログ」が正しく表示されるようになりました。
ぱんくずリスト
2025.03.30 追記
アドセンスの遅延読み込み
Google AdSense の広告によるパフォーマンス低下への対策のため、AdSense を遅延読み込みさせるコードを追加し、パフォーマンス対策を講じました。
詳しくは、以下の記事「アドセンスの遅延読み込み」の方法を実施した事により、PageSpeed Insights のパフォーマンス値が少し上がりました。
