Twenty Nineteen 11、ヘッダエリアを調整する

【2020年3月更新】

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

Twenty Nineteen、ヘッダーエリア
Twenty Nineteen、ヘッダーエリア

サイト名を巨大に!

画像赤枠内の「サイト名」は、↓で設定します。

管理画面の「外観 → カスタマイズ → サイト基本情報」の「サイトのタイトル」

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

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

このコードを管理画面の「外観 → CSS編集」に貼り付ければ、サイト名のサイズを調整できます。

※対象ページタイプを指定していないので、他のページのサイト名の大きさも変わります。

「font-size:3rem」はお好みでご調整くださいませ。

サイト紹介文を削除

(紫枠内の) サイト紹介文をメタディスクリプションに使う場合は残した方がよいですが、個人的にはごちゃごちゃしているように感じたので、削除しました。

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

妙な区切り線を削除

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

ワードプレス管理画面の「外観 → CSS編集

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

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

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

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

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

子テーマのentry-header.phpの関連個所に下記をコピペ

<div class="entry-meta">
	<?php twentynineteen_posted_by(); ?>
	<span class="entry-date">★ Published on: <?php echo get_the_date(); ?></span>
	<span class="modified-date">★ Modified on: <?php echo get_the_modified_date(); ?></span>
	<span class="comment-count">
		<?php
		if ( ! empty( $discussion ) ) {
			twentynineteen_discussion_avatars_list( $discussion->authors );
		}
		?>
		<?php twentynineteen_comment_count(); ?>
	</span>

カラーフィルターの色の変更

カラーフィルターの色は、「外観→カスタマイズ→色」にて変更できるのですが、フィルターに色を付けない場合、オリジナルの色ではなくて、明度を落とした背景になるようです。

色々変えた後で、結局デフォルトの色が一番よきって感じでした。

パンくずリストの追記

個別投稿(記事)のページには、ナビゲーションメニューの代わりに「プラグインYoast」を使ってパンくずリストを表示させてみました。

<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
<?php if (is_single() && function_exists('yoast_breadcrumb') ): 
	{
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
	} 
	?>
	
<?php else: ?>

でも正直言って、ナビゲーションメニューの方がおすすめです。

「パンくずリスト」はコンテンツのトップに入れるのもアリだと思います。

仕上がり図

Twenty Nineteen、ヘッダーメニュー修正後
Twenty Nineteen、ヘッダーメニュー修正後

最後までお読みいただきありがとうございました。

作成者: のろのろ

サイト管理者

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です