Final update date: April 24, 2025 at 9:37 PM
The text of the blog post body of this site made with WordPress was too small to read, so we decided to improve it with site maintenance.
The text size depends on the CSS that comes with the theme's program, but you can resize the entire article in WordPress settings.
table of contents
Change the text size of an article
To set it up, open the WordPress admin screen, add the following CSS from "Appearance" to "Customize" ⇒ "Add CSS".
p { font-size:14px;}
The setting is "14px", which is equivalent to 10.5pt, roughly equivalent to the text size of a typical newspaper.
If possible, I would like to set it to a larger size, but if I make it too large, the web design will collapse, so I set it to a little larger than the conventional size (10px).
Just to be safe, I checked the style.css of the theme provided by JustSystem (hpb21), and found the following definition:
Therefore, since the default character size standard of the browser is 1rem = 16px, it seems that 16×62.5% = 10px (7.5pt) is set to the default character size.
By the way, when I changed this value to 87.5% (14px), I found that the web design was completely broken, so I could not change this value. 😓
html{
font-size: 62.5%;
/* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790
overflow-y: scroll;
/* Keeps page centred in all browsers regardless of content height */
-webkit-text-size-adjust: 100%;
/* Prevents iOS text size adjust after orientation change, without disabling user zoom */
-ms-text-size-adjust: 100%;
/* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}2022.08.11 Update
In the above CSS definition, the characters in the Jetpack subscription widget become large and uncool, so we applied the text size change only to the article body.
I redefined the CSS as follows:
.entry-content p {
font-size: 14px;
}2025.04.03 Added
The font size setting for style.css for the current theme (hpb22) is based on 12px, as shown in the line marked below.
body{
margin: 0;
padding: 0;
text-align: left;
font-size: 75%; /* = 12px: 0.75×16 by Senri */
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
color: #ca9b33; /* 標準文字色 */
background-color: #000000;
background-image : url(img/bg_body.png);
background-position: center -20px;
background-repeat: repeat-x;
min-width: 1000px;
}
The font size is set to 14px in accordance with the previous policy, but in order to work with the browser settings, the additional CSS sets the font size of the body (paragraph block) by specifying em, as shown by the line marked below.
/*
段落ブロックの文字サイズとパディング、行間の変更
*/
.entry-content p {
font-size: 1.167em; /* 14px */
padding-top: 0.300em;
padding-bottom: 0.300em;
line-height: 1.5;
}
Due to the above settings change, style.css has been changed to the font size of the heading blocks (h1-h6) as follows:
h1(19px:1.583em) / h2(18px:1.500em) / h3(17px:1.417em) / h4(16px:1.333em)
h5(15px:1.250em) / h6,p(14px:1.167em) / h6(13px:1.083em) / Basic (12px:1.000em)
Display performance improvements
There is a feature called Jetpack Boost in the plugin Jetpack provided by WordPress home Automattic, so I installed it and tried it out.
The features I have enabled are "Optimize CSS loading", "Defer Non-Essential JavaScript", and "Lazy Load", but has the performance improved only a little? It was about that. I'm particularly concerned about the low mobile score. This value also affects SEO.
Again, you've installed too many plugins, so you won't see a dramatic performance boost unless you reduce them.
The plugins that are heavy load on this site are Transposh, NewStatPress, WordPress Popular Posts, Site Kit by Google, Jetpack (laughs), so I think that it will be faster if you uninstall plugins around here.
2022.08.09 update
When I turned on "Optimize CSS loading" in the Jetpack Boost feature selection, I changed it to off because it didn't look pretty.
This dropped the desktop score from 76 to 68, but the mobile score remains the same at 26, so that's fine.
Introducing the XO Event Calendar Plug-in
The paid plugin "Business Day Calendar" for displaying attendance schedules stopped working with the upgrade to WordPress 6.0, so I replaced it with the following plugin.
To change the color of the XO Event Calendar title and navigation buttons, add the following CSS.
/* タイトルの背景色（ブルー）・キャプションの色（白）変更 */
/* background-color: #0000cc; text-align: center; / color: #fff; 追加
*/
.xo-event-calendar table.xo-month > caption {
background-color: #0000cc;
color: #fff;
}
/* ナビゲーションボタンの色（水色）変更 (現在は無効) */
/* color: #97cbff; 追加 (現在は無効)
*/
.xo-event-calendar table.xo-month button span.nav-prev,
.xo-event-calendar table.xo-month button span.nav-next {
border-color: #97cbff; !important;
}Jetpack Related ArticlesDeactivating after Module Introduction ⇒
The Contextual Related Posts plugin I've been using so far is for viewing related articles, but the display of related articles wasn't very appropriate, so I replaced it with the following Jetpack Related Articles module.
At the same time, the additional CSS was changed as follows:
/*
Jetpack関連記事のh3文字サイズ変更
*/
.jp-relatedposts h3 {
font-size:16px !important;
}
/*
Jetpack関連記事のpadding-topを0にする
*/
#jp-relatedposts{
padding-top: 0 !important;
}
/*********************************
Jetpack関連記事の画像とタイトルの周りへの影付と画像サイズ・タイトルの文字サイズ変更
*********************************/
.jp-relatedposts-post-img{
box-shadow: 0 -2px 5px #999;
width: 175px;
min-width: 175px;
height: 100px;
}
.jp-relatedposts-post-title{
box-shadow: 0 2px 5px #999;
padding:5px;
font-size: 10px !important;
}To change the number of Jetpack related articles from the default of 3 to 6, the following code was added to the functions.php of the theme.
//-----------------------------------------------------
// Jetpack 関連記事数変更
//-----------------------------------------------------
function jetpackme_more_related_posts( $options ) {
$options['size'] = 6;
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );2022.08.14 Correction
Yet Another Related Posts Plugin (YARPP) Introducing the Plugin
The Jetpack Related Articles module described above is impeccable in terms of the Related Article Detection feature, but unfortunately it was discontinued due to incomplete and terrible responsiveness.
There was also a negative impact of resizing thumbnail images via Jetpack's CDN, and I also suffered from a problem that caused thumbnails to appear strange in articles that later changed thumbnail images.
Therefore, I installed the following plugin "Yet Another Related Posts Plugin (YARPP)" instead.
The additional CSS to YARPP was defined as follows: ( also added reCAPTCHA v3 badge hide )
/*
YARPPの文字サイズ変更
*/
.yarpp-thumbnail-title {
font-size:9px !important;
font-weight:normal !important;
}
/*
YARPPのイメージへのhover時影付け
*/
.yarpp-related img:hover {
box-shadow: 0 -2px 5px #999;
}
/*--------------------------------
関連記事(YARPP)のカスタマイズ
--------------------------------*/
/*yarppの領域*/
.related-post {
width:100%;/*①記事幅に100%フィット*/
overflow:hidden;
margin-top:5px;
font-size:0;
}
/*１記事の領域*/
.related-entry {
vertical-align: top;
display:inline-block;
width:22%;/*②１記事の領域（幅）*/
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%;/*１記事の領域幅にフィット*/
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);
}
/*--------------------------------
メディアクエリ（スマホ対応）by Senri
---------------------------------*/
@media (max-width:480px) {
.related-entry {
/* YARPP の文字サイズを変更 */
font-size: 9px;
}
}
/*
reCAPTCHA v3 のバッジを非表示にする
*/
.grecaptcha-badge { visibility: hidden; }As for the display of related articles, by carefully setting the application algorithm, we were able to obtain satisfactory results.
2025.04.24 Added
Decorate related articles responsively CSS has also been added to the
Introducing the Jetpack Comment Module
To make the comments section of an article appear smarter, the following Jetpack comment modules have been enabled:
2022.08.15 Update
Redesign a static page
Fixed page design has been revised.
We have changed the design of the table by allowing individual CSS to be applied to the TOP page and by defining the following additional CSS:
/*
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;
}
2025.04.24 Added
The above code has been revised due to the WordPress theme renovation and web design changes.
For more information, please see the related article below.
