見出しタグ装飾と反映

もう少ししてから細かなカスタマイズに手を出して行こうと思ってたのですが…

あまりにも見出しだけ(文字が大きく太字だけ)では、文章全て黒文字で見にくいと思い…

見出しタグの装飾

ページに更にアクセントをもたらし見やすく見える様にしようと見出しタグを装飾する事に。

Twenty Seventeenでは

h1 サイトのタイトル

h2 ページタイトル

h3 記事タイトル

h1が記事タイトルの場合はh2、h3は使われてません。

トップページで表示されている時と、投稿、固定の1ページで表示されている時ではh1、h2、h3が使われている部分が変わってきます。

h1タグはサイトのタイトルに使われていますので、h2、h3、h4までを装飾します。

色々な装飾がありますが、ここでは今サイトで利用している装飾だけ記載しておきます。

子テーマのstyle.cssに下記のコードを追加。

h2 {

padding: .25em 0 .5em .75em;

border-left: 6px solid #00ffff;

border-bottom: 1px solid #afeeee;

}

h3 {

padding: .25em 0 .5em .75em;

border-left: 6px solid #00ffff;

border-bottom: 1px solid  #afeeee;

}

h4 {

padding: .25em 0 .5em .75em;

border-left: 6px solid #00ffff;

border-bottom: 1px solid #afeeee;

}

paddingは文字との余白の幅

border-leftがサイドのたて線の幅・色

border-bottomが下の線の幅・色になります。

これを子テーマにアップロードしたらOKと思いアップロードしましたが…

子テーマcss反映されない!

全く反映されない事に…

原因を調べる事にしましたが、数時間かかっても全く分からない。

style.cssもfunctions.phpの記載も問題ないと思ってひたすら探してやっと一つ見つけたのが…

functions.phpの最後の行に

filemtime( get_theme_file_path( ‘style.css’ ) 

を追加(更新時にキャッシュをクリア)で上手く反映する事に。

過去記事の分も2パーターンで修正しています。

テーマにもよる様ですが、これでスタイルシートがやっと反映する事となりました。

hタグのトップページ、単一ページの時でhタグの使用される部分が変わってくるので、装飾した時のデザインのバランスが悪かったりする所は、また時間のある時に調べて見ようと思いますm( _ _ )m

明日から仕事

明日から仕事の予定にはなりますので、正直緊急事態宣言が31日まで延長になってどうなるかは分かりません。

仕事が休みだったら1日1ブログを上げようとは思ってますが、仕事が始まったら1週間で2ブログは上げて行こうとは思ってます。

さすがに仕事が始まって1日1ブログ上げるネタもないし、他のサイトの作業も行っていきたいので低いかもしれないですが、自分の目標として行って行こうとは思ってます。