「Twentynineteen」のヘッダエリアを調整しました。

twenty nineteen - header area

サイト名を巨大に!

画像赤枠内の「サイト名」は、管理画面の「外観→カスタマイズ→サイト基本情報」の「サイトのタイトル」で設定します。

スマホ画面上、サイト名が小さくて、ホームに行きづらかったので、サイト名の部分を巨大にしておきました。

.site-title {
	font-size: 3rem;
}

このコードを管理画面の「外観→CSS編集」に貼り付ければ、サイト名のサイズを調整できます。※対象ページタイプを指定していないので、他のページのサイト名の大きさも変わります。

私は巨大にしたかったので、3remに設定しています。

サイト紹介文を削除

(紫枠内の)サイト紹介文はあった方がいいとは思いましたが、ごちゃごちゃしているように感じたので、削除しました。

これは管理画面の「外観→カスタマイズ→サイト基本情報」の「キャッチフレーズ」を空白にすれば消えます。

メニューバーを調整

(水色枠内の)メニューバーは、管理画面の「外観→メニュー」で編集できます。

twenty nineteen - header menu setting

項目間が窮屈だったので、ついでに1rem分のマージンを入れてみました。

.site-branding,
.main-navigation ul.main-menu > li {
	line-height: 1.25;
	margin-right: 1rem;
}

妙な区切り線を削除

(ピンク色枠内の)変な区切り線が邪魔臭いので、見えない様にしました。

h1:not(.site-title):before,
h2:before {
  background: #767676;
  display: block;
  height: 0px;
  margin: 1rem 0;
  width: 1em;
}

残念ながら、存在するCSSを削除する方法はしらないので、height:0pxの部分で線が見えないようにしただけで、完全に削除出来たワケではありませんが、ま、いいでしょ。

投稿日と最終投稿日の追加

個人的な好みで、「最終投稿日」を書いておきたい派なので、子テーマを作成し、追記しました。

需要が少なさそうなので、細かくは書きません。

パンくずリストの追記と分岐

個別投稿(記事)のページには、ナビゲーションメニューの代わりにパンくずリストを表示させることにしました。

現在はプラグインYoastを使って投入しているため、記事タイトルが2回表示されてしまう事になります。

後で、手書きのコードで差し替えてから、詳細記事を書くかも。書かないカモ。

仕上がり図

twenty nineteen - header area modified

まぁ、間違いなく最初の大画面アイキャッチの方がおしゃれなんでしょうけど、私はこっちの方がスッキリして満足だから良し!

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください