子-7. 全体の文字サイズを大きくする

『fsvbasic』は本当によく出来たテーマだと思いますが、全体的に文字サイズが小さ過ぎますよね。
 

元の文字サイズ


 

変更した文字サイズ


 

重ねて比較

グリーンに色付けしたのが元のサイズです。

 

文字サイズを変更する方法

これは、今までのようにPHPの加工だけでは出来ません。[style.css]も加工します。

子テーマの header.php

『fsvbasicのコピー』フォルダから[header.php]ファイルを『fsvbasic-child』フォルダに移動します。
[header.php]を全文削除してコピペで以下に書き換えます。
変更点は163行目です。(コピペのPCエディターで確認して下さい。)

<?php
/**
 * The Header template for our theme
 *
 * @package WordPress
 * @subpackage FSVBASIC
 * @since FSVBASIC 1.1
 */
?>
 
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
 
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
 
<?php wp_head(); ?>
 
</head>
 
<body <?php body_class(); ?>>
 
<div id="layout">
 
<div id="page">
 
<div id="masthead" class="site-header-area" role="banner">
 
<div class="component-inner">
 
<div id="header-menu-button" class="menu-load-button">
 
<button id="button-toggle-menu"><span class="dashicons dashicons-menu"></span></button>
 
</div><!-- #header-menu-button -->
 
<?php
 
$options = fsvbasic_get_theme_options();
 
if ( !isset( $options[ 'header_logo' ] ) ) { $opHeaderLogo = ''; }
else { $opHeaderLogo = $options[ 'header_logo' ]; }
 
if ( !isset( $options[ 'head_large_text' ] ) ) { $opHeadLargeText = 'TEL:0120-00-0000'; }
else { $opHeadLargeText = $options[ 'head_large_text' ]; }
 
if ( !isset( $options[ 'head_text' ] ) ) { $opHeadText = 'texttexttexttexttext'; }
else { $opHeadText = $options[ 'head_text' ]; }
 
if ( !isset( $options[ 'link_sitemap' ] ) ) { $opLinkMap = '#'; }
else { $opLinkMap = $options[ 'link_sitemap' ]; }
 
if ( !isset( $options[ 'link_contact' ] ) ) { $opLinkCont = 'mailto:'; }
else { $opLinkCont = $options[ 'link_contact' ]; }
 
if ( ( $opLinkMap ) && ( $opLinkCont ) ) { $hw_linkclass = 'hw_link2'; }
elseif ( ! ( $opLinkMap ) && ! ( $opLinkCont ) ) { $hw_linkclass = 'hw_link0'; }
else { $hw_linkclass = 'hw_link1'; }
 
if ( ( $opHeadLargeText == "" ) && ( $opHeadText == "" ) && ( $opLinkMap == "" ) && ( $opLinkCont == "" ) ) : // #header-title-area Class Settings ?>
 
<div id="header-title-area" class="header-title-only">
 
<?php else: // #header-title-area Class Settings ?>
 
<div id="header-title-area" class="header-title-area">
 
<?php endif; // #header-title-area Class Settings
 
if ( $opHeaderLogo ) :
 
    $header_main_class = 'site-title-img';
    $header_main_html = '<img src="' . $opHeaderLogo . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" />';
 
else : // if ( $opHeaderLogo )
 
    $header_main_class = 'site-title';
    $header_main_html = get_bloginfo( 'name' );
 
endif; // if ( $opHeaderLogo )
 
if ( is_front_page() && is_home() ) : ?>
<h1 class="<?php echo $header_main_class; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo $header_main_html; ?></a></h1>
<?php else : ?>
<p class="<?php echo $header_main_class; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo $header_main_html; ?></a></p>
<?php endif;
 
$description = get_bloginfo( 'description', 'display' );
 
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php endif; ?>
 
</div><!-- #header-title-area -->
 
<div id="header-widget-area">
 
<?php
 
if ( ( $opLinkMap ) || ( $opLinkCont ) ) : ?>
 
<p class="<?php echo $hw_linkclass; ?>">
<?php if ( $opLinkMap ) : ?><a href="<?php echo $opLinkMap; ?>"><span><?php _e( 'Sitemap', 'fsvbasic' ); ?></span></a><?php endif; ?>
<?php if ( $opLinkCont ) : ?><a href="<?php echo $opLinkCont; ?>"><span><?php _e( 'Contact', 'fsvbasic' ); ?></span></a><?php endif; ?>
</p>
 
<?php endif;
 
if ( $opHeadText ) : ?><p class="hw_text"><?php echo $opHeadText; ?></p><?php endif;
if ( $opHeadLargeText ) : ?><p class="hw_text_large"><?php echo $opHeadLargeText; ?></p><?php endif; ?>
 
</div><!-- #header-widget-area -->
 
</div><!-- .component-inner -->
 
</div><!-- #masthead -->
 
<div id="header-nav-area" class="navigation-area clear">
 
<div class="component-inner clear">
 
<a class="assistive-text" href="#content"><?php esc_html_e( 'Skip to content', 'fsvbasic' ); ?></a>
 
<nav id="site-navigation" class="main-navigation" role="navigation">
 
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'div', 'container_class' => 'menu' , 'menu_class' => 'menu' ) ); ?>
 
