Final update date: March 28, 2025 at 10:05 AM
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. In fact, the WordPress theme for "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
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
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 body to enter a black circle symbol at the beginning of a sentence such as a bullet point written in an unordered list item in an unnumbered hierarchical list. Similarly, '.list-circle ul li' is an empty circle symbol specification.
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-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 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.
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 setting margins for a table of contents container.
/*
目次のマージン設定
*/
#toc_container {
margin: auto; /* 中央揃え */
margin-bottom: 30px;
}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
Adsense lazy loading
To combat the performance degradation caused by Google AdSense ads, we have used a tool that lazy 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.
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>
…… 以下省略
