WordPress 記事の見出しのデザインとフォントの大きさを変更

Simplicity
2015.09.17
この記事は約19分で読めます。
只今当サイトのテーマはSimplicityではなく「Cocoon」を有難く使用させて頂いています。
この記事は前身のSimplicityの使い手として書いていた記事ですが
内容的には他のテーマでも大丈夫なんで宜しければ使ってやって下さい。
古い記事なのに長い間留守にし更新してなくってごめんなさいね💦　
他のページもコツコツ見直し中です。ご了承の程～😅　　2020年11月10日　39maより

 

WordPress 記事の見出しのデザインとフォントの大きさを変更

 

私が有難く使用させて頂いている、WordPressの最強のテーマSimplicity(1.8.7)。

WordPress-themes-Simplicity 日本人による日本人の為のおすすめテーマ。これで決まり!!
日本人による日本人の為のおすすめテーマSimplicity。このテーマならwordpressの敷居が高く感じていた方も気軽に取り組めると考えます。 白いものを自分好みに塗り替えられる自由の利くテーマです。
mitemita.com
2020.11.10

作者のわいひらさん自らが

自由なスタイルで後からカスタマイズしやすい土台となるように考えて作りました。

と仰せの通り、、、いや、
それ以上に使用する人が手を加えやすいように工夫がなされてて本当に助かります😌

以前はこんな便利なテーマがなかったので余計にそう思うのかも知れませんが、
Simplicityには”子テーマ”となるものが配布されていて、この”子テーマ”を有効化すると
親テーマ Simplicity のテンプレートを引き継ぐ様になっています。

自分の思う様にデザインとかを変更したい時、Simplicity本体(親)をカスタマイズしてしまうと、
後々の更新等で折角カスタマイズした内容がチャラになります。

また、私の様に怖いもの知らず(ぃゃ、知ってるケド)でアレコレごちゃごちゃに弄ってしまって
完全に崩しまくり、挙句の果てに『ぇぇぃ、全部削除してしまぇ～😩』…なんて事にならない様に😅
Simplicity子テーマには、弄り倒す事が可能??な😁、（そういう事ではないのは承知してます…）

空のスタイルシート(style.css)があり、更に、ついつい弄りたくなる
空のビジュアルエディターのスタイルシート(editor-style.css)があります。

ダウンロード icon-download して解凍し初めて中身をみてみた時は
『うそっ、マジかぁ～』と子供からサプライズプレゼントを貰った時の様に嬉しかったデス🎁

大袈裟ではなく、何も無い空のファイルが備わっていると、
自分で態々スタイルシートを作る必要もない訳ですから、
初心者の方でも直ぐに必要な記述を追加したり、変更したりするのは凄く楽だと思います。

早速必要な事を、子テーマの空のスタイルシート(style.css)に追加😙

記事タイトルのとおり、
記事の見出しのデザインとフォントの大きさを変えて自分の好きな感じにしてみました。

メモ書き程度なんですが、これから変えてみようかな。と変化を求めている貴方（貴女）
宜しければご閲覧下さい😐

コピペで簡単に変更できるように、お持ち帰り🎀もすこーしだけ用意しています。

 

先ずは、最強のテーマSimplicityが実装されており、(9/28追記*最新バージョン：1.8.9 20150928cでもOK)
且つSimplicityの子テーマが有効化されている事を前提として記載していますので、
予め、ご了承頂けますよう。

Simplicityダウンロードページ　　Simplicityの子テーマ　
（ダウンロードしインストールする方法はこちらでレクチャーされています。）

因みにインストール方法はWordPress内でインストールする方法が書かれていますが、
pcにもZIPファイルを保存しておくと、後々役に立ったりします。

 

投稿記事の見出しのデザインを変更するには?

見出しを表示するHTMLタグは、

h1, h2, h3, h4, h5, h6 の 6 段階の要素で、h6が最下位の見出しになります。
hにの後に続く整数が小さい程、フォントサイズが大きくなり、太字で表示されることになります。

このタグに（Hタグはエイチ・ヘッダーと読みます。”Heading”の略）其々、
「あなたはこの大きさでこういう色を付けて、こんなラインをつけるわよ～」
・・・ってな感じに命令する記述をスタイルシートに書いてやればいいんです。

この状態がSimplicity（子テーマ使用中）のデフォルト（標準）です。

Simplicity（子テーマ使用中）のデフォルト（標準）での表示です。

↑この状態がデフォルト（標準）ですね。