</nav><!-- #site-navigation -->
 
</div><!-- .component-inner -->
 
</div><!-- #header-nav-area -->
 
<?php
 
if ( is_home() || is_front_page() ) :
 
    $slide_count = 0;
 
    for ( $i = 1 ; $i < 6 ; $i++ ) {
 
        // Slider URL
        if ( !isset( $options{ "slide" . $i . "_url" } ) ) { ${ "opSlide" . $i . "Url" } = '#'; /** Default Settings **/ }
        else { ${ "opSlide" . $i . "Url" } =  $options{ "slide" . $i . "_url" }; }
 
        if ( ${ "opSlide" . $i . "Url" } ) { ${ "opSlide" . $i . "Url" } = '<a href="' . ${ "opSlide" . $i . "Url" } . '">' ; }
 
        // Slider Caption
        if ( !isset( $options{ "slide" . $i . "_cap" } ) ) { ${ "opSlide" . $i . "Cap" } = 'slide' . $i . ' caption'; /** Default Settings **/ }
        else { ${ "opSlide" . $i . "Cap" } =  $options{ "slide" . $i . "_cap" }; }
 
        // Slider Images
        if ( !isset( $options{ "slide" . $i . "_pic" } ) ) { ${ "opSlide" . $i . "Pic" } = get_template_directory_uri() . '/images/header_00' . $i . '.jpg' ; /** Default Settings **/ }
        else { ${ "opSlide" . $i . "Pic" } =  $options{ "slide" . $i . "_pic" }; }
 
        if ( ${ "opSlide" . $i . "Pic" } ) {
 
            $slide_count++ ;
 
            if ( ! strstr( ${ "opSlide" . $i . "Pic" } , get_template_directory_uri() ) ) { ${ "opSlide" . $i . "Pic" } = aq_resize( ${ "opSlide" . $i . "Pic" }, 1382, 346, $crop = true , $single = true, $upscale = true ); }
 
            ${ "opSlide" . $i . "Pic" } = '<img src="' . ${ "opSlide" . $i . "Pic" } . '" alt="' . ${ "opSlide" . $i . "Cap" } . '">' ;
 
        }
 
    }
 
    if ( $slide_count > 0 ) : ?>
 
<div id="header-image" class="header-image-area">
 
<div class="component-inner">
 
<?php if ( $slide_count == 1 ) : ?><div class="main_slider_one"><?php endif; ?>
 
<ul class="main_slider">
 
<?php
 
    for ( $i = 1 ; $i < 6 ; $i++ ) {
 
        if ( ${ "opSlide" . $i . "Pic" } ) {
 
            echo '<li>' . "\n";
 
            echo ${ "opSlide" . $i . "Url" } . "\n";
            echo ${ "opSlide" . $i . "Pic" } . "\n";
            if ( ${ "opSlide" . $i . "Cap" } ) { echo '<div class="bx-caption"><span>' . ${ "opSlide" . $i . "Cap" } . '</span></div>' . "\n"; }
            if ( ${ "opSlide" . $i . "Url" } ) { echo '</a>' . "\n"; }
 
            echo '</li>' . "\n\n";
 
        }
 
    }
 
?>
 
</ul><!-- .main_slider -->
 
<?php if ( $slide_count == 1 ) : ?></div><?php endif; ?>
 
</div><!-- .component-inner -->
 
</div><!-- #header-title-area -->
 
<?php
 
    endif; // if ( $slide_count > 0 )
 
endif; // is_home()/is_front_page() ?>

 
163行目:1382, 346 が変更箇所です。

if ( ! strstr( ${ "opSlide" . $i . "Pic" } , get_template_directory_uri() ) ) { ${ "opSlide" . $i . "Pic" } = aq_resize( ${ "opSlide" . $i . "Pic" }, 1382, 346, $crop = true , $single = true, $upscale = true ); }

デフォルトでは、『1200, 300』となっています。
 

値の出し方

これは後から説明する[style.css]に関連した数値です。
親テーマのデフォルトは以下になっています。
デフォルトのフォントサイズ:62.5%
デフォルトのスライド画像幅:1200ピクセル

計算式は以下になりますね。
1200÷62.5=19.2

スライド画像幅を計算

フォントサイズ:72%
19.2×72=1382.4

フォントサイズ:67%
19.2×67=1286.4

フォントサイズ:75%
19.2×75=1440

スライド画像高さ

デフォルト画像サイズ:1200×300ピクセルなので、そのサイズの画像を画像加工ソフト(Macはプレビュー.app)で開いて、幅:%に応じた数字を入れると、高さ:自動で出ます。

[header.php]の163行目の数値は、
72%:『1382, 346』
67%:『1286, 322』
75%:『1440, 360』
となります。
この方法でその他のサイズも選択できますね。

 

子テーマの style.css

作成済みの[style.css]を以下に変更します。
1〜5行目は作成済み部分です。1行開けて 7〜10行目を追加する感じです。
9行目の『72%』が変更部分です。デフォルトでは、『62.5%』になっています。

@charset "utf-8";
/*
Theme Name: fsvbasic-child
Template: fsvbasic
*/

html {
    overflow-y:scroll;
    font-size:72%;
}

9行目の『●●%』は、[header.php]の163行目の数値に合わせたものにして下さい。