賢威8記事本文などの文字サイズの変更。行間と改行も変更

賢威８とwordpressを使用してブログの投稿をする場合は、カスタマイズは、必要最小限度で行います。主に文字を大きくしたり、行間を大きくしたりする作業がメインです。

カスタマイズに必要なファイルでは、主にデザイン系のbase.cssとrwd.cssと、主に動作系のfunction.phpの3つです。これら３つのファイルをterapadにダウンロードしておきます。

当サイトでは、カスタマイズを行う際は、子テーマを使用せず、修正や変更を行うファイルのバックアップを保存して、上記3つのファイルに直接修正コードを書き込むようにしています。

これら3つのファイルだけ、修正や変更をしますので万が一、3つのファイルが元に戻せなくなった場合に備えて、Ｘサーバーから３つのファイルをterapadにダウンロードして原本として保管しておきます。

Ｘサーバーからダウンロードする方法については、文中に記載しましたので、ご覧ください。

なお、賢威8のフォルダ自体は、ライダーストア（賢威8の製造会社・販売会社）からダウンロードした際にパソコンに保存しています。そして、賢威8はXサーバ上にアップロードした段階で、賢威8の全てのファイルがXサーバ上にあります。

賢威8記事本文などの文字サイズの変更。行間と改行も変更。事前準備

windows10の場合はメモ帳にダウンロードされるように初期設定されていますのが、メモ帳では使い勝手が十分ではないので、メモ帳からterapadに変更しておきます。

terapadは、インストールした際に、パソコンの奥深くインストールされている場合がありますので、初期にインストールされた場所からデスクトップなどの比較的浅い場所に引き上げてやると、Windows10のメモ帳から簡単に引継ぎができます。

なお、base.cssに一連の書き込み作業終了後、Xサーバ上から修正事項が書き込められたbase.cssをterapadにダウンロードすれば、子テーマに相当するものが手元（パソコンのデスクトップや外付けハードディスクなど）で保管できます。

賢威8記事本文などの文字サイズの変更。Xサーバ上からファイルをダウンロード

万が一、何らかの原因で、ファイルを壊してしまった際に、即、作業に復帰できるようにXサーバ上から上記3つのファイルをダウンロードしておきます。

もちろん、賢威8の原本は存在していますが、それとは別に、ミスった際に時間短縮を行うために、下記の作業を行います。

１．Xサーバのファイルマネージャーにログインします。

２．public_html をクリックします。

３．wp contentをクリックします。

４．themmesをクリックします。

５．keni80 wp standard all ☆☆☆をクリックします。

６．base.cssをクリックして、ダウンロードをクリックします。

７．「base.css」をダウンロードしますの言葉が表示されますので⇒ダウンロードをクリックします。

＊様々なファイルをダウンロードする必要に応じて、上記の作業を繰り返します。

なお、wordpressのテーマの装飾やデザイン系を制御するCSSは、通常、スタイルシート（style.css ）ですが、賢威8の場合はbase.cssで制御を行っています。

基本的には、全く同じ扱いでOKですので、このbase.cssに直接修正項目を付加または削除を行っていきます。

賢威8記事本文などの文字サイズの変更。記事投稿タイトルの文字を大きくする。

下記画像の青い矢印部分１は、サイトのタイトル「はじめるブログ」です。記事投稿タイトルとは全く異なります。

サイトのタイトルとは、ブログの名前です。これに対し記事投稿タイトルと1つ1つの記事に付与される名前です。したがって、100記事投稿した記事があったとしたら、100の記事投稿タイトルがありますが、サイトのタイトルは１つだけです。

次に青い矢印部分の2ですが、グローバルメニューです。

この青い矢印部分１と２は、今回修正しませんので、投稿タイトルの赤い矢印部分だけを下記のとおり修正しました。

この記事では、タイトルの文字を大きくしていますが、小さくしたい場合は原本の変更箇所の数字を小さくすればOKです。

下記は、賢威8のbase.cssです。

このbase.cssを下記のとおり修正します。

投稿タイトルの文字を大きくする。記事一覧の概要の文字を大きくする

