Final update date: September 4, 2025 at 3:50 PM
To improve the UX of this website, we have used the WordPress plugin Popup Maker and CSS to create a stylish hamburger menu and table of contents in a classic web design.
The pop-up menus opened in the modal window are created using the block editor, and all decorations of various buttons and controls when mouse over are created using CSS.
With these measures, we hope that by implementing a slightly stylish and smart GUI, despite its classic web design, we will improve UX in browsing.
In addition to adding the above functions, we also implemented work to repair areas that had issues with display and to change the web design. We have also now supported the plugin "VK Blocks," which extends the functionality of WordPress block editors.
One of the reasons for display problems is that the WordPress theme in "Homepage Builder (hpb22)" provided by JustSystem was old and not compatible with Gutenberg.
For more information, please see the video and blog post below...
table of contents
Hamburger menu demo (video)
On the Blog Viewing screen, click on the hamburger menu in the top right and then watch the video.
Related articles on setting up a hamburger menu
Below is an article on setting up a hamburger menu.
2025.03.20 Added / Updated 2025.09.04
Web design change (Gutenberg compatible)
Due to the influence of the theme's CSS settings (style.css), the table color settings were not reflected in the block editor, so we have supported it with the following additional CSS. Click here to see the articles to apply this feature ☞ FU-S50-W specifications
This support is based on the traditional WordPress classic theme, and does not support block themes that have been supported since WordPress 5.9 (released in February 2022).
It is also thought that the cause is a conflict with other plugins, but we have also changed the design of the H2 decoration (PC/tablet devices) that had a problem with display, and the compatibility with VK Blocks (H2-H5 decorations, border blocks, FAQ blocks, table blocks), as well as the H1 decoration (smartphone) heading in the title area, and also implemented an eye-catching enlargement process when mouse over the article list image.
'h2-h6.has-text-align-center' is a solution to the issue where the H2-H6 decorations cannot be centered when the smartphone is working. If 'has-text-align-center' is defined for each heading block class, it will be forced to center.
The same phenomenon occurs with IMG tags, so 'aligncenter' is used to deal with it.
However, these classes are automatically added when centered in the block editor, so users do not need to enter additional CSS classes.
'.list-disc ul li' is a class that forces the entry of a bullet point or other statement in the body of an unordered list item in an unnumbered hierarchical list. Similarly, '.list-circle0 li' and '.list-circle ul li' and '.list-circle2 ul li ul li' are blank circle symbol specifications.
These classes work by defining them in the classes in the Added CSS for List Blocks. Click here to see the articles to apply this feature ☞ Differences from the higher-end model EH-NA9M
This is how this definition is applied to the entire article without using classes, as it would have a negative effect on the behavior of other plugins, such as table of contents generation.
/*
テーブルの文字色 & 背景色設定を有効化 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 Added
If a string in a heading block is wrapped when using a smartphone, there will be too many spaces between the lines, so the above additional CSS "Adjusting line spacing for heading block wrapping" has been supported. Similarly, list blocks are supported by "Changing the line spacing and font size of list blocks."
In addition, the line spacing (line-height) of the paragraph block defined in the theme style.css has been changed from the current 1.4 to 1.5 (1.5 times the font size) to set the padding value. In the additional CSS, the following marked parts have been added.
/*
段落ブロックの文字サイズとパディング、行間の変更
*/
.entry-content p {
font-size: 1.167em; /* 14px */
padding-top: 0.300em;
padding-bottom: 0.300em;
line-height: 1.5;
}2025.04.20 Added
Block Quat Decoration
'.wp-block-quote' defines the default style background color and other decorations for block quotes. This is also a measure to enable pull quotes in the block editor, and at the same time, you must comment out (where you marked) blockquote's 'background-color' in the theme style.css as follows:
'blockquote.is-style-plain' supports a unique block quote plain style. This is a style where a vertical line appears at the far left of a quoted article.
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 Added
In the theme settings, there was a limit (max-width: 260px) on the width size of the article header image, so the theme style.css has been revised as follows: Once I've marked the corrections, there are a total of two places.
WordPress Image Block is designed to be responsive and so that images are displayed properly in the viewport on smartphones, so the following CSS descriptions are no longer required.
#hpb-content img{
/*height: auto;*/
/*max-width: 260px !important;*/
}VK Blocks Support
This fix is a plugin that expands Gutenberg's blocks to make heading block decorations even more stylish. VK Blocks I'm also using it.
VK Blocks is a WordPress free from Vector Co., Ltd.ThemeIncluded with LightningdoIt's a plugin for the block editor and a great plugin that's free to use.
However, unlike Lightning, which has a white background color, the themes provided by JustSystem, which has a black background color, will not fit some parts (blocks) under the default settings if used as is.
Therefore, although we have not yet verified all of the parts, we have added CSS to target blocks that are frequently used, and have made it compatible with blocks that are not compatible with VK Blocks.
The gallery below is a sample display of "heading H2 blocks" when using the VK Blocks.
VK Blocks Display Sample
In the above display sample, the surrounding borders use the border box "Straight Pinkado Line" in VK Blocks.
Unfortunately, in order to accommodate all heading decorations in VK Blocks in the current theme, it is necessary to make significant modifications to style.css in the responsive-enabled part, and it has been discovered that additional CSS alone cannot be used.
Therefore, for the moment, heading blocks H2/H3 will only be defaulted, no decorations, and background coloring. Regarding table blocks, we have now made them compatible with all decorations: default, straight up and down, stripes, border stripes, and no borders (additional CSS class).
Although this is a minor correction, the background of the heading block H3 logo (icon_h3.png) was not created in Transparent mode, and the display felt strange on smartphones, so I converted the background of the H3 logo transparently in Photoshop and remade it.
For more information about changes to the web design, please also see the following article.
Set default font size values
Font size list
In this web design change, the default values for various font sizes have been set as follows. In order to accommodate responsiveness, we have set the em/rem as much as possible.
- Heading block: h1 (1.583em:19px) / h2 (1.500em:18px) / h3 (1.417em:17px) / h4 (1.333em:16px) / h5 (1.250em:15px) / h6 (1.167em:14px)
- Block Editor Block Font Size: Small (1.000em:12px) / Medium (1.167em:14px) / Large (1.583em:19px) / X-large (2.000em:24px)
- Paragraph block: p (Medium)
- List block: li (0.813rem:13px)
- Table block: table (Small )
To change the default value for block font size, you need to add the following snippet to the functions.php in the theme:
/*
* ブロックフォントサイズのデフォルト値を変更・登録
* 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');
Installation of table of contents
Example of display of table of contents
To further improve UX, we have also installed news and blog articles on this website, as well as table of contents for marked eye-catching on some permanent pages.
This feature is a WordPress plugin Table of Contents Plus It will be implemented in.
However, there are some pages that have small content and older articles that do not comply with the standards, so the table of contents will not be displayed.
The table of contents auto-generated plugin can be used to create other features. Easy Table of Contents It seems to be used frequently, but I gave up using this plugin because it didn't work with other plugins such as Google AdSense and many pages didn't work.
For reference, the following CSS is an example of the margin and font size settings for the table of contents container.
/*
目次のマージン・文字サイズ設定
*/
#toc_container {
margin: auto; /* 中央揃え */
margin-bottom: 2.0rem; /* 32px */
font-size: 0.813rem; /* 13px */
border-width: 3px !important;
border-radius: 10px !important;
}Added a function to display the reading time of articles
In addition to this table of contents function, it also includes a plugin that allows you to display the time spent reading blog articles. Reading Time WP I've also installed it.
This allows you to display an estimate of the reading time of the article at the beginning of your blog and news article as follows:
⌛Time it takes to read this article: 5 minutes
2025.03.21 Added
Support for post archive pages
Normally, archive pages are not supported on WordPress post pages, so as shown in the eye-catching image in the title, the program list was displayed at the URL of WP_Query, the WordPress API, shown below.
/?post_type=post&cat&order&orderbyPagination does not work when viewing from this query, making it inconvenient, so just like with custom posts in news and gallery, blogs can be displayed in the archive page template program at the URL below.
/post/How to add an archive page to a WordPress Post
To add an archive page to your blog, you need to add the following snippet to the functions.php in the theme: After adding it, it will be enabled by updating the permalink structure in [Settings > Permalink Settings] from the WordPress admin screen. In the example below, '/post/' is set to the archive page of the 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 );In addition, the blog display template program blog.php will also be modified as follows: The description of the parameter part of WP_Query has been commented out.
<!-- <h3><a href="<?php echo esc_attr( add_query_arg( $query_more, home_url( '' ) ) ); ?>">ブログ一覧</a></h3> -->
<h3><a href="/post/">ブログのアーカイブ</a></h3>View the blog archive page
Due to the above corrections, the blog archive page is now displayed as follows: Pagination also works fine.
Added panties to the blog archive page
The above-mentioned response alone does not display panties lists on the blog archive page, so we have revised the panties list display program breadcrumb.php as follows.
The lines marked are the additions and corrections.
【breadcrumb.php: Before correction 】
<!-- 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: After correction】
<!-- 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>
…… 以下省略As shown below, when you click on "Blog Archive" you can now correctly display the panties list, "Top › Blog."
Panties list
2025.03.30 Added
Adsense lazy loading
To combat the performance degradation caused by Google AdSense ads, we have added code that lazyly loads AdSense and took performance measures.
For more information, we have implemented the method of "Adsense lazy loading" below, which has led to a slightly higher performance value for PageSpeed Insights.