因みに私のサイトでは、以下の様にしています。
（私はh5とh6の見出しは使ってないのでh1～h4のみ変更してます。）

headlines-change1

「みたみた」の”見出し”hタグ指定の表示。

子テーマのスタイルシートには以下の様に書いています。

headlines-change2

「みてみた」見出し（hタグ）のスタイルシートキャプチャー。

・・・こんな感じで書いてます。

.article h1 {
  font-size:20px;
}

.article h2 {
  font-size:18px;
  background: #2098a8;
  color: #fff;
  padding: 12px 0px 12px 14px ;
  border-left: none;
  box-shadow: 0 2px 5px #999;
}

.article h3 {
  font-size:17px;
  border-bottom: none;
  border-left: 7px solid #bc0019;
  padding: 8px 0px 8px 12px;
  box-shadow: 0 2px 5px #999;
}
 
.article h4 {
  font-size:16px;
  border-bottom: 2px dotted #bc0019;
  padding: 4px 0px;
}

 

Simplicity子テーマのスタイルシート(style.css)の編集ページ

Simplicity子テーマのスタイルシート、編集ページは、
ダッシュボードの「外観」項目内、一番下の「テーマの編集」をクリックすると、以下の画像の様に、
「Simplicity child: スタイルシート (style.css)」が開きます。

headlines-change_Simplicity-child_style

Simplicity子テーマのスタイルシート (style.css)編集ページ

では、僅かですが、サンプルを記しておきますのでお持ち帰り下さい😐

（因みに諄いようですが、私はh5とh6の見出しは使ってないのでh1～h4についての変更だけになります。
h5とh6の変更をしたい場合は似た感じで自由に変更してみて下さい。初心者でも簡単です。）

 

copyボタンクリックでお手軽コピー

サンプルのお持ち帰り方法。（一応、初心者の方に向けての投稿なので）
記述をハイライターで表示しています。（そのハイライターの利用についてになりますが）

コピーは以下の図のようにお手軽コピーできます。

crayon_copy

copyボタンクリックでお手軽コピー

見出しのサンプル—コピペでお持ち帰り🎁

サンプル①Simplicityのデザインで色だけチェンジ

赤系　カラーコード #bc0019 で指定

headlines-change_color-samples1_bc0019

以下のように書くと
この様に表示されます。
クリックすると実物大を
別窓で開きます

/*******************************************
** 記事内の見出し変更 h1は記事タイトル部分。
**h2～4に使うポイントカラーを#bc0019に指定
********************************************/

.article h1 {
  margin-top:30px;
  margin-bottom:20px;
  font-size: 30px;
  line-height:117%;
}

#archive-title{
  padding-bottom:20px;
  font-size:26px;
}

.article h2 {
  border-left:1px solid #bc0019;
  margin: 40px -29px 20px;
  padding:25px 30px;
  font-size:26px;
}

.article h3,
#comment-area h3,
#related-entries h3{
  font-size:23px;
  border-bottom:5px solid #bc0019;
  padding:10px 0;
}

.article h4, .article h5, .article h6{
  font-size:20px;
  padding:8px 0;
}

.article  h4{
  border-bottom:5px dashed #bc0019;
}

 

青系　カラーコード #1B13BA で指定

headlines-change_color-samples2_1B13BA

以下のように書くと
この様に表示されます。
クリックすると別窓で開きます

/*******************************************
** 記事内の見出し変更 h1は記事タイトル部分。
**h2～4に使うポイントカラーを#1B13BAに指定
********************************************/

.article h1 {
  margin-top:30px;
  margin-bottom:20px;
  font-size: 30px;
  line-height:117%;
}

#archive-title{
  padding-bottom:20px;
  font-size:26px;
}

.article h2 {
  border-left:1px solid #1B13BA;
  margin: 40px -29px 20px;
  padding:25px 30px;
  font-size:26px;
}

.article h3,
#comment-area h3,
#related-entries h3{
  font-size:23px;
  border-bottom:5px solid #1B13BA;
  padding:10px 0;
}

.article h4, .article h5, .article h6{
  font-size:20px;
  padding:8px 0;
}

.article  h4{
  border-bottom:5px dashed #1B13BA;
}

 

緑系　カラーコード #07A239 で指定

headlines-change_color-samples3_07A239

以下のように書くと
この様に表示されます。
クリックすると別窓で開きます

/*******************************************
** 記事内の見出し変更 h1は記事タイトル部分。
**h2～4に使うポイントカラーを#07A239に指定
********************************************/