1636行目を修正します。投稿タイトルの文字を大きくします。投稿タイトルは、訪問者の目に最初に訴求するものですので、デフォルトの1.8⇒2.2に拡大しました。

.entry-list .entry_title{
margin-top: 0;
margin-bottom: 5px;
padding: 0;
border: 0;
background-color: transparent;
font-weight: bold;
font-size: 1.6rem;
line-height: 1.8;
}

修正後font-size: 2.2rem;

1626行目を修正します。投稿一覧の概要の文字を大きくする。概要は、投稿記事を瞬時に把握してもらいたいので1.4⇒1.8に拡大しました。

.entry_inner{
overflow: hidden;
font-size: 1.4rem;
}

修正後font-size: 1.8rem;

賢威8記事本文などの文字サイズの変更。メインコンテンツの文字サイズや行間の設定。

赤い矢印部分が今回設定した文字サイズです。文字は大きめに、シニアに訴求できるように修正しました。

まず、1行に記載する文字数ですが、基本的にはパソコンの1行は、45文字前後（スマートフォンやタブレットはもっと少ないです。）に収まるようにしました。行と行の空間（行間）も、前後の幅に合わせました。

また、句読点も適宜挿入するようにしました。

そして、概ね3行から4行程度で、改行（エンターキーを押す）し、これに伴って目に優しい、改行幅を設定しました。

base.css 1167行目。各投稿記事のメインコンテンツの文字サイズや行間の設定は、訴求力を高くする一方、行間を引き締めました。
文字は1.6⇒1.8。行間は2.0⇒1.5です。

# メインコンテンツの文字サイズや行間の設定
*/
.keni-main{
letter-spacing: .025em;
font-size: 1.6rem;
line-height: 2.0em;
}

修正後font-size: 1.8rem;
修正後line-height: 1.5em;

賢威8記事本文などの文字サイズの変更。投稿記事本文の改行幅の設定。

base.css 1575行目。改行幅はエンターキーを押して、改行する際の幅ですが、40PX⇒1.5emにしました。

.article-body p{
margin-bottom: 40px;
}

修正後margin-bottom: 1.5em;

賢威8記事本文などの文字サイズの変更。h2タグとh3タグの修正設定

h2タグは赤い矢印の部分で、h3タグは青い矢印の部分です。h2タグとh3タグの文字サイズの変更と、h2タグとh3タグのデザインの変更を行いました。

h2タグは1242行目から1250行目まで。

目次の表示は、h2タグまでですが、見出しはh3タグまで使用していますので、h3タグまで修正を行います。
h2とh3タグについては、バックグラウンド（背景色）などを削除して、左側にborder-leftを設置して、見やすい見出しを作りました。具体的な内容については、下記の修正コードをご覧ください。

h2{
margin-bottom: 23px;
padding: 10px 10px 5px;
background: #05a5ab;
color: #fff;
font-size: 1.9rem;
}

↓

修正後は下記のとおりです。
main-body h2{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.2em;
position: relative;
border-left: 6px solid #181944;
}

h3タグ1256は行目から1264行目からまで

h3{
margin: 1px 1px 24px;
padding: 10px 0;
border-top: 1px solid #05a5ab;
border-bottom: 1px solid #05a5ab;
color: #00858a;
font-size: 1.8rem;
}

↓

修正後は下記のとおりです。
main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1em;
position: relative;
border-left: 3px solid #181944;

}

賢威8記事本文などの文字サイズの変更。目次関連項目の修正設定

下記項目で目次項目の文字を大きくします。上記に若干かぶるのですが、見出しはh3までデザイン的な変更を行いましたが、目次に表示されるのはh2タグまでです。したがって、下記の修正コードは、目次内部の文字の大きさの修正です。

1.4⇒2.0に拡大しました。

1897行目

toc-area_inner .toc-area_list li{
position: relative;
list-style-type: none;
margin-bottom: 15px;
padding-left: 10px;
font-size: 1.4rem;
}
↓

修正後font-size: 2.0rem;

1903行目　上記同様の考えから、12⇒16に拡大しました。

