AFFINGER5でサイトタイトルの大きさ・サイズを変更する方法【PC・モバイル両対応済み】

・アフィンガー５を使用してるけどサイト名の大きさをもう少し大きくしたい

・アフィンガーのマニュアルを見たけど変更方法が分からない

このような悩みにお答えしていきます。

アフィンガー５を使っていてサイトタイトルの大きさを変更したいと思ったことはありませんか？

アフィンガーを使っているブロガーは他にもたくさんいますが、他のブログと差別化して自分だけのアフィンガーブログを作っていきたいと誰もが思ったことがあるかと思います。

今回はアフィンガー５のサイト名の大きさをPC・モバイル共に変更する方法をご紹介していきます。

サイト名を任意のサイズに変更するCSSコードの紹介

サイト名の大きさは基本的にCSSコードにて変更していきます。

『AFFINGER5管理』や『カスタマイズ』画面からは変更できないので注意して下さいね。

PC・モバイル両方のデバイスでサイト名を変更できるCSSコードをご紹介していきますのでご安心下さい。

テーマエディターを編集していくので念のためにバックアップは取っておきましょう！

それでは順番に見ていきます。

①：PCでサイト名のサイズを変更するCSSコード

ではまず、以下手順でテーマエディターの編集画面に移りましょう。

テーマエディターに移行したら上画像のように、編集するテーマをAFFINGER5の『子テーマ（Child）』を選択して編集していきます。

僕は『JET』という子テーマを使用しているので『JET-Child』を選択しています。

子テーマを選択したら下記CSSコードをコピーしてそのまま貼り付けましょう！

フォントのサイズは自分の好きなサイズに合わせて調節して下さい。

CSSコードを追加してデザインを編集するときは他のCSSコードと区別して分かりやすいように、下記の日本語を表記した区別線を書いておくとgoodですよ。

ベイク

②モバイルでサイト名のサイズを変更するCSSコード

次に、モバイル上でのフォントサイズを指定するためのCSSコードを紹介します。

CSSコードを紹介する前にモバイル版でのフォントを指定するための事前設定が必要です。

以上の手順にてモバイル用ロゴ画像を編集するカスタマイズ画面に移行します。

モバイル用ロゴ画像の編集画面に移行したら、上画像のように『モバイル用ロゴ（又はタイトル）を使用する』にチェックを入れておきましょう！

これにチェックを入れないと以下のようなデザインになってしまいます。

もちろん、上のようにタイトルが下にはみ出した（モバイル用ロゴ画像を使用するにチェックを入れていない）タイトルデザインのままにしているアフィンガーユーザーもいますが、個人的には少し印象が良くないのでチェックを入れています。

次に、下記のCSSコードを同じようにテーマエディターに貼り付けましょう！

こちらもフォントサイズは好きなサイズに合わせて下さい。

サイト名を変更する時の注意点

注意点としては以下２つです。

①：サイト名はほどよい大きさに

サイト名は大きすぎても小さすぎてもダメです。

自分のサイト名を覚えてもらいたいが故に、あまりにも大きなサイズにしてしまうのは不快感を与えかねないですし、小さすぎてもバランスが悪いので読者が見やすいバランスの取れたサイズ感にしましょう。

②：フォントサイズが変わらない場合の対処法

CSSコードをコピペしたのにフォントサイズが変わらない場合は以下の対処法を試してみて下さい。

一つ目はブラウザに残っているキャッシュを削除することでCSSデザインが反映されます。

二つ目は「テーマエディター」に戻り、記載されているCSSコードの順番を入れ替えてみる方法です。

PCのサイト名を変更する際のCSSコードを例に見ると、「letter-spacing:~0px;」と「font-size:32px;」を前後逆にしてみる、とかですね。

以上の方法でたいていの場合はCSSデザインがちゃんと反映されるようになります。

まとめ：サイト名を自分サイズに調整してブログデザインを整えよう！

アフィンガーのブログタイトルの大きさは初期設定の時点では少し小さめに設定されています。

サイトタイトルはSEOに直接影響するわけではないですが、読者視点から見てもブログのデザインはある程度整えておいた方が好印象です。

今回ご紹介した方法はアフィンガーの公式サイトにも記載されていないので、是非参考にしていただきサイトデザインを整えて頂ければと思います！