AFFINGER5

【アフィンガー5】ヘッダータイトルのサイズ変更と中央寄せ【基本設定】

この記事を書いた人

みなさんこんにちは!あーるくん(@aru20r)です。

本記事では「ヘッダータイトルのサイズ変更と中央寄せ」というテーマで解説していきます。

こんな人に読んで欲しい

悩む人
アフィンガー5の設定が分からない
悩む人
ヘッダータイトルを中央にしたい
悩む人
タイトルのサイズを変更したい
悩む人
初心者でも簡単に変更する方法が知りたい

 

上記の悩みがある人はこの記事を読めばOKです。

「ヘッダータイトルを中央に寄せる方法とサイズ変更方法」について初心者でも分かりやすく、簡潔に説明していくので参考にしてください

 

ヘッダータイトルとは?

 

あーる
ヘッダータイトルとは、トップページのヘッダー部分にあるタイトルです。

 

 

あーる
画像では僕のブログを例にしますが、「RIABROG」と表記されている部分が、ヘッダータイトルです。

 

 

アフィンガー5の初期設定では「ヘッダータイトル」が左寄せになっています

ヘッダータイトルが左のままでもいい人は、特にいじる必要がありませんが、

タイトルを中央に寄せたい!」という人は、一緒に設定しましょう。

 

ヘッダータイトルを中央寄せ

 

before

after

 

あーる
ヘッダータイトルを中央寄せする方法をお話ししていきます。

 

ヘッダータイトルを中央寄せする流れ

ワードプレスのダッシュボードを開く

”AFFINGER

管理を開く

ヘッダーを開く

ヘッダーを分割しないにチェックをいれる

ヘッダーエリアをセンタリングにチェックを入れる

 

あーる
まずはWordPressのダッシュボードを開きましょう。

 

 

あーる
まずはWordPressのダッシュボードを開き、アフィンガー5管理を開きましょう。

 

 

あーる
アフィンガー5管理を押すと、”ヘッダー”という項目が出るので開きましょう。

 

 

あーる
”ヘッダー”を押して下にスクロールをすると、”ヘッダー設定”っという項目があります。

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

 

 

あーる
「ヘッダーを分割しない」「ヘッダーエリアのセンタリング」にチェックマークを入れて「save」を押しましょう。

 

注意ポイント

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

なので、「ヘッダーエリアを分割しない」にチェックを入れたら、

まず「save」を押してから「ヘッダーエリアのセンタリング」にチェックを入れましょう。

 

 

あーる
そうすることで、”ヘッダータイトル”を中央寄せすることができますよ!

 

タイトル名のサイズ変更

学生、タイピング、キーボード、テキスト、女性、スタートアップ

 

続いては、ヘッダータイトルのサイズ変更についてご紹介していきます。

先ほどセンタリングしたタイトル(RIBLOG)のサイズ変更方法です。

 

CSSコードでサイズを変えることができる

ヘッダータイトルは、CSSコードによってサイズ変更することができます

 

あーる
CSSコードの貼り付けについては、手順の方でご紹介します。

 

サイズ変更ができるコード

 

header .sitename {
	display: inline-block;
	font-size: 40px;
	letter-spacing: 2px;
}

 

あーる
上記のCSSコードを挿入することで、ヘッダータイトルの文字をサイズ変更することができます。

 

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

あーる
CSSコードを貼る手順のついて説明します。

 

CSSコードを貼る流れ

1.ダッシュボード

2.外観

3.カスタマイズ

4.追加CSS

 

あーる
まずはWordPressのダッシュボードを開きましょう。

 

 

あーる
外観→カスタマイズを押します。

 

 

あーる
カスタマイズの一番下に「追加CSS」という項目があります。

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

 

 

あーる
先ほど記載した「CSSコード」をコピペすることによってサイズ変更することができます。

 

ポイント

「ヘッダータイトル」のサイズ変更は「CSSコード」の、フォントサイズ(40px)と書かれた数字を変更することで、変更することができますよ!

 

以上で説明は終わりですが、アフィンガー5のことで分からないことがあれば、僕のTwitter「@aru20r」まで連絡ください。

 

まとめ

学生、女性、スタートアップ、ビジネス、人々、学生

 

ここまで見ていただきありがとうございます。

本記事では「【アフィンガー5】ヘッダータイトルのサイズ変更と中央寄せ【基本設定】」についてお話をしてきました。

本記事で紹介した内容を真似するだけで表示することができますが、わからないことがあれば気軽に連絡ください

→→あーるのTwitter

また、”RIABLOG”では、ブログで役立つ情報などを発信しているので、参考にしてください

あーる
楽しいブログライフを!

 

 

  • この記事を書いた人

あーる

-AFFINGER5

© 2020 RIABLOG Powered by AFFINGER5