この記事を書いた人
みなさんこんにちは!あーるくん(@aru20r)です。
本記事では「ヘッダータイトルのサイズ変更と中央寄せ」というテーマで解説していきます。
こんな人に読んで欲しい




上記の悩みがある人はこの記事を読めばOKです。
「ヘッダータイトルを中央に寄せる方法とサイズ変更方法」について初心者でも分かりやすく、簡潔に説明していくので参考にしてください。
本記事の内容
ヘッダータイトルとは?


アフィンガー5の初期設定では「ヘッダータイトル」が左寄せになっています。
ヘッダータイトルが左のままでもいい人は、特にいじる必要がありませんが、
「タイトルを中央に寄せたい!」という人は、一緒に設定しましょう。
ヘッダータイトルを中央寄せ
before
after

ヘッダータイトルを中央寄せする流れ
ワードプレスのダッシュボードを開く
”AFFINGER
管理を開く
ヘッダーを開く
ヘッダーを分割しないにチェックをいれる
ヘッダーエリアをセンタリングにチェックを入れる




初期設定では「ヘッダーを分割しない」「ヘッダーエリアのセンタリング」にチェックマークが入っていません。

注意ポイント
「ヘッダーエリアを分割しない」にチェックマークを入れて「save」を押してからでないと、「ヘッダーエリアをセンタリング」のチェックできません。
なので、「ヘッダーエリアを分割しない」にチェックを入れたら、
まず「save」を押してから「ヘッダーエリアのセンタリング」にチェックを入れましょう。

タイトル名のサイズ変更
続いては、ヘッダータイトルのサイズ変更についてご紹介していきます。
先ほどセンタリングしたタイトル(RIBLOG)のサイズ変更方法です。
CSSコードでサイズを変えることができる
ヘッダータイトルは、CSSコードによってサイズ変更することができます。

サイズ変更ができるコード
header .sitename { display: inline-block; font-size: 40px; letter-spacing: 2px; }

タイトルの文字サイズを変更する手順

CSSコードを貼る流れ
1.ダッシュボード
2.外観
3.カスタマイズ
4.追加CSS



「追加CSS」を開きましょう。

ポイント
「ヘッダータイトル」のサイズ変更は「CSSコード」の、フォントサイズ(40px)と書かれた数字を変更することで、変更することができますよ!
まとめ
ここまで見ていただきありがとうございます。
本記事では「【アフィンガー5】ヘッダータイトルのサイズ変更と中央寄せ【基本設定】」についてお話をしてきました。
本記事で紹介した内容を真似するだけで表示することができますが、わからないことがあれば気軽に連絡ください。
また、”RIABLOG”では、ブログで役立つ情報などを発信しているので、参考にしてください。