.article h1 {
  margin-top:30px;
  margin-bottom:20px;
  font-size: 30px;
  line-height:117%;
}

#archive-title{
  padding-bottom:20px;
  font-size:26px;
}

.article h2 {
  border-left:1px solid #07A239;
  margin: 40px -29px 20px;
  padding:25px 30px;
  font-size:26px;
}

.article h3,
#comment-area h3,
#related-entries h3{
  font-size:23px;
  border-bottom:5px solid #07A239;
  padding:10px 0;
}

.article h4, .article h5, .article h6{
  font-size:20px;
  padding:8px 0;
}

.article  h4{
  border-bottom:5px dashed #07A239;
}

上記の様に、Simplicity仕様で見出しのポイントカラーだけを変更する時は、
カラーコードを好きな色のコードに置き換えるだけです。

見出しの文字の大きさですが、Simplicityはh1を30pxで指定されていて
これは「記事タイトル」と同じ大きさです。

逆から例えて言うと「記事タイトル」がh1で指定されていますので
「見出しh1」は変更しないままだと、アイキャッチ画像がない場合で、
投稿時に見出し1から書き始めると、たて続けに30pxの大きい文字が頁の頭に並ぶ事になります。

個人的には「インパクトありすぎ」と思うので私は.article h1 {font-size:20px;}とし、
h1の大きさを控えめにしています。(そぅ、元々あまり大きな文字を好まないので・・・)

他、Simplicityでは、h2が26px,h3が23px,h4は20px となっていますので、
font-size:〇〇px;の「〇〇(任意の数字)」部分をお好みで変更して下さい。
文字の大きさを変えるだけでも印象が違ってきます icon-asterisk 

では次に「色を変えるだけじゃつまんない」方は、影付きなんてどうでしょう。

サンプル②見出しに影を付けて変化をもたせる。

ページ内が冗長気味😲なので、以下からは「h2」メインに見本を書いています。
h3,h4を変更したい場合はお手数ですが、使いたい。と思ったサンプルの
「.article h2」の「2」の部分を3とか4に書き換えて使って下さい。

文字の大きさは26ピクセルで指定しています。
文字を変更したい場合は前項でも触れましたように、「font-size:26px」を
font-size:〇〇pxと好きな数字に書き換えます😉
(数字が大きい程、文字が大きくなり、小さい数字を書くと文字は小さくなります。)

ノーマルバー影付きパステルピンク-1

pastel-pink1

影付きパステルピンク1（pastel-pink1）

/*******************************************************
** 記事内の見出し変更 h2を見本に書いています。
** ポイントカラーをローズピンク rose pink #f19ca7に指定
** h3,h4をこの様にしたい場合はお手数ですが、
** 「.article h2」の「2」を3か4に書き換えて使って下さい。
** 文字の大きさは26ピクセルで指定しています。
** 変更したい場合は「font-size:26px」を
** font-size:〇〇pxと好きな数字に書き換えます。
** 大きい数字程でっかくなっていきます。
********************************************************/

.article h2 {
  font-size:26px;
  background: #f19ca7;
  color: #FFFFFF;
  padding: 12px 0px 12px 14px ;
  border-left: none;
  box-shadow: 0 2px 5px #999;
}

囲みバー影付きパステルピンク-2

pastel-pink2

囲みバー影付きパステルピンク-2（pastel-pink2）

 

/*******************************************************
** 記事内の見出し変更 h2を見本に書いています。
** ポイントカラーをローズピンク rose pink #f19ca7に指定
** h3,h4をこの様にしたい場合はお手数ですが、
** 「.article h2」の「2」を3か4に書き換えて使って下さい。
** 文字の大きさは26ピクセルで指定しています。
** 変更したい場合は「font-size:26px」を
** font-size:〇〇pxと好きな数字に書き換えます。
** 大きい数字程でっかくなっていきます。
********************************************************/

.article h2 {
  margin: 1.5em 0;
  padding: 0.5em 0 0.3em 1em;
  border: double 5px #FFFFFF;
  background-color: #f19ca7;
  font-size: 26px;
  font-weight: bold;
  color: #FFFFFF;
  box-shadow: 0 2px 5px #999;
}

付箋タイプ点線-影付きパステルピンク-3（pastel-pink3）

pastel-pink3

付箋タイプ点線-影付きパステルピンク-3（pastel-pink3）

