【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

デフォルトだとページ名がでちゃったり、なんかいまいちキレイにならなかったり、お悩みの方も多いでしょう。

今回は固定ページのトップページをサイトっぽくするカスタマイズをお伝えします。

 

フォントの変更や、余白調整、スライドショーの挿入、固定ページをトップページにする方法などは過去の記事をご参考ください。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法

 

勝手に出てくるページ名を削除する

「Twenty Sixteen」で固定ページ（ここでは”HOME”）をトップページにするとどうしても出てきてしまうページ名。

トップページの雰囲気が台無しになってしまうので早急に削除したい！という方は多いでしょう。

まずは、このHOME（ページタイトル）を削除してみようと思います。

 

「外観」＞「テーマの編集」より、「content-page.php (template-parts/content-page.php)」を選択します。

右側にずらずらと並んでいる中から選べばOKです。

開いたら、このボックスの中にある文章を適当なエディタへコピペしましょう。

直接編集してもいいのですが、バックアップの意味もありますので、できればエディタで編集したほうが良いです。

エディタなんかないよ！という方は、フリーソフトでダウンロードできます。シンプルなエディタでは以下のサクラエディタがおすすめです。

【フリーソフト】サクラエディタ 公式サイト（Windows）

 

11行目のコードがタイトルを管理している内容です。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
 </header><!-- .entry-header -->

ここの赤字部分を丸ごと全部削除してしまいましょう。

これでいやらしく表示されていた「HOME」の文字が消え去りました。

好きなように内容を編集できますね。やった！

 

続いて、画像と文章を挿入していきます。

まずは、適当に文章を挿入してみました。固定ページ編集画面よりそのまま打ち込むだけでOKです。

うーーーーーん。なんていうか。読みにくいですね。

同じ大きさで文章がずらずら並んでいると、どこが段落の最初で、重要なポイントなのかわからなくなってしまいます。

結局読みづらい、という事になってしまいますので、ここでは「見出しタグ」を設定しましょう。

「見出しタグ」はWordpressでは「段落」のボックス内にあります。

文章を入力する際に、入力画面内に「段落」というプルダウンボックスがあります。こちらで見出しを設定します。

先ほど入力した文章の、段落ごとのタイトルとなる部分に「見出し２」を設定します。

この見出しタグですが、基本的な設定ルールとしては

・見出し１

ページごとに１つ。主にページタイトルに適用。

・見出し２以下

見出し２の下に見出し３、その下は見出し４と階層構造になるようにする。

という基本ルールがあります。ですので、今回は「見出し２」を設定します。

 

設定すると、こうなります。

・・・文字がでかくなって多少見やすくなったものの、なんとなくダサいですね。

もっときれいに見やすくしたいものです。

 

見出しタグを装飾する

続いて、この見出しタグで設定した部分を装飾して、きれいなサイトにしていきましょう。

装飾（CSS）の基礎知識があればご自身で編集してもよいと思いますが、世の中にはこの装飾のコードを作成してくれるツールがあります。

有名なものは、「CSS 見出しジェネレータ」でしょうか。簡単にそれっぽい見出しを作成できて便利です。

こちらでいい感じの装飾を作成し、「CSSコード」の部分をコピペします。

今回私が作成したコードは以下です。

.sample2 {
 color: #7fc0e2 ;
 background: #ffffff;
 font-size: 19pt ;
 line-height: 1;
 margin:10px 0px;
 padding: 10px 5px 10px 5px;
 box-shadow:1px 3px 1px 0px #666666 ;
 border-top:2px solid #7fc0e2;
 border-bottom:2px solid #7fc0e2;
 border-radius: 0px ;
}

続いて、「外観」＞「テーマの編集」より「スタイルシート（style.css）」を開きます。

開いたら、このボックスの中にある文章を適当なエディタへコピペしましょう。

 

3416行目付近

.entry-content h2,
 .entry-summary h2,
 .comment-content h2 {
 font-size: 28px;
 font-size: 1.75rem;
 line-height: 1.25;
 margin-top: 2em;
 margin-bottom: 1em;
 }

というコードがあります。

赤い部分を、先ほどの青い部分に置き換えます。

 

するとどうでしょう。

綺麗かどうかは別にして、先ほどの見出し２部分が装飾されました。

今後、各ページで見出し２を使用した際は同じような見た目になります。

だんだんトップページらしい見た目になってきたのではないでしょうか。

今回の内容は以上になります。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法