カテゴリー: WEB関連

WEB関連のカテゴリ。ホームページ作成やSEO対策など、ワンズテクノロジースタッフがウェブに関して記載します。

Twenty Sixteen-タイトルフォント

４連休も残すところあと１日です。
#連休中ショッピングモールに行ったらびっくりするぐらい密だったよ

Twenty Sixteen タイトルが大きい

利用させてもらっていたFC2 BLOGサービスから、WANDZ NOTEに移行し、しばらくたち、使い方もだいぶ慣れてきました。

バタバタしていて、細かく確認していなかったのですが、テンプレートについて、一番に思ったことは、使っているテーマのタイトルが大きすぎるということ。

Twnty Sixteen タイトルフォントが大きい
タイトルフォントサイズ

調べたところ、.entry-titleのクラスから変更可能らしい。pxフォントサイズのみ変更しても、フォントの大きさは変わらず、後から読み込まれている、remフォントサイズを変更して、フォントの大きさが小さくなることを確認しました。
#完全に僕の備忘録

rem（レム）フォントサイズ

remは、CSSにおきるhtmlタグの文字サイズを基準とする相対的な文字サイズ指定の単位。

またレスポンシブに動作しているため、複数箇所変更する必要があります。iPhone時の文字サイズ。ノートパソコンの時文字サイズ。デスクトップパソコンとデバイスごとに見え方が異なるため。

とりあえず、一つ気になっていた箇所を修正できてよかったです。気になるところは、まだまだたくさんあるので、WANDZ NOTEは徐々に修正していく予定です。

#TwentySixteen #タイトル #フォント #rem

Takuma Sugita BLOG

ワンズテクノロジー株式会社では、パソコン・サーバーの修理＆販売＆展開を主軸に
光インターネット回線工事、ホームページ制作、中古再生事業など
お客様のビジネス環境をトータルにサポート致します。

公式ホームページはこちら↓
WAndz Technology



Twenty Sixteen 本文の幅を広げる

WordPress Twenty Sixteenのテーマ
シンプルでとても使い勝手がよいと思います。

個人的になんでもシンプルなものが好きです。

気になる点の一つとして、本文の幅が日付、コメント、タグなどが
本文の左に表示されることによって、本文の幅が狭くなってしまっていること。

スタイルシート3590行目あたりに下記のコードがあります。
（テーマのバージョンによって記載箇所が異なります）

body:not(.search-results) article:not(.type-page) .entry-content {
float: right;
width: 71.42857144%;
}

このコードを子テーマより下記の通り変更

body:not(.search-results) article:not(.type-page) .entry-content {
clear: both;/* floatを解除 */
width: 100%;
}

左側に日付等が表示されなくなり
本文の幅が広くなります。

本文の幅が広くなったあと、日付等と本文の距離が近いため
3618行くらい　下記コードのmargin-topを変更する

body:not(.search-results) article:not(.type-page) .entry-footer {
float: left;
margin-top: 0.1538461538em;
width: 21.42857143%;
}

2.4emぐらいでしょうか。数値は任意です。
あとは日付等の改行を直す必要があります。

少し下に下記コードが

display: block;
margin-bottom: 0.5384615385em;

blockのために日付等が改行しています。
日付等の左右余白をとるためpadding-rightを追加する。

デフォルトのままでは、日付、タグ等のwidth 幅が狭いため、
3620行ぐらいにある下記コード
width: 100%とする

body:not(.search-results) article:not(.type-page) .entry-footer {
float: left;
margin-top: 2.4em;
width: 100%;
}

3637行あたりにある下記コード
padding-rightの数値を変えることで
文字間を調整

.single .byline,
.full-size-link,
body:not(.search-results).group-blog .byline,
body:not(.search-results) .entry-format,
body:not(.search-results) .cat-links,
body:not(.search-results) .tags-links,
body:not(.search-results) article:not(.sticky) .posted-on,
body:not(.search-results) article:not(.type-page) .comments-link,
body:not(.search-results) article:not(.type-page) .entry-footer .edit-link {
padding-right: 24px;
}

#WordPress #TwentySixteen #カスタム #本文の幅

Twenty Sixteen-トップページタイトル削除

WordPress Twenty Sixteen トップページタイトル削除方法

content-page.php (template-parts/content-page.php)

11行目のコードがタイトルを管理

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

上記コードをすべて削除することで
トップページタイトルが消えます。

#WordPress #TwentySixteen #トップページタイトル #削除