/*******************************************************
** 記事内の見出し変更 h2を見本に書いています。
** ポイントカラーをローズピンク rose pink #f19ca7に指定
** h3,h4をこの様にしたい場合はお手数ですが、
** 「.article h2」の「2」を3か4に書き換えて使って下さい。
** 文字の色はローズ rose #e95464です。
** 文字の大きさは26ピクセルで指定しています。
** 変更したい場合は「font-size:26px」を
** font-size:〇〇pxと好きな数字に書き換えます。
** 大きい数字程でっかくなっていきます。
********************************************************/

.article h2 {
  margin: 30px 30px;
  padding: 0.5em 0 0.3em 1em;
  border-bottom: 1px dotted #f19ca7;
  border-left: 10px solid #f19ca7;
  font-size: 26px;
  font-weight: bold;
  color: #e95464;
  box-shadow: 0 2px 5px #999;
}

付箋タイプ色付き-影付きパステルピンク-4

pastel-pink4

付箋タイプ色付き-影付きパステルピンク-4（pastel-pink4）

/*******************************************************
** 記事内の見出し変更 h2を見本に書いています。
** メインカラーをローズピンク rose pink #f19ca7に指定
** ローズ rose #e95464をポイントで使ってます。
** h3,h4をこの様にしたい場合はお手数ですが、
** 「.article h2」の「2」を3か4に書き換えて使って下さい。
** 文字の色は白 #FFFFFFです。
** 文字の大きさは26ピクセルで指定しています。
** 変更したい場合は「font-size:26px」を
** font-size:〇〇pxと好きな数字に書き換えます。
** 大きい数字程でっかくなっていきます。
********************************************************/

.article h2 {
  margin: 30px 30px;
  padding: 0.5em 0 0.3em 1em;
  background: #f19ca7;  
  border-left: 10px solid #e95464; 
  border-bottom: 1px dotted #f19ca7;    
  font-size: 26px;
  font-weight: bold;
  color: #FFFFFF;
  box-shadow: 0 2px 5px #999;
}

如何でしょうか。お色をお好みに変えるとだいぶ印象が変わると思います。
(本当は「パステル系の色を何色か掲載しよう」と思っていたのですが、 使用しているハイライター(Crayon Syntax Highlighterプラグイン)が
少し表示速度を落しているのでこれ位で…本当に僅かですいません・・・😥)

色見本で色の名前や色番等が一目瞭然で分かりやすいサイトをご紹介させて頂きますので、
好みのカラーをチョイスしてみて下さい。

世界の伝統色 洋色大辞典 – Traditional Colors of World　

世界の伝統色 洋色大辞典 - Traditional Colors of World
世界の伝統色の名前とカラーコードが一目でわかるWEB色見本
www.colordic.org
カタカナ表記される慣用色285色の色名と16進数

それから、私の所では少ししかサンプルわ載せれませんでしたが、
他にも色んな形状を掲載されていらっしゃるサイトをリンクしておきます。
とてもスタイリッシュで素敵なサイトさんです。

SQUEEZE　http://squeeze.jp/blog/web-design/heading-design-css-only/
H1一つでここまで出来るCSS見出しデザインのアイデア9個

あまりデザインに凝ると、対応できないブラウザもありますし
携帯(特に古い機種)なんかでの表示が変だったりするかも知れないので、
シンプルなのが良いかも知れません。

私はスマホにはあまり関心がないのですが（笑）
スマホに力を入れている方は、シンプル・イズ・ベストをおススメします。

では、次に投稿記事の文字の大きさ変更です。

投稿記事のフォントの大きさを変更

んと、説明するまでもないかも知れませんが、
Simplicityのお陰で簡単に変更できます。
(勿論、cssで書いてやってもいいですが、折角搭載されているものは有難く使います😌)

ダッシュボード一覧から、「外観」⇒「カスタマイズ」をクリックし、
左サイドメニューの「レイアウト（投稿・固定ページ）」をクリックします。

すると、
本文文字サイズ（全角文字数）
パソコン表示時の本文文字サイズを設定します。
 14px（1行48文字くらい）
15px（1行45文字くらい）
16px（1行42文字くらい：デフォルト）
17px（1行40文字くらい）
18px（1行37文字くらい）
19px（1行35文字くらい）

・・・と親切に一行に表示される文字数まで載っています。
ここで好みの文字の大きさにチェック icon-check を入れて完了です。

Simplicity便利すぎデス💗

それではこの辺で👋

 

コメント

  1. Simplicity2子テーマで変更した見出しがスマホに反映されない件解決！ より:
    2017年2月2日 11:25 AM

    […] WordPress 記事の見出しのデザインとフォントの大きさを変更 […]

    返信
タイトルとURLをコピーしました