Last updated: July 18, 2026 at 4:07 PM

The design of senris.com has been renewed for the first time in 8 years!
The header image of Senri's portal site senris.com has been updated for the first time in eight years, and the theme program and CSS have been reviewed as a whole, and design problems have been fixed.
The eye-catching image shown in the label is the design of the header image on the home page. The image source was borrowed from an image of Tokyo Michi Terrace 2022 (Tokyo Station Marunouchi Central Square, Gyoko-dori). 🙇♀️
Including the maintenance that has been carried out since February 2023, the changes to this website are as follows.
- Renewal of submission calendar
Details in the article below
Published a method to display custom posts (including featured images) in the monthly/daily archives of WordPress - WordPress Blog article Change the character size of the text
Details in the news article below
The text size of the WordPress blog post body is small and difficult to see, so I changed it to the same size as the newspaper (14px/10.5pt) and improved the display performance - Added menu of 200 popular articles
Details in the news article below
Added 200 popular articles menus (customize the plugin WordPress Popular Posts) & Renewed Post Calendar - Added thumbnail image to recent posts widget (supports custom posts)
WordPress Popular Posts Modified the theme program to match the design of - XO Event Calendar Widget caption and navigation button color change
- Implemented hover display on featured image and Transposh flag icon
- New front page header image
- Adjust widget display in sidebar (font size, margin, padding, etc.)
- Changed page navigation for blogs, news, and galleries (number of articles displayed per page from 5 to 10)
- Add banner to fixed page (Links ~ Site map) and adjust caption font size
- Image bulletin boardImplement a glitter effect with CSS when hovering over the icon image of
- Fixed a bug that the display was disturbed when accessing the image bulletin board from a smartphone (the following article)
Image message board CGI "Joyful Note X v2.0" developed - JOYFUL NOTE v7.3 (mini counter compatible) + Lightbox2 (v2.11.3) & Bilingual function source released #Fixed an issue where display was distorted - Adjust the width of the input field of the contact form (Contact Form 7) (the following article)
All recommended plugins for WordPress multilingual sites! #Install contact form - Repair broken navigation menu and change page navigation (article below)
All recommended plugins for WordPress multilingual sites! #WP-PageNavi - When an article containing UTF-8 pictograms is converted to English with Transposh, the pictograms may be garbled, so the corresponding article has been corrected (the following article)
All recommended plugins for WordPress multilingual sites! #Transposh development platform moves to github - Security program modification to prevent unauthorized use of the language switching launcher
All recommended plugins for WordPress multilingual sites! #Add language switch launcher - Modified the program so that news articles are also displayed on the tag archive page (article below)
Explain how to add tagging function to WordPress custom post and display custom post on tag archive page - Set thumbnail image size for embedded articles in WordPress – Added on 2023.11.12
- Cut the left and right margins of the Facebook "Like" button – Added on 2023.11.27
- Bug fixes for popular article display plugin "WordPress Popular Posts" and change of X (formerly Twitter) logo due to upgrade to WordPress 6.4 – Added on 2023.11.30
- Customize the related article display plugin “Yet Another Related Posts Plugin” to be responsive – Added on 2023.12.12
- Featured image wrap around article list – Added on 2023.12.16
- Apply excerpt to article list – Added on 2023.12.17
- Added link and hover display function to thumbnail images in article list – Added on 2023.12.17, updated on 2025.02.12
- Fixed a bug in the hpb22 theme where the separator before the article edit link was missing in the meta information display – Added on 2023.12.17
- Removed bottom menu display in tablet mode – Added on 2024.02.29
- Implementing hamburger menu and table of contents to fix the theme bug (the following article: Updated 2025.04.29)
- Gwolle Guestbook button redesign – 2025.03.02 Added
- There is a security issue with the WordPress article excerpt plugin "Auto Limit Posts Reloaded", so it is possible to replace it with a program with HPB theme. – 2025.07.01 Added
- Fixed template program "archive.php" for displaying archive pages – 2025.07.29 Added
- A "Share" button has been installed due to the abolition of the "Like" button for Facebook external sites (program modification of HPB's WordPress theme) – Added on 2026.02.11
- Instead of the "Cool Tag Cloud" plugin, which has received serious Stored XSS vulnerability reports, Gemini created it with a standard tag cloud + "additional CSS" configuration.Set up your own tag cloud – Added on 2026.04.16
- Uninstall the plugin "ResponsiveVoice Text To Speech" which has a heavy server load.Added a snippet that allows you to easily call the browser's voice reading function from a shortcode without a plugin. – Added on 2026.05.01
- Compatible with WordPress 7.0 (Added a display problem with the quote block on the block editor edit screen and fixed it by fixing the CSS) - Updated on 2026.05.27
- Dealing with plugins with security issues and updating versions – Updated on 2026.06.23
- Updates have stopped for over 4 years and there are security concerns.Uninstall the plugin “mb.miniAudioPlayer” and use the standard WordPress “Audio block” instead.
- Uninstall the plugin "Archives Calendar Widget" which has been reported to have a cross-site scripting (XSS) vulnerability (CVE-2024-33950) that targets administrator privileges.Homemade "Custom Calendar Widget"substituted with
- Vulnerability caused by "Stored Cross-site Scripting (Stored XSS)" was reported and publication was permanently suspended from the WordPress directory.Plugin “XO Event Calendar”uninstall
- Corresponding to display problems caused by version upgrade of guestbook plug-in "Gwolle Guestbook 5.0.1"
- Improving display performance and changing the design of the share button (article below) – Added on 2026.07.02
WordPress system optimization dramatically improved the display performance of the site from 73 to 96 in PageSpeed Insights score! Performance has improved dramatically!- Mobile performance score 60 (fail) ⇒ 72 (pass)
- Desktop performance score 73 (pass) ⇒ 92 (pass)
- Fixed a bug where the News and Gallery menus and the Blog (archive display) menu were not highlighted in orange – Added on 2026.07.04
Fixed an issue where the custom post menu was not highlighted in orange. - Fixed a vulnerability in the script that applies custom posts to the block editor – Added on 2026.07.05
Corrected custom post block editor compatible script to avoid XSS - Addressed the issue where changing the settings of the separator block did not work – Added on 2026.07.06 / Updated on 2026.07.10
Fixed a bug where changing the thickness of delimited blocks was not effective due to Fastest Cache "CSS compression" - Fixed the problem of list block not supporting additional CSS to be compatible with WP7.0 – Added on 2026.07.08
Added blocks supported in WordPress 7.0 Fixed a bug with list blocks that did not support CSS - Fixed an issue where the menu was not highlighted in orange on the archive page linked to "› Read more" in the news article list on the front page – Added on 2026.07.08
Corrected the link destination URL of "› Read more" in the news article list on the front page. - Supports CSS “block-editor-style.css” for block editor – Added on 2026.07.15
Supports CSS “block-editor-style.css” for block editor editing screen - Changed the font type to the latest version and improved the order to look most beautiful on modern devices – 2026.07.16 Added
Change the font settings of style.css to the latest version - Set the left and right margins of the paragraph block, and decorate and adjust the margins when a part of the text is marked or highlighted by changing the background color (Supported with the additional CSS below) – Added on 2026.07.17
2026.07.18 Update
Updated WordPress display style (CSS definition)
We've updated the "additional CSS" that determines how WordPress displays styles to match the design changes mentioned above.
For your reference, the full text is below.
WordPress themes now support the plugin "VK Blocks," which extends the functionality of the block editor.
Note that ‘.google-auto-placed’ below is automatically added by the WordPress plugin Google Adsense.
.google-auto-placed {
margin-top: 2em!important;
margin-bottom: 2em!important;
}
/*
カスタムカレンダーの表示調整
*/
#calendar_wrap_custom {
width: 90%;
margin: auto;
}
/* 記事一覧の区切り線の色変更 */
.post,
article[id^="post-"] {
border-bottom: 2px solid #262C74 !important;
}
/*
段落ブロックの文字サイズとパディング、行間の変更
*/
.entry-content p {
font-size: 1.167em; /* 14px */
padding-top: 0.300em;
padding-bottom: 0.300em;
padding-right: 0.300em;
padding-left: 0.300em;
line-height: 1.5;
}
/* 1. 通常のマーク、および背景色があるマークに品のある余白と角丸を適用 */
mark {
padding-left: 0.35em !important;
padding-right: 0.35em !important;
border-radius: 2px !important; }
/* 2. 【最優先】背景色が透明(文字色変更)のマークだけ、余白を完全にゼロにリセット */
mark[style*="background-color:rgba(0, 0, 0, 0)"],
mark[style*="background-color: rgba(0, 0, 0, 0)"], /* 半角スペース対策 */
mark[style*="background-color:transparent"] {
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 0 !important;
}
.site-branding #hpb-site-desc {
font-size:10px;
}
#hpb-header-extra1 p.address {
font-size:9.5px;
}
/*
キャプションの文字サイズ変更
*/
.wp-block-image figcaption {
font-size: 1em !important; /* 12px */
}
/*
目次のマージン・文字サイズ設定
*/
#toc_container {
margin: auto; /* 中央揃え */
margin-bottom: 2.0rem; /* 32px */
font-size: 0.813rem; /*13px*/
border-width: 3px !important;
border-radius: 10px !important;
}
/*
テーブルの文字色 & 背景色設定を有効化 for Gutenberg
*/
.wp-block-table th { color:inherit; background: none; }
.wp-block-table td { color:inherit; background: none; }
/* テーブルのヘッダーを中央揃えにする */
.center-table th {
text-align: center !important;
}
/*
番号無しリストの文頭を黒丸記号に
*/
.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 の H3装飾対応 */
h3 .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;
}
h3.is-style-vk-heading-plain {
background-image: none !important;
}
/* VK Blocks の H4装飾対応 */
h4 .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;
}
h4.is-style-vk-heading-plain {
background-image: none !important;
}
/* VK Blocks の H5装飾対応 */
h5 .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;
}
h5.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)
*/
.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;
}
/*
Stickyメニュー設定
*/
#hpb-header-extra1 .sticky-menu {
opacity: 0.5; /* 透過指定 */
z-index: 2147483646; /* ポップアップを前面*/
position: fixed; /* 画面上の位置を固定 */
top: 40px; /* 上からの位置 */
right: 30px; /* 右からの位置 */
width: 24px; /* 画像の幅 */
height: auto; /* 画像の高さ */
}
@media (max-width: 480px) {
/* スマホ対応 */
#hpb-header-extra1 .sticky-menu{
top: 70px;
right: 10px;
width: 18px;
height: auto;
}
}
/* マウスオーバー時に拡大 */
#hpb-header-extra1 img.sticky-menu {
display: block; /* コンテンツのひとかたまりとなる要素 */
transition-duration: 0.5s; /* 変化にかかる時間 */
}
#hpb-header-extra1 img.sticky-menu:hover {
transform: scale(1.3,1.3); /* 画像の拡大率 */
transition-duration: 0.5s;
}
/*
ポップアップメニュー設定
*/
.popup-menu {
margin:10px;
a {
color:white;
background-color: skyblue;
padding:5px 8px;
border-radius: 5px;
text-decoration: none;
}
a:hover {
color:skyblue;
background-color: white;
border:3px solid skyblue;
}
}
/*
記事一覧のアイキャッチ画像回り込み
*/
.entry-thumbnail {
float: left;
margin-right: 1em;
}
/*
記事一覧イメージを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;
}
/*
YARPPの文字サイズ変更
*/
.yarpp-thumbnail-title {
font-size:9px !important;
font-weight:normal !important;
}
/*
イメージへのhover時影付け
*/
/* Transposh */
#custom_html-2 img:hover {
box-shadow: 0 -4px 5px #999;
}
/* YARPP */
.yarpp-related img:hover {
box-shadow: 0 -2px 5px #999;
}
/* 最近の投稿ウィジェット */
.rpost-eyecatch img:hover {
box-shadow: 0 -2px 5px #999;
}
/* 更新情報 (Display Posts) */
.listing-item img:hover {
box-shadow: 0 -2px 5px #999;
}
/* ブログランキングのバナー */
.senris-top img:hover {
box-shadow: 0 -2px 5px #999;
}
/*
reCAPTCHA v3のバッジを非表示にする
*/
.grecaptcha-badge { visibility: hidden; }
/*
TOPページのデザイン変更
*/
.senris-top table {
width: 85% !important;
margin:auto !important;
}
.senris-top td {
border: none !important;
}
.senris-top table tr:nth-child(1) td:nth-child(1) {
border-radius: 10px 0 0 0;
}
.senris-top table tr:nth-child(1) td:nth-child(3) {
border-radius: 0 10px 10px 0;
}
.senris-top table tr:nth-child(3) td:nth-child(1) {
border-radius: 0 0 0 10px;
}
/*
テーブルの中央配置
*/
.table-center table {
width: 90% !important;
margin:auto !important;
}
/* 更新情報のデコレーション */
.listing-item {
padding: 8px;
background-color: #222222;
border-color: red;
line-height: 1.3;
border-bottom: 1px solid black;
border-radius: 3px;
}
/*
Gwolle Guestbook デザイン変更
*/
.gwolle-gb-write-button input {
font-size: 9pt !important;
}
.gwolle-gb-write-button {
.button {
display : inline-block;
border-radius : 5px; /* 角丸 */
font-size : 9pt; /* 文字サイズ */
text-align : center; /* 文字位置 */
cursor : pointer; /* カーソル */
padding : 12px 12px; /* 余白 */
background : #000066; /* 背景色 */
color : #ffffff; /* 文字色 */
line-height : 1em; /* 1行の高さ */
transition : .3s; /* なめらか変化 */
box-shadow : 0px 0px 8px #666666; /* 影の設定 */
border : 2px solid #000066; /* 枠の指定 */
}
.button:hover {
box-shadow : none; /* カーソル時の影消去 */
color : #000066; /* 背景色 */
background : #ffffff; /* 文字色 */
}
}
/* アップロードボタン */
.button.gwolle-gb-addon-upload-button {
background : #000066;
border-color : #666666;
color : #A0A0A0;
font-size : 10pt;
}
/* 送信ボタン */
.button.gwolle_gb_submit {
font-size : 10pt;
}
/* プレビューボタン */
.button.gwolle_gb_preview {
background : #000066;
border-color : #666666;
color : #A0A0A0;
font-size : 10pt;
}
/*
人気記事のアイキャッチ内に順位番号を表示
*/
body {
counter-reset: rank_number;
}
ul.wpp-list li img:hover {
box-shadow: 0 -2px 5px #999;
-webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter: brightness(1.3);
-ms-filter: brightness(1.3);
filter: brightness(1.3);
}
.wpp_thumb_wrapper {
position: relative;
}
.wpp_thumb_wrapper:after {
counter-increment: rank_number;
content: counter(rank_number);
display: block;
position: absolute;
left: 0;
width: 20px;
height: 20px;
background: rgba(50, 50, 50, 0.8);
color: white;
font-size: 14px;
text-align: center;
border-radius: 2px;
}
/*
各ウィジェットのデザインを調整
*/
/* ウィジェットのタイトル */
.widget-title {
font-size: 1em !important; /* 12px */
}
h1.widget_block {
font-size: 1em !important; /* 12px */
}
h2.widget_block {
font-size: 1em !important; /* 12px */
}
/* 最近の投稿の余白と行間 */
.rpost-list li {
padding-right: 5px;
line-height: 1.3;
}
.rpost-list img {
float: left;
margin-right: 5px;
}
/* 最近のコメントの余白と行間 */
#recent-comments-2 li {
padding-right: 5px;
line-height: 1.3;
}
/* 本日の人気記事の余白と行間 */
#block-2 li {
padding-right: 5px;
line-height: 1.3;
margin-top: 2px;
margin-bottom: 2px;
}
#block-2 img {
float: left;
margin-right: 5px;
}
/* ニュースの余白 */
.hpb-viewtype-date dl,dd {
padding-right: 10px !important;
}
/*
各ウィジェットの間隔を調整
*/
/* Transposh */
#transposh-6 {
margin-top:0px;
margin-bottom:0;
padding-bottom:0;
}
/* 日本語&English */
#custom_html-2 {
margin-top:0;
margin-bottom:0;
padding-bottom:0;
}
/* Prisna GWT */
#prisna-google-website-translator-2 {
margin-top:10px;
padding-top:0;
}
/* RSSフィード&ソーシャルボタン */
#sfsi-widget-2 {
margin-bottom:0;
padding-bottom:0;
}
/* 本日の人気記事 */
#block-2 {
margin-top:-15px;
}
/* 人気記事200 */
#text-4 {
margin-top:0px;
margin-bottom:0;
padding-bottom:0;
font-size:12px;
.textwidget {
background-color:#222222;
margin-top:-3px;
padding-top:0.1px;
padding-bottom:0;
}
}
/* サイト統計情報(WP-Statistics) */
#text-6 {
margin-top:-15px;
padding-top:13px;
padding-bottom:15px;
font-size:11px;
.textwidget {
background-color:#222222;
margin-top:0px;
padding-top:5px;
padding-bottom:5px;
}
}
/* ブログをメールで購読 */
#blog_subscription-3 {
margin-top:-10px;
}
.wp-block-jetpack-subscriptions__container {
background-color:#222222;
margin-top:-3px;
margin-bottom:0;
padding-top:1px;
padding-bottom:8px;
padding-left:10px;
padding-right:5px;
font-size:10px;
}
/* 購読メールアドレス */
#subscribe-field-blog_subscription-3 {
font-size:10px;
}
/* 登録ボタン (Jetpack) */
.wp-block-button__link {
font-size:9px;
}
/*
Photo-BBS イメージへのhover時影付けとアライメント調整
*/
.photo_bbs img:hover {
box-shadow: 0 -2px 14px #999;
}
.photo_bbs dl,dt,dd {
vertical-align: middle !important;
}
/*
Photo-BBS きらっと光る
アニメーション
*/
.btnshine {
/*キラッと光る基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display:inline-block;
color: #fff;
padding: 10px 20px;
text-decoration: none;
outline: none;
overflow: hidden;
}
/*キラッと光る*/
.btnshine::before {
content: '';
/*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
/*キラッと光る形状*/
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-25deg);
}
/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
animation: shine 0.7s;
}
@keyframes shine {
100% {
left: 125%;
}
}
/*
Contact Form 7 入力欄の幅を調整
*/
.wpcf7 input[name="your-name"] { /* 名前入力欄 */
width: 75%;
}
.wpcf7 input[name="your-email"] { /* メール入力欄 */
width: 75%;
}
.wpcf7 input[name="your-subject"] { /* タイトル入力欄 */
width: 100%;
}
.wpcf7 textarea[name="your-message"] { /* 本文入力欄 */
width: 100%;
}
/*
WP-PageNavi のスタイル
*/
.wp-pagenavi {
padding:10px 9px 10px !important;
display:block !important;
clear:both !important;
}
.wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend {
display:inline-block;
color:#333333 !important;
text-shadow:0px 1px #F6F6F6 !important;
padding:3px 9px 3px 9px !important;
border:solid 1px #B6B6B6 !important;
box-shadow:0px 1px #EFEFEF !important;
-moz-box-shadow:0px 1px #EFEFEF !important;
-webkit-box-shadow:0px 1px #EFEFEF !important;
background:#E6E6E6 !important;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important;
font-size:14px !important;
margin-right:3px !important;
margin-bottom:4px !important;
text-decoration:none !important;
}
.wp-pagenavi a:hover {
display:inline-block;
color:#fff !important;
text-shadow:0px 1px #3C3C3C !important;
border-color:#202020 !important;
background:#525252 !important;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important;
color:#FFFFFF !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;
}
.wp-pagenavi span.current {
display:inline-block;
padding:3px 9px 3px 9px !important;
border:solid 1px #DCDCDC !important;
color:#fff !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;
margin-right:3px !important;
text-shadow:0px 1px #3C3C3C !important;
border-color:#202020 !important;
background:#525252 !important;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important;
}
/*--------------------------------
関連記事(YARPP)のカスタマイズ
--------------------------------*/
/*yarppの領域*/
.related-post {
width: 100%; /*①記事幅に100%フィット*/
overflow:hidden;
margin-top:5px;
font-size:0;
}
/*1記事の領域*/
.related-entry {
vertical-align: top;
display:inline-block;
width: 22%; /*②1記事の領域(幅)*/
font-size: 12px; /*文字サイズ*/
line-height: 1.4; /*文字行高*/
margin-bottom: 12px; /*下余白*/
padding: 0 1.3%; /*記事の間隔(左右)*/
}
/*画像の設定*/
.related-entry img {
border: #ccc 1px solid; /*画像の枠線*/
padding:2%; /*画像と枠線の間隔*/
width:100%; /*1記事の領域幅にフィット*/
height:auto;
}
/*画像の装飾*/
.related-thumb a,
.related-thumb a img {
-webkit-box-shadow: none;
box-shadow:none;
text-decoration: none;
border-radius: 10%; /*角丸*/
}
/*マウスオーバーで光る*/
.related-thumb a img:hover {
-webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter: brightness(1.3);
-ms-filter: brightness(1.3);
filter:brightness(1.3);
}
/*
SNSボタンのhover時影付け
*/
.hpb_social img:hover {
box-shadow: 0 -2px 5px #999;
}
/*--------------------------------
メディアクエリ(スマホ対応)
---------------------------------*/
@media (max-width:480px) {
/* YARPP の文字サイズ変更 */
.related-entry {
font-size: 0.63rem; /* 10px */
}
/* キャプションの文字サイズ変更 */
.wp-block-image figcaption {
font-size: 0.68rem !important; /* 11px */
}
}
/*--------------------------------
自作タグクラウド(共通):スリム&可読性重視デザイン
---------------------------------*/
.custom-cloud {
padding: 5px 0;
line-height: 2.2 !important; /* 行間を適切に保ち重なりを防止 */
}
.custom-cloud a {
display: inline-block !important;
height: auto !important;
padding: 1px 7px !important; /* ボタン内の余白を極小に */
margin: 2px 1px !important;
line-height: 1.5 !important;
text-decoration: none !important;
border-radius: 4px !important; /* 本番サイトに馴染むシャープな角丸 */
font-weight: 700 !important;
border: none !important;
white-space: nowrap !important;
vertical-align: middle !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
/* --- 金色のタグ (Gold) / メタリック光沢仕様 --- */
.tag-cloud-gold a {
/* 白金(ホワイトゴールド)から濃い黄金色への細かな切り替えで金属反射を表現 */
background: linear-gradient(135deg,
#ffeaa7 0%,
#d4af37 25%,
#fff9db 50%,
#aa7c11 75%,
#f1c40f 100%
) !important;
color: #1a1a1a !important; /* 文字の視認性を高める濃い黒 */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important; /* 刻印風の白シャドウ */
border: 1px solid #b38f1d !important; /* 金色の外枠線で引き締める */
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* 内側の光と外側の影 */
transition: all 0.25s ease-in-out !important; /* シルバーと合わせた滑らかな動き */
}
.tag-cloud-gold a:hover {
/* ホバー時はさらにコントラストを強くし、輝きが増す演出 */
background: linear-gradient(135deg,
#ffffff 0%,
#cdaa3d 30%,
#fffdf0 55%,
#916908 85%,
#f39c12 100%
) !important;
color: #000000 !important;
transform: scale(1.08) !important; /* シルバーのサイズ感と統一 */
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 6px 12px rgba(0, 0, 0, 0.4) !important; /* 影を強く */
z-index: 10;
position: relative;
}
/* --- 銀色のカテゴリー (Silver) / メタリック光沢仕様 --- */
.cat-cloud-silver a {
/* 複数の色を細かく切り替えて、金属の反射光を表現 */
background: linear-gradient(135deg,
#f0f2f5 0%,
#9ca3af 25%,
#e5e7eb 50%,
#bfc5cd 75%,
#f3f4f6 100%
) !important;
color: #1f2937 !important; /* 文字色を少し濃くして視認性を確保 */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* 文字の後ろに白い光を入れて金属刻印風に */
border: 1px solid #9ca3af !important; /* 外枠に少し暗い線を引いて質感を締める */
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.15) !important; /* 内側への光と外側の影 */
transition: all 0.25s ease-in-out !important; /* 動きを滑らかに */
}
.cat-cloud-silver a:hover {
/* ホバー時はさらにコントラストを強めて輝かせる */
background: linear-gradient(135deg,
#ffffff 0%,
#858e96 30%,
#f8f9fa 55%,
#a6b1b7 85%,
#ffffff 100%
) !important;
color: #000000 !important;
transform: scale(1.08) !important;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 6px 12px rgba(0, 0, 0, 0.3) !important; /* 影を強く */
z-index: 10;
position: relative;
}
/* 黒背景のサイトに最適化したミニ音声プレイヤー(左寄せ・極細ネオン版) */
.wp-block-audio audio {
display: block;
max-width: 280px;
height: 28px;
margin: 21px auto 21px 0;
border-radius: 30px;
/*
1つ目の影:プレイヤーのキワを白くクッキリ光らせる(1pxの輪郭線のような効果)
2つ目の影:外側に白くボヤッと広がる柔らかな光(グロウ効果)
*/
box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.6),
0 0 12px 2px rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
/* マウスを乗せたときに、さらに光を強くする演出 */
.wp-block-audio audio:hover {
transform: translateY(-2px);
/* マウスホバーで光の範囲と強さをアップ */
box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8),
0 0 16px 4px rgba(255, 255, 255, 0.3);
}
/* ==========================================
WP7.0対応 ブロッククオート(引用)スタイル
公開画面 & 編集画面(エディタ)を完全に同期
========================================== */
/* 1. 通常の引用スタイル(公開画面&編集画面の共通定義) */
.wp-block-quote,
.editor-styles-wrapper .wp-block-quote {
background-color: #171717 !important;
border-color: #404040 !important;
border-radius: 10px !important;
border-width: 2px !important;
border-style: solid !important;
padding-top: 10px !important;
padding-bottom: 0px !important;
}
/* 2. プレーンスタイル(公開画面&編集画面の共通定義) */
blockquote.is-style-plain,
.editor-styles-wrapper blockquote.is-style-plain {
background-color: #000000 !important;
border-radius: 0px !important;
border-left-width: 4px !important;
border-left-style: solid !important;
border-top-style: none !important;
border-bottom-style: none !important;
border-right-style: none !important;
padding-left: 5px !important;
padding-right: 5px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* 3. スマホ表示用の設定(公開画面用:Cache干渉対策) */
@media (max-width: 480px) {
/* 通常の引用ブロック全体のスマホ背景 */
html body .wp-block-quote,
html body blockquote {
background: #171717 !important;
background-color: #171717 !important;
}
/* プレーンスタイルのスマホ背景 */
html body blockquote.is-style-plain,
html body .wp-block-quote.is-style-plain {
background: #151515 !important;
background-color: #151515 !important;
}
}
/* ------------------------------------------
【編集画面専用】文字色の干渉を完璧にガードして同期
------------------------------------------ */
/* 通常の引用(エディタ内の枠余白と背景微調整) */
.editor-styles-wrapper .wp-block-quote {
background-color: #202020 !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* 通常の引用(中の文字色を固定) */
.editor-styles-wrapper .wp-block-quote p,
.editor-styles-wrapper .wp-block-quote cite,
.editor-styles-wrapper .wp-block-quote li,
.editor-styles-wrapper .wp-block-quote code {
color: #808080 !important;
}
/* プレーンスタイル(エディタ内の枠余白と背景微調整) */
.editor-styles-wrapper blockquote.is-style-plain {
background-color: #000000 !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
/* プレーンスタイル(中の文字色を固定) */
.editor-styles-wrapper blockquote.is-style-plain p {
color: #808080 !important;
}Added thumbnail image to recent posts widget (supports custom posts)
The Recent Posts Widget (supporting custom posts) is provided by Justsystem's homepage builder (hpb) theme program “functions.php”, but if you set it to display the featured image of the post in the sidebar, Because the design of this website theme is disturbed,WordPress Popular Posts Fixed the program to display the thumbnail image at the beginning of the article title in the same format as
In addition, it is necessary to create a new thumbnail image to be used here. All recommended plugins for WordPress multilingual sites! #Display-Posts It is described in
This is also for your reference, but the module in question is posted below. In addition, the marked part will be the correction part.
2023.04.10 update
// 最近の投稿ウィジェット(カスタム投稿対応)
// * サムネイルのサイズを「WordPress Popular Post」に合わせる
add_action( 'widgets_init', '_hpb_register_widgets' );
function _hpb_register_widgets() {
register_widget( 'HpbRecentPost' );
}
class HpbRecentPost extends WP_Widget {
function __construct() {
$widget_ops = array('classname' => 'widget_hpb_recent_post', 'description' => 'カスタム投稿に対応した最新の投稿' );
parent::__construct('hpb-recent-post', '最近の投稿(カスタム投稿)', $widget_ops);
$this->alt_option_name = 'widget_hpb_recent_post';
add_action( 'save_post', array($this, 'flush_widget_cache') );
add_action( 'deleted_post', array($this, 'flush_widget_cache') );
add_action( 'switch_theme', array($this, 'flush_widget_cache') );
}
function widget( $args, $instance ) {
$cache = wp_cache_get('HpbRecentPost', 'widget');
if ( !is_array($cache) )
$cache = array();
if ( ! isset( $args['widget_id'] ) )
$args['widget_id'] = $this->id;
if ( isset( $cache[ $args['widget_id'] ] ) ) {
echo $cache[ $args['widget_id'] ];
return;
}
ob_start();
extract($args);
$title = apply_filters('widget_title', empty($instance['title']) ? __('最近の投稿') : $instance['title'], $instance, $this->id_base);
if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
$number = 5;
$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
$show_eyecatch = isset( $instance['show_eyecatch'] ) ? $instance['show_eyecatch'] : false;
$arrayCP = array('');
if($instance['post']){
array_push($arrayCP, 'post');
}
$wp_post_type_names = get_post_types(array('_builtin' => false, 'public' => true), 'objects');
foreach( $wp_post_type_names as $post_type ) {
if($instance[$post_type->name]){
array_push($arrayCP, $post_type->name);
}
}
$r = new WP_Query( array('post_type' => $arrayCP,'posts_per_page' => $number ) );
if ( $r->have_posts()) :
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
?>
<span class="rpost-list">
<ul>
<?php while($r->have_posts()) : $r->the_post(); ?>
<li>
<?php if ( $show_eyecatch && has_post_thumbnail() ) : ?>
<span class="rpost-eyecatch"><a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail( array(16,16) ),' '; the_title(); ?></a></span>
<?php else : ?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endif; ?>
<?php if ( $show_date ) : ?>
<span class="post-date"><?php echo get_the_date(); ?></span>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
</span>
<?php
echo $after_widget;
wp_reset_query();
endif;
$cache[$args['widget_id']] = ob_get_flush();
wp_cache_set('HpbRecentPost', $cache, 'widget');
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = (int) $new_instance['number'];
$instance['show_date'] = (bool) $new_instance['show_date'];
$instance['show_eyecatch'] = (bool) $new_instance['show_eyecatch'];
$instance['post'] = $new_instance['post'] ? 1 : 0;
$wp_post_type_names = get_post_types(array('_builtin' => false, 'public' => true), 'objects');
foreach( $wp_post_type_names as $post_type ) {
$instance[$post_type->name] = $new_instance[$post_type->name] ? 1 : 0;
}
$this->flush_widget_cache();
$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['widget_hpb_recent_post']) )
delete_option('widget_hpb_recent_post');
return $instance;
}
function flush_widget_cache() {
wp_cache_delete('HpbRecentPost', 'widget');
}
function form($instance) {
$title = strip_tags($instance['title']);
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
$show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
$show_eyecatch = isset( $instance['show_eyecatch'] ) ? (bool) $instance['show_eyecatch'] : false;
$wp_post_type_names = get_post_types(array('_builtin' => false, 'public' => true), 'objects');
$index = 0;
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:', '_hpb' ); ?></label> <input class="widefat" id=" <?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p><p>表示するカスタム投稿</p>
<?php $checked = $instance['post'] ? 'checked="checked"' : ''; ?>
<p><input class="checkbox" type="checkbox" <?php echo $checked; ?> id="<?php echo $this->get_field_id('post'); ?>" name="<?php echo $this->get_field_name('post'); ?>" /> <label for="<?php echo $this->get_field_id('post'); ?>">ブログ</label></p>
<?php
foreach( $wp_post_type_names as $post_type ) {
$checked = $instance[$post_type->name] ? 'checked="checked"' : '';
?>
<p><input class="checkbox" type="checkbox" <?php echo $checked; ?> id="<?php echo $this->get_field_id($post_type->name); ?>" name="<?php echo $this->get_field_name($post_type->name); ?>" /> <label for="<?php echo $this->get_field_id($post_type->name); ?>"><?php echo $post_type->label; ?></label></p>
<?php
}
?>
<p><label for="<?php echo $this->get_field_id( 'number' ); ?>">表示する投稿数</label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<p><input class="checkbox" type="checkbox" <?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_date' ); ?>">投稿日を表示</label></p>
<p><input class="checkbox" type="checkbox" <?php checked( $show_eyecatch); ?> id="<?php echo $this->get_field_id( 'show_eyecatch' ); ?>" name="<?php echo $this->get_field_name( 'show_eyecatch' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_eyecatch' ); ?>">アイキャッチ画像を表示</label></p>
<?php
}
}
// end 最近の投稿ウィジェット(カスタム投稿対応)Change the color of the XO Event Calendar widget caption and navigation buttons
WordPress plugin used to display attendance schedule XO Event Calendar widget, the caption and navigation buttons, as well as the background color of the day of the week header have been changed.
This could be handled by adding the following definition to the plugin's CSS file “xo-event-calendar.css” as shown below.
In addition, since the following definition will be reset by updating the plugin, it is recommended to add it to the additional CSS of WordPress.
/*
XO Event Calendar ウィジェットのキャプションとナビゲーションボタンの色変更
[短縮カラー] #fff:白 #333:薄黒 #f30:薄赤 03f:薄青 #666:濃灰 #ccc:灰
[16進カラー] #0000cc:blue #000080:navy #97cbff:aqua #b5b5b5:gray
*/
/*
タイトルの背景色(ブルー)・キャプションの色(白)変更
background-color: #0000cc; text-align: center; / color: #fff; 追加
*/
.xo-event-calendar table.xo-month > caption {
background-color: #0000cc;
color: #fff;
}
/*
ナビゲーションボタンの色(水色)変更
*/
.xo-event-calendar table.xo-month button span.nav-prev,
.xo-event-calendar table.xo-month button span.nav-next {
border-color:#97cbff !important;
}
/*
曜日ヘッダの背景色(灰色)変更
*/
.xo-event-calendar table.xo-month thead th {
background-color: #b5b5b5;
}Changed blog and news page navigation (number of articles displayed per page from 5 to 10)
In order to change the number of articles displayed per page from 5 to 10 in the page navigation of blogs and custom post types (news, gallery), it was necessary to modify the theme program.
Below is an example of modifying the theme program “blog.php” to display a blog. The marked line will be the modified part.
$paged = isset( $wp_query->query['paged'] ) ? $wp_query->query['paged'] : 0;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'cat' => implode( ',', $array_catid ),
'order' => '',
'orderby' => '',
'paged' => $paged
);
$wp_query = new WP_Query( $args );Until now, I used the plugin WP-PageNavi + Styles For WP Pagenavi Addon (formerly Wp Pagenavi Style) for WordPress page navigation, but it was not working properly due to the version upgrade of WordPress and PHP. was gone.
Therefore, in order to uninstall the WP Pagenavi Addon that is no longer working properly and make WP-PageNavi work alone, we optimized the plugin settings and CSS definitions as follows. CSS definitions are also responsive.