.toc-area_btn_open::before,
.toc-area_btn_close::before{
display: inline-block;
font-size: 12px;

↓

修正後font-size: 16px;

下記項目で目次エリアの背景色項目の文字を修正します。

1922行目と1923行目。背景色などはシンプルイズベストで下記の修正コードにしました。

.toc-area_inner .toc-area_list > li::before{
position: absolute;
top: 5px;
left: -7px;
width: 22px;
height: 22px;
margin-right: 1em;
margin-left: -1em;
/*background: #05a5ab;*/
color: #fff;
font-size: 14px;
line-height: 22px;
text-indent: 0;
text-align: center;
vertical-align: middle;
counter-increment: num;
content: counter(num);
}

↓
下記のとおり修正しました。
background-color: transparent !important;
color: inherit !important;

1945行目と1946行目。

toc_title{
padding: 10px;
background-color: #f0f0f0;
/*color: #00858a;*/
font-weight: bold;
line-height: 1.5;
text-align: center;
}

↓
下記のとおり修正しました。
background-color: #ffffff;
/*color: #ffffff;*/

賢威8記事本文などの文字サイズの変更。関連記事文字を大きくしました。

関連記事とは、投稿した記事最下段にある記事です。これは、賢威8では投稿した記事に関連する記事を自動的にピックアップして、投稿した記事の最下段に表示してくれます。

１つの投稿した記事では、理解していただけない場合であっても、他の関連した記事を閲覧してもらうことで、理解が深まる場合があります。

したがって、これらの項目の文字も読みやすいように、文字の大きさを修正しました。

関連記事についても、引き続き、読んでいただきたい項目がありますので、文字サイズを下記のとおり拡大しました。

3390行目
.related-entry-list_style01 .related-entry_title{
overflow: hidden;
font-size: 1.4rem;
}

修正後font-size: 1.6rem;

3431行目
.related-entry-list_style02 .related-entry-list_item{
width: 48%;
margin-right: 4%;
padding: 10px;
border: 1px solid #ddd;
font-size: 1.2rem;
}

font-size: 1.6rem;に修正しました。

賢威8記事本文などの文字サイズの変更。文字全体のフォントの色を黒に修正設定

431行目を下記のとおり修正しました。フォントの色については、シンプルイズベストで黒です。

# =================================================================
# フォントの色
# =================================================================
*/

/*フォントの基本色*/
body{
color: #505050;
}

↓
black
#000000に修正しました。

また、ブラックは#000000を使わないでsを使用してブログの投稿をする場合は、カスタマイズは、必要最小限度で行います。主に文字を大きくしたり、行間を大きくしたりする作業がメインです。

カスタマイズに必要なファイルでは、主にデザイン系のbase.cssとrwd.cssと、主に動作系のfunction.phpの3つです。これら３つのファイルをterapadにダウンロードしておきます。

当サイトでは、カスタマイズを行う際は、子テーマを使用せず、修正や変更を行うファイルのバックアップを保存して、上記3つのファイルに直接修正コードを書き込むようにしています。

これら3つのファイルだけ、修正や変更をしますので万が一、3つのファイルが元に戻せなくなった場合に備えて、Ｘサーバーから３つのファイルをterapadにダウンロードして原本として保管しておきます。

Ｘサーバーからダウンロードする方法については、文中に記載しましたので、ご覧ください。

なお、賢威8のフォルダ自体は、ライダーストア（賢威8の製造会社・販売会社）からダウンロードした際にパソコンに保存しています。そして、賢威8はXサーバ上にアップロードした段階で、賢威8の全てのファイルがXサーバ上にあります。

賢威8記事本文などの文字サイズの変更。行間と改行も変更。事前準備

windows10の場合はメモ帳にダウンロードされるように初期設定されていますのが、メモ帳では使い勝手が十分ではないので、メモ帳からterapadに変更しておきます。

terapadは、インストールした際に、パソコンの奥深くインストールされている場合がありますので、初期にインストールされた場所からデスクトップなどの比較的浅い場所に引き上げてやると、Windows10のメモ帳から簡単に引継ぎができます。

なお、base.cssに一連の書き込み作業終了後、Xサーバ上から修正事項が書き込められたbase.cssをterapadにダウンロードすれば、子テーマに相当するものが手元（パソコンのデスクトップや外付けハードディスクなど）で保管できます。

賢威8記事本文などの文字サイズの変更。Xサーバ上からファイルをダウンロード

万が一、何らかの原因で、ファイルを壊してしまった際に、即、作業に復帰できるようにXサーバ上から上記3つのファイルをダウンロードしておきます。

もちろん、賢威8の原本は存在していますが、それとは別に、ミスった際に時間短縮を行うために、下記の作業を行います。

１．Xサーバのファイルマネージャーにログインします。

２．public_html をクリックします。

３．wp contentをクリックします。

４．themmesをクリックします。

５．keni80 wp standard all ☆☆☆をクリックします。

６．base.cssをクリックして、ダウンロードをクリックします。

７．「base.css」をダウンロードしますの言葉が表示されますので⇒ダウンロードをクリックします。

＊様々なファイルをダウンロードする必要に応じて、上記の作業を繰り返します。

なお、wordpressのテーマの装飾やデザイン系を制御するCSSは、通常、スタイルシート（style.css ）ですが、賢威8の場合はbase.cssで制御を行っています。

基本的には、全く同じ扱いでOKですので、このbase.cssに直接修正項目を付加または削除を行っていきます。

賢威8記事本文などの文字サイズの変更。記事投稿タイトルの文字を大きくする。

下記画像の青い矢印部分１は、サイトのタイトル「はじめるブログ」です。記事投稿タイトルとは全く異なります。

サイトのタイトルとは、ブログの名前です。これに対し記事投稿タイトルと1つ1つの記事に付与される名前です。したがって、100記事投稿した記事があったとしたら、100の記事投稿タイトルがありますが、サイトのタイトルは１つだけです。

次に青い矢印部分の2ですが、グローバルメニューです。

この青い矢印部分１と２は、今回修正しませんので、投稿タイトルの赤い矢印部分だけを下記のとおり修正しました。

この記事では、タイトルの文字を大きくしていますが、小さくしたい場合は原本の変更箇所の数字を小さくすればOKです。

下記は、賢威8のbase.cssです。

このbase.cssを下記のとおり修正します。

投稿タイトルの文字を大きくする。記事一覧の概要の文字を大きくする

1636行目を修正します。投稿タイトルの文字を大きくします。投稿タイトルは、訪問者の目に最初に訴求するものですので、デフォルトの1.8⇒2.2に拡大しました。

.entry-list .entry_title{
margin-top: 0;
margin-bottom: 5px;
padding: 0;
border: 0;
background-color: transparent;
font-weight: bold;
font-size: 1.6rem;
line-height: 1.8;
}

修正後font-size: 2.2rem;

1626行目を修正します。投稿一覧の概要の文字を大きくする。概要は、投稿記事を瞬時に把握してもらいたいので1.4⇒1.8に拡大しました。

.entry_inner{
overflow: hidden;
font-size: 1.4rem;
}

修正後font-size: 1.8rem;

賢威8記事本文などの文字サイズの変更。メインコンテンツの文字サイズや行間の設定。

赤い矢印部分が今回設定した文字サイズです。文字は大きめに、シニアに訴求できるように修正しました。

まず、1行に記載する文字数ですが、基本的には1行45文字前後に収まるようにしました。行と行の空間（行間）も、前後の幅に合わせました。

また、句読点も適宜挿入するようにしました。

そして、概ね3行から4行程度で、改行（エンターキーを押す）し、これに伴って目に優しい、改行幅を設定しました。

base.css 1167行目。各投稿記事のメインコンテンツの文字サイズや行間の設定は、訴求力を高くする一方、行間を引き締めました。
文字は1.6⇒1.8。行間は2.0⇒1.5です。

# メインコンテンツの文字サイズや行間の設定
*/
.keni-main{
letter-spacing: .025em;
font-size: 1.6rem;
line-height: 2.0em;
}

修正後font-size: 1.8rem;
修正後line-height: 1.5em;

賢威8記事本文などの文字サイズの変更。投稿記事本文の改行幅の設定。

base.css 1575行目。改行幅はエンターキーを押して、改行する際の幅ですが、40PX⇒1.5emにしました。

.article-body p{
margin-bottom: 40px;
}

修正後margin-bottom: 1.5em;

賢威8記事本文などの文字サイズの変更。h2タグとh3タグの修正設定

h2タグは赤い矢印の部分で、h3タグは青い矢印の部分です。h2タグとh3タグの文字サイズの変更と、h2タグとh3タグのデザインの変更を行いました。

h2タグは1242行目から1250行目まで。

目次の表示は、h2タグまでですが、見出しはh3タグまで使用していますので、h3タグまで修正を行います。
h2とh3タグについては、バックグラウンド（背景色）などを削除して、左側にborder-leftを設置して、見やすい見出しを作りました。具体的な内容については、下記の修正コードをご覧ください。

h2{
margin-bottom: 23px;
padding: 10px 10px 5px;
background: #05a5ab;
color: #fff;
font-size: 1.9rem;
}

↓

修正後は下記のとおりです。
main-body h2{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.2em;
position: relative;
border-left: 6px solid #181944;
}

h3タグ1256は行目から1264行目からまで

h3{
margin: 1px 1px 24px;
padding: 10px 0;
border-top: 1px solid #05a5ab;
border-bottom: 1px solid #05a5ab;
color: #00858a;
font-size: 1.8rem;
}

↓

修正後は下記のとおりです。
main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1em;
position: relative;
border-left: 3px solid #181944;

}

