TwentySeventeen-FrontPage

Google+ Pinterest LinkedIn Tumblr +

TwentySeventeen-FrontPageのカスタマイズ

本来ならばさわる必要のない場所なのでしょう。

 

今回の作業は少し探すのに手間取ってしまって約9分程度。

前回の作業でエントリータイトルを下のように装飾した影響で

 

 

FrontPageのタイトルにも装飾CSSが効いてしまって

なんだか思う感じに仕上がらない

 

 

なんとかセクションのタイトル部分だけCSSで書き換えようと探したのだけれど、時間ばかりかかって

結局FrontPageのテンプレートでクラス名を書き換えた方が早いだろということで作業。

 

front-page.phpを見てみると、やはりテンプレートフォルダの中にあるよう

子テーマ>template-parts>page>content-front-page.php

あら?似たようなファイル名のcontent-front-page-panels.php

中身を見てみるとどうやら、デフォルトで表示されるものが、content-front-page.php

そして、テーマのカスタマイズのテーマオプションで追加したセクションに関しては、content-front-page.phpを使うらしい。

 

この2つのファイルのタイトル部分に新しいクラス名

わかりやすいようentry-title-frontPを付与。

<header class="entry-header">
 <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

から

<header class="entry-header">
 <?php the_title( '<h2 class="entry-title-frontP">', '</h2>' ); ?>

に追加変更

 

線で囲んだタイトルが並ぶのも嫌なので、ここはシンプルに

文字の大きさとシンプルな装飾をすることに。その関係でもうひとつタグを追加

 

<?php the_title( '<h2 class="entry-title-frontP"><span>', '</span></h2>' ); ?>

と<span>で囲んでおく。

 

style.cssに以下を追加

h2.entry-title-front {
 overflow: hidden;
 text-align: right;
 color: #71bc5c;
}
h2.entry-title-front span {
 position: relative;
 display: inline-block;
 margin: 0 2.5em;
 padding: 0 1em;
 text-align: left;
font-weight: lighter;
}
h2.entry-title-front span::before,
h2.entry-title-front span::after {
 position: absolute;
 top: 50%;
 content: '';
 width: 400%;
 height: 1.5px;
 background-color: #ccc;
}
h2.entry-title-front span::before {right: 100%;}
h2.entry-title-front span::after {left: 100%;}

 

仕上がりはこんな感じで。

 

好みが分かれるかな?

ちょっと時間かかりましたが最初のページなので自分なりに少しだけこだわってみました。

 

Share.

Leave A Reply