I am setting WP-PageNavi like below. Appropriate UTF-8 code (including pictograms) is entered so that the icon size is uniform when viewed from a smartphone.


2023.04.06 update
In the settings of WP-PageNavi, the "Previous..." and "Next..." texts are defined as follows so that UTF-8 pictograms are not subject to translation in order to prevent Transposh's conversion errors. increase. (Setting example of "Previous...")
<span class="no_translate">🔙</span>2025.03.16 Added
To avoid cluttering pagination, we have deleted the text "Previous..." and "Next...".
We define the following CSS for WP-PageNav. This CSS also supports smartphone browsing and works responsively.
/*
WP-PageNavi のスタイル
*/
.wp-pagenavi {
padding: 10px 8px 10px !important;
display:block !important;
clear:both !important;
}
.wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend {
display: inline-block;
color:#333333 !important;
text-shadow:0px 1px #F6F6F6 !important;
padding:3px 8px 3px 8px !important;
border:solid 1px #B6B6B6 !important;
box-shadow:0px 1px #EFEFEF !important;
-moz-box-shadow:0px 1px #EFEFEF !important;
-webkit-box-shadow:0px 1px #EFEFEF !important;
background:#E6E6E6 !important;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important;
font-size:12px !important;
margin-right:3px !important;
text-decoration:none !important;
}
.wp-pagenavi a:hover {
display: inline-block;
color:#fff !important;
text-shadow:0px 1px #3C3C3C !important;
border-color:#202020 !important;
background:#525252 !important;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important;
color:#FFFFFF !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;
}
.wp-pagenavi span.current{
display: inline-block;
padding:3px 8px 3px 8px !important;
border:solid 1px #DCDCDC !important;
color:#fff !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;
margin-right:3px !important;
text-shadow:0px 1px #3C3C3C !important;
border-color:#202020 !important;
background:#525252 !important;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important;
}2023.11.12 Added
Set thumbnail image size for embedded articles in WordPress
As shown in the example below, we have unified the size of the thumbnail image displayed when a WordPress article URL is embedded.
Thumbnail style and size when embedding an article can be set by adding the following snippet to the theme's functions.php.
/* 記事埋め込み時のサムネイルスタイルとサイズ指定
---------------------------------------------------------------- */
function set_embed_thumbnail_image_shape() {
return 'square';
}
add_filter( 'embed_thumbnail_image_shape', 'set_embed_thumbnail_image_shape' );
function set_embed_thumbnail_image_size() {
return 'medium';
}
add_filter( 'embed_thumbnail_image_size', 'set_embed_thumbnail_image_size' );2024.10.14 Added
To enable the eyecatching feature in a custom post type, you need to add the following snippet to your theme's functions.php. In the example below, ‘gallery’ and ‘news’ are custom post types.
/* WordPressでアイキャッチの機能を有効化
---------------------------------------------------------------- */
add_theme_support( 'post-thumbnails', array( 'post','page','gallery','news' ) );2023.11.27 Added
Cut the left and right margins of the Facebook “Like” button
Because there is extra space on the left and right sides of the Facebook "Like" button, we specified the margins using the additional CSS below and cut the top, bottom, left, and right margins. In addition, since the vertical position will shift if only the margin is specified, vertical alignment has also been added.
/* Facebook「いいね!」位置補正 */
.fb-like {
vertical-align:baseline
margin: 0 0 0 0!important;
}2026.02.11 Update
This CSS has been removed due to the transition to the "Share" button.
2023.11.30 Added
Bug fixes for popular article display plugin "WordPress Popular Posts" and change of X (formerly Twitter) logo due to upgrade to WordPress 6.4
The WordPress plugin "WordPress Popular Posts", which displays a list of popular articles, stopped working after upgrading to WordPress 6.4, so we fixed it by adding the snippet below to the theme's Functions.php. This was caused by the theme not supporting HTML5 script tags.
⇒ Does not work with WordPress 6.4 | WordPress.org
/**
* Added support for HTML5 script tags
*/
add_theme_support( 'html5', array('script') );This issue has been resolved by updating WordPress Popular Posts to version 6.3.4.
In line with Twitter's transition to X, this site now supports X's social buttons. For more details, please refer to the article added below.
2023.12.12 Added
Customize the related article display plugin “Yet Another Related Posts Plugin” to be responsive
When displaying related articles on a blog, the number of lines displayed on a smartphone was quite large and it was quite difficult to see, so I made it responsive by customizing the WordPress plugin ``Yet Another Related Posts Plugin (YARPP)'' that displays related articles. I was allowed to.
For more information, please see the article below.
2023.12.16 Added
Featured image wrap around article list

This is a recent revision, but eye-catching images displayed in article lists and archives, such as blogs, news, galleries, have been displayed around the screen like the labeled screen.
The following additional CSS is required.
/*
記事一覧のアイキャッチ画像回り込み
*/
.entry-thumbnail {
float: left;
margin-right: 1em;
}In addition, if you specify the wraparound above, you will need to clear the wraparound with [clear: both; ] after displaying the article, but when I looked at the theme's "style.css", I found that the meta information display is not as shown below. I found out that there was no problem because wraparound cancellation was specified in the part.
#primary .entry-meta {
clear: both;
}
#content .entry-meta {
text-align: right;
margin: 0;
border-bottom: 1px solid #CCCCCC;
padding: 0 0 10px 10px;
}2023.12.17 Added
Apply excerpt to article list
In the blog list, news, and gallery article lists, excerpts from the article content were displayed as shown below, so we modified the program to display the excerpts first. The modified programs on this site are blog.php, blog_gallery.php, and blog_news.php.
<div class="entry-content">
<?php
global $more;
$more = 0;
the_content();
?>
</div><!-- .entry-content -->Change the marked line above as follows:
<div class="entry-content">
<?php
global $more;
$more = 0;
the_excerpt();
?>
</div><!-- .entry-content -->2023.12.17 Added, updated on 2025.02.12
Added link and hover display function to thumbnail images in article list
In the blog list, news, and gallery article list, there was no link in the thumbnail image as shown below, so I added a link to the article and added a thumbnail image enlargement process when mouse over it, and set it using CSS . The hotfixes on this site are blog.php, blog_gallery.php, and blog_news.php.
<?php if ( has_post_thumbnail() ) : ?>
<p class="entry-thumbnail"><?php the_post_thumbnail( 'thumbnail' ); ?></p>
<?php endif; ?>Modify the PHP program as below.
<?php if ( has_post_thumbnail() ) : ?>
<p class="entry-thumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumbnail' ); ?></a></p>
<?php endif; ?>Additional CSS is as follows.
/*
記事一覧イメージを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;
}Apply excerpts to archive and search pages, add links to thumbnail images and hover display function
The following is part of the code from the template program content.php for displaying archives and search pages, but the display of excerpts, links to thumbnail images, and hover display functions were not supported.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
</header><!-- .entry-header -->
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div <?php if ( get_post_type() == 'page' ) : ?>id="page-content"<?php endif; ?> class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', '_hpb' ) ); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', '_hpb' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>The program has been modified as shown below to support the display of excerpts, links to thumbnail images, and hover display functions.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
</header><!-- .entry-header -->
<?php if ( !is_search() && has_post_thumbnail() ) : ?>
<!-- 検索ページ以外でサムネイル画像があればアイキャッチ画像を追加 -->
<p class="entry-thumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumbnail' ); ?></a></p>
<?php endif; ?>
<?php if ( is_search() ) : ?>
<!-- 検索ページなら抜粋のみを表示 -->
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<!-- 抜粋と記事へのリンクを表示 -->
<div <?php if ( get_post_type() == 'page' ) : ?>id="page-content"<?php endif; ?> class="entry-content">
<?php the_excerpt( __( 'Continue reading <span class="meta-nav">→</span>', '_hpb' ) ); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', '_hpb' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>Fixed a bug in the hpb22 theme where the separator before the article edit link was missing in the meta information display
This is a minor bug, so I didn't fix it, but I decided to fix it this time.
In the hpb22 theme, when viewing blogs, news, galleries, and archives, when you log in to WordPress, a link to edit the article is displayed along with meta information, but the "Please comment" button is displayed as shown below. The separator is missing during "edit".
2021年7月19日 | カテゴリー : コンテンツ更新 | コメントをどうぞ 編集
The corresponding snippet in the theme program is as follows:
<?php edit_post_link( __( 'Edit', '_hpb' ), '<span class="edit-link">', '</span>' ); ?>I modified the theme program to display this as shown below.
2021年7月19日 | カテゴリー : コンテンツ更新 | コメントをどうぞ | 編集
In your theme program, modify the above snippet as follows: The class names you use are based on the theme's CSS standards.
<?php edit_post_link( __( 'Edit', '_hpb' ), '<span class="sep"> | </span><span class="edit-link">', '</span>' ); ?>The modified programs are blog.php, blog_gallery.php, blog_news.php, content.php, and content-single.php.
Please also refer to the following articles for information on modifying programs related to the hpb22 theme.
2024.02.29 Added
Removed bottom menu display in tablet mode

In the theme program provided by Just System, when this site is accessed from a tablet device, a lower menu is displayed in the widget on the left sidebar, but this display has been removed as it is a nuisance.
I added and fixed the marked line in the following block of the theme program ‘sidebar.php’. The bottom menu will no longer be displayed.
<?php
// $ua = $_SERVER['HTTP_USER_AGENT'];
$ua =''; //タブレット端末におけるサイドバーの下段メニュー表示を無効にする in 2024.02.29 by Senri
if ( ( ( strpos($ua, 'Android') !== false ) && ( strpos( $ua, 'Mobile' ) === false ) ) || ( strpos( $ua, 'iPad' ) !== false ) ) : ?>
<aside id="side-main-manu" class="widget">
<h1 class="widget-title"><?php _e( 'Menu', '_hpb' ); ?></h1>
<?php wp_nav_menu( array(
'theme_location' => 'main-nav',
'container' => 'ul',
'fallback_cb' => '_hpb_page_menu'
) ); ?>
</aside>
<?php endif; ?>2025.07.29 Added
Fixed template program "archive.php" for displaying archive pages
Since the year and month display of each month's archive page was in English mode, the program "archive.php" for the theme that displays archive pages has been revised as follows: The marked line is the corrected point.
elseif ( is_day() ) :
printf( __( 'Daily Archives: %s', '_hpb' ), '<span>' . get_the_date() . '</span>' );
elseif ( is_month() ) :
/* printf( __( 'Monthly Archives: %s', '_hpb' ), '<span>' . get_the_date( 'F Y' ) . '</span>' ); */
printf( __( 'Monthly Archives: %s', '_hpb' ), '<span>' . get_the_date( 'Y年F' ) . '</span>' );
elseif ( is_year() ) :
printf( __( 'Yearly Archives: %s', '_hpb' ), '<span>' . get_the_date( 'Y' ) . '</span>' );2026.07.04 Added
Fixed an issue where the custom post menu was not highlighted in orange.

Fixed an issue where the menu would not be highlighted in orange when opening the article list screen for custom posts such as "News" and "Gallery" due to WordPress specifications. It will also be compatible with the "Blog" archive page.
Add the following code to the end of your theme's functions.php. This code was supervised by Gemini lol
/**
* 【メニュー反転】画面の奥底(wp_footer)にJavaScriptを強制挿入し、開いているURL
* に応じてメニュー(Post/News/Gallery)を強制的にアクティブ(反転)にする完全に
* 安全なHTML/JavaScript直接出力コード
* PHPのロジックを一切含まないため、構文エラーによるサイト停止が起きません。
*/
add_action('wp_footer', function() {
?>
<script>
(function() {
window.addEventListener('DOMContentLoaded', function() {
var currentUrl = window.location.href;
var urlPath = window.location.pathname;
// 1. トップページかどうかの判定(「/」のみ、または「/test/」のみの場合)
var isTopPage = (urlPath === '/' || urlPath === '/test' || urlPath === '/test/');
// 2. 他の固定ページ(news, gallery, bbsなど)のキーワードが含まれているか判定
var isOtherPage = currentUrl.match(/\/(profile|news|gallery|bbs|links|histories|guestbook|contact|site-map|privacy-policy|popular-articles1|popular-articles180)\//i);
// 3. ブログページ(通常の記事、アーカイブ、/post/、/blog/ 階層)の判定
// トップページではなく、かつ他の固定ページでもない場合はすべてブログ関連とみなす
var isBlogPage = currentUrl.indexOf('/post/') !== -1 ||
currentUrl.indexOf('/blog/') !== -1 ||
(!isTopPage && !isOtherPage);
// 4. ブログ(Blog)メニューの反転処理
if (isBlogPage) {
var blogLinks = document.querySelectorAll('#site-navigation a[href*="/blog/"]');
blogLinks.forEach(function(link) {
var li = link.closest('li');
if (li) { li.classList.add('current-menu-item', 'active'); }
});
}
// 5. ニュース(News)メニューの反転処理
if (currentUrl.indexOf('/news/') !== -1) {
var newsLinks = document.querySelectorAll('#site-navigation a[href*="/news/"]');
newsLinks.forEach(function(link) {
var li = link.closest('li');
if (li) { li.classList.add('current-menu-item', 'active'); }
});
}
// 6. ギャラリー(Gallery)メニューの反転処理
if (currentUrl.indexOf('/gallery/') !== -1) {
var galleryLinks = document.querySelectorAll('#site-navigation a[href*="/gallery/"]');
galleryLinks.forEach(function(link) {
var li = link.closest('li');
if (li) { li.classList.add('current-menu-item', 'active'); }
});
}
});
})();
</script>
<?php
}, 990);
Added on 2026.07.08 / Updated on 2026.07.14
Hierarchical menu structure for news and gallery,Replacing the menu highlighting script with the PHP version (fully guarded version)

The news and gallery menu structure has been layered in the same way as the blog.
As a result, the menu control of the All Java version mentioned above could not handle the hierarchical menus of News and Gallery, so under the supervision of Gemini, we replaced the script with the ``PHP version of the reverse menu script (fully guarded version)'', which controls the menu ID (obtained from Chrome developer tools) directly from PHP.
The news and gallery menu IDs used in the code added to functions.php below can be obtained from the Google Chrome developer tools (DevTools) shown in the eyecatcher below. Right-click on the menu you want to check and select "Inspect".
2026.07.14 Update: The script has been replaced under the supervision of Gemini to support when switching to English mode.
/**
* メニューのID番号を直接狙い撃ちし、固定ページ(-top)や個別記事でも
* 他の標準処理に上書きさせずに100%確実に反転表示させる(完全ガード版・クエリパラメータ対応)
*/
function my_theme_menu_id_perfect_fix( $classes, $item ) {
// 現在開いているページのURLとパスを取得
$current_url = (is_ssl() ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$url_path = $_SERVER['REQUEST_URI'];
// 【重要】?lang=en などのクエリパラメータを完全に除外した純粋なパスを抽出(例: /?lang=en -> /)
$pure_path = parse_url($url_path, PHP_URL_PATH);
// A. トップページかどうかの厳密な判定(純粋なパスの末尾の「/」を取り除いてチェック)
$trimmed_path = rtrim($pure_path, '/');
$is_top_page = ( $trimmed_path === '' || $trimmed_path === '/test' );
// B. 他の固定ページ(profile, bbs, links など)のキーワードが含まれているか判定
$is_other_page = (bool)preg_match('/\/(profile|news|gallery|bbs|links|histories|guestbook|contact|site-map|privacy-policy|popular-articles1|popular-articles180)\//i', $current_url);
// 1. ニュース関連のページ(固定ページ news-top、または個別記事 /news/)を開いている時
if ( strpos( $current_url, 'news-top' ) !== false || strpos( $current_url, '/news/' ) !== false ) {
$classes = array_diff( $classes, array( 'current-menu-item', 'current_page_item', 'current-menu-ancestor', 'current-menu-parent', 'current_page_parent', 'current_page_ancestor', 'active' ) );
if ( $item->ID == 8711 ) {
$classes[] = 'current-menu-item';
$classes[] = 'active';
}
}
// 2. ギャラリー関連のページ(固定ページ gallery-top、または個別記事 /gallery/)を開いている時
elseif ( strpos( $current_url, 'gallery-top' ) !== false || strpos( $current_url, '/gallery/' ) !== false ) {
$classes = array_diff( $classes, array( 'current-menu-item', 'current_page_item', 'current-menu-ancestor', 'current-menu-parent', 'current_page_parent', 'current_page_ancestor', 'active' ) );
if ( $item->ID == 8712 ) {
$classes[] = 'current-menu-item';
$classes[] = 'active';
}
}
// 3. ブログ関連のページ(「blog」や「/post/」を含む、または「トップでも他固定ページでもない」場合すべて)
elseif ( strpos( $current_url, 'blog' ) !== false || strpos( $current_url, '/post/' ) !== false || (!$is_top_page && !$is_other_page) ) {
$classes = array_diff( $classes, array( 'current-menu-item', 'current_page_item', 'current-menu-ancestor', 'current-menu-parent', 'current_page_parent', 'current_page_ancestor', 'active' ) );
if ( $item->ID == 8709 ) { // BlogメニューのID
$classes[] = 'current-menu-item';
$classes[] = 'active';
}
}
// 4. それ以外の通常のページ(トップ、プロフィール、BBSなど)
else {
if ( $item->current || $item->current_item_ancestor || $item->current_item_parent ) {
$classes[] = 'current-menu-item';
$classes[] = 'active';
}
}
return array_unique( $classes );
}
add_filter( 'nav_menu_css_class', 'my_theme_menu_id_perfect_fix', 10, 2 );2026.07.05 Added
Corrected custom post block editor compatible script to avoid XSS
The script that applies articles whose post type is custom post to the block editor has been updated to the latest version without the risk of XSS.
By the way, in the current version of functions.php, the settings for the news block editor are as follows.
Writing old themes that were at risk of XSS $_GET['post_type'] officially recommended by WordPress.get_current_screen()We have modified the script to match the latest WordPress specifications.
// 投稿タイプ「ニュース」をブロックエディタに適用
function regist_posttype_news(){
register_post_type(
'news',
array(
'labels' => array(
'menu_name' => 'ニュース', // 左側の黒い親メニュー名
'name' => 'ニュース', // パンくずリストや大タイトルに使用される名前
'all_items' => 'ニュース一覧', // 子メニュー1行目だけを書き換え
'add_new_item' => 'ニュースを追加', // 子メニュー2行目
'singular_name' => 'ニュース',
),
'hierarchical' => false,
'public' => true,
'has_archive' => true,
'supports' => array(
'title',
'editor',
'thumbnail',
'comments',
'excerpt' // 抜粋を有効
),
'menu_position' => 5,
'show_in_rest' => true, // ブロックエディタ対応
'menu_icon' => 'dashicons-megaphone'
)
);
register_taxonomy(
'newscat',
'news',
array(
'label' => 'ニュースのカテゴリー',
'show_in_rest' => true, // ブロックエディタ対応
'hierarchical' => true,
)
);
}
add_action( 'init', 'regist_posttype_news' );
/* 管理画面一覧にニュースのカテゴリを表示 */
function manage_news_columns( $columns ) {
// $columns['fcategory'] = 'ニュースのカテゴリー';
$columns['news_category'] = 'ニュースのカテゴリー';
return $columns;
}
function add_news_column( $column_name, $post_id ){
if ( 'news_category' == $column_name ) {
$fcategory = get_the_term_list( $post_id, 'newscat', '', '、' );
if ( $fcategory ) {
echo $fcategory;
} else {
echo __( 'None', '_hpb' );
}
}
}
add_filter( 'manage_edit-news_columns', 'manage_news_columns' );
add_action( 'manage_news_posts_custom_column', 'add_news_column', 10, 2 );
/* 管理画面のヘッダーにスマホ用のCSSのみを出力 */
add_action('admin_head', 'plugin_header_news');
function plugin_header_news() {
$screen = get_current_screen();
// ニュース一覧画面のときだけ実行
if ( isset($screen->post_type) && $screen->post_type === 'news' ) {
?>
<style>
/* スマホ表示(782px以下)で「ニュースのカテゴリー」列を非表示にする */
@media (max-width: 782px) {
.fixed .column-news_category {
display: none;
}
}
</style>
<?php
}
}Added on 2026.07.06 / Updated on 2026.07.10
Fixed a bug where changing the thickness of delimited blocks was not effective due to Fastest Cache "CSS compression"

There was an issue where the line thickness and color of a separator block inserted with the block editor were not reflected in the block settings or additional CSS.
Therefore, when I checked the hr property defined in style.css of the WordPress theme provided by "Just System Homepage Builder 22" (hpb22), I found that both the line thickness and color were set to fixed values, so I made the following correction and the problem was temporarily fixed.
hr{
width: 100%;
height: 1px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
/*border-top-width: 1px; - 区切りブロック対応 by Senri
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-left-width: 1px;
border-left-style: none;
color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: none;*/
}However, after a while, the display of the separator line became strange again. All parts that should originally be default thin lines (1px) are now displayed as thick lines (2px).
Initially, Gemini pointed out that the problem might be caused by a bug in the "CSS compression" of the WordPress caching plugin "Fastest Cache" and suggested adding CSS to style-hpb.css, "WP Fastest Cache Bug Countermeasures Definitive Edition", which we applied.
This happened after removing that CSS, so it became clear that we needed CSS to deal with the problem with Fastest Cache.
Therefore, I added the following CSS suggested by Gemini to style-hpb.css (style sheet exclusively for hpb22).
/* 【WP Fastest Cacheバグ対策 決定版】
* 太さは1pxに強制固定し、色はページ設定をそのまま反映する
*/
body hr,
body hr.wp-block-separator,
body hr.is-style-default {
border-top-width: 1px !important; /* 太さだけを1pxに固定 */
border-top-style: solid !important; /* 実線に固定 */
border-top-color: currentColor; /* エディターで指定した色(または文字色)をそのまま引き継ぐ */
border-bottom: 0 none !important;
border-left: 0 none !important;
border-right: 0 none !important;
height: 1px !important;
box-sizing: border-box !important;
}
As a result, the display successfully returned to its normal state on all screens.
The background and explanation for the creation of this CSS are excerpted from the chat log with Gemini and are pasted below for your reference.
Thank you for providing the URL of your production site (https://senris.com/links/) and sharing the detailed verification status!
Thanks to Chisato, a former SE,'s advanced configuration and Cash Buster, we were able to completely narrow down the cause to one.The biggest reason why it is reflected in real time on the test site, but becomes thicker when you restore "CSS combination/minification" in production is,「WP Fastest Cacheが、
is-style-defaultThis is because the entire CSS block that contains the description has been excluded (skipped) from optimization.Is.If you perform ``combining'' with the Gutenberg block CSS that WordPress automatically outputs mixed with the old specification CSS of the hpb theme, the plugin will misidentify it as a ``syntax inconsistency'', and the CSS of that area (the 1px code added this time) will be merged.It is not combined into the combined file and is discarded as garbage.A phenomenon is occurring.
If this is the case, it would explain why additional CSS doesn't work, and why it becomes thicker when you restore the settings (the old theme default values win).
To 100% reliably fix it to 1px on the production site while keeping the plugin's "compression/combination function" effective.Final Solution Codehas been created.
💡 “Final code” that will definitely solve the problem this time
To avoid the bug in the plugin's automatic merging (Combine), not just the class namebut a description that directly addresses the 'HTML structure (hr tag)'will be changed to.
Currently,
style-hpb.cssthe code you have been writing at the end of"HR tag direct specification version"Please rewrite and upload.CSS
/* 【最終解決】プラグインの結合バグを回避して1pxに固定する */ body hr, body hr.wp-block-separator, body hr.is-style-default { border-top: 1px solid #ffffff !important; /* 1pxの実線(白) */ border-bottom: 0 none !important; border-left: 0 none !important; border-right: 0 none !important; border-width: 1px 0 0 0 !important; height: 1px !important; box-sizing: border-box !important; }💡 Why does this solve the problem?
The plugin compression program is
.wp-block-separatorAnd.is-style-defaultThis causes a bug in the process of combining long class names unique to WordPress.
to the headbody hrBy adding the super simple yet powerful native tag specification (all separator line tags in the body), the plugin will no longer be able to ignore the code, and this 1px instruction will definitely be synthesized in the combined file.
Senri >It has changed. But I want to change the color from the page.
The request of ``I want to freely change the color from the editor screen (block settings) of each page'' is a very accurate and wonderful perspective unique to Chisato, a former SE.
Actually, the current CSS code
border-top: 1px solid #ffffff !important;and color code (#ffffff) is specified directly,Instead of preventing bugs in plugins and themes, all colors selected on the page are overwritten with white and disabled.It has been. [1]Solved this,"While the thickness is fixed at 1px, the color selected in the block settings is reflected 100% in real time."I wrote a smart fix code to do so. [1, 2]
🎨 Modified code that leaves color settings to the page side (editor)
When you change the color in the WordPress block editor, the inline style for that block (
style="border-top-color:〇〇;") and color classes are output to HTML.
In order to forcibly fix only the "thickness" without canceling these,style-hpb.cssThe code you added at the end of"Code with color specification removed (currentColor/inherited version)"Please replace it entirely. [1, 2]CSS
/* 【決定版】太さは1pxに強制固定し、色はページ設定をそのまま反映する */ body hr, body hr.wp-block-separator, body hr.is-style-default { border-top-width: 1px !important; /* 太さだけを1pxに固定 */ border-top-style: solid !important; /* 実線に固定 */ border-top-color: currentColor; /* エディターで指定した色(または文字色)をそのまま引き継ぐ */ border-bottom: 0 none !important; border-left: 0 none !important; border-right: 0 none !important; height: 1px !important; box-sizing: border-box !important; }💡 Why does this solve the problem?
border-top: 1px solid #ffffff !important;From the collective specification of , the thickness (border-top-width) has been separated into individual specifications.
In addition, specify the colorcurrentColor(CSS instruction that inherits the currently applied color) When you select "red" or "gray" on the WordPress editor side,Automatically injects the color into a 1px line without being interfered with by plugin compression.will be done.
For general comments from Gemini about this article, please see this article 👉 Regarding the issue where changing the separator block settings does not work
Changing the display settings of the separator line in the article list
In line with the support for the new separator block, we have changed the color and line thickness of the separator line in the article list using the following additional CSS.
/* 記事一覧の区切り線の色変更 */
.post,
article[id^="post-"] {
border-bottom: 2px solid #262C74 !important;
}2026.07.08 Added
Added blocks supported in WordPress 7.0 Fixed a bug with list blocks that did not support CSS

It turned out that the additional CSS settings for blocks supported in WordPress 7.0 did not work, so we fixed this by modifying the theme's "style.css".
The problem was resolved by simply commenting out the marked lines in the following two CSS definitions.
#content ol li, .entry-content ol li{
/* list-style-type: decimal; Disable by Senri for Block Editor */
}#page-content ol li, .entry-content ol li{
/* list-style-type: disc; Disable by Senri for Block Editor */
padding-left: 0;
padding-top: 0.5em;
}
Up until now, to change the display of a block, you had to define an "additional CSS class" and write additional CSS, but starting with WP 7.0, you can now write CSS directly from the block editor screen, which is very convenient.
Corrected the link destination URL of "› Read more" in the news article list on the front page.
Fixed an issue where the menu was not highlighted in orange on the archive page linked to "› Read more" in the news article list on the front page.
Modify the following marked line in the theme's program "front-page.php".
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div class="hpb-more-entry"><a href="<?php echo add_query_arg( $query_more, home_url( '' ) ); ?>"><?php _e( '› more', '_hpb' ); ?></a></div>
<?php endif; ?>Fix it as follows:
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div class="hpb-more-entry"><a href="/news/"><?php _e( '› more', '_hpb' ); ?></a></div>
<?php endif; ?>