賢威8記事本文などの文字サイズの変更。目次関連項目の修正設定

下記項目で目次項目の文字を大きくします。上記に若干かぶるのですが、見出しはh3までデザイン的な変更を行いましたが、目次に表示されるのはh2タグまでです。したがって、下記の修正コードは、目次内部の文字の大きさの修正です。

1.4⇒2.0に拡大しました。

1897行目

toc-area_inner .toc-area_list li{
position: relative;
list-style-type: none;
margin-bottom: 15px;
padding-left: 10px;
font-size: 1.4rem;
}
↓

修正後font-size: 2.0rem;

1903行目　上記同様の考えから、12⇒16に拡大しました。

.toc-area_btn_open::before,
.toc-area_btn_close::before{
display: inline-block;
font-size: 12px;

↓

修正後font-size: 16px;

下記項目で目次エリアの背景色項目の文字を修正します。

1922行目と1923行目。背景色などはシンプルイズベストで下記の修正コードにしました。

.toc-area_inner .toc-area_list > li::before{
position: absolute;
top: 5px;
left: -7px;
width: 22px;
height: 22px;
margin-right: 1em;
margin-left: -1em;
/*background: #05a5ab;*/
color: #fff;
font-size: 14px;
line-height: 22px;
text-indent: 0;
text-align: center;
vertical-align: middle;
counter-increment: num;
content: counter(num);
}

↓
下記のとおり修正しました。
background-color: transparent !important;
color: inherit !important;

1945行目と1946行目。

toc_title{
padding: 10px;
background-color: #f0f0f0;
/*color: #00858a;*/
font-weight: bold;
line-height: 1.5;
text-align: center;
}

↓
下記のとおり修正しました。
background-color: #ffffff;
/*color: #ffffff;*/

賢威8記事本文などの文字サイズの変更。関連記事文字を大きくしました。

関連記事についても、引き続き、読んでいただきたい項目がありますので、文字サイズを下記のとおり拡大しました。

3390行目
.related-entry-list_style01 .related-entry_title{
overflow: hidden;
font-size: 1.4rem;
}

修正後font-size: 1.6rem;

3431行目
.related-entry-list_style02 .related-entry-list_item{
width: 48%;
margin-right: 4%;
padding: 10px;
border: 1px solid #ddd;
font-size: 1.2rem;
}

font-size: 1.6rem;に修正しました。

賢威8記事本文などの文字サイズの変更。文字全体のフォントの色を黒に修正設定

431行目を下記のとおり修正しました。フォントの色については、シンプルイズベストで黒です。

# =================================================================
# フォントの色
# =================================================================
*/

/*フォントの基本色*/
body{
color: #505050;
}

↓
black
#000000に修正しました。