AFFINGER BLOG

【AFFINGER5】サイト名の大きさを変更する方法【テンプレコードあり】

2020年8月5日

AFFINGER5
AFFINGER5を使い始めたけど、サイト名のフォントサイズを大きくしたい!どこから設定すればいいの?

 

  • AFFINGER5でサイトタイトルの大きさを変更する方法はある?
  • サイト名の行間を変更する方法はある?

 

ナミアツ
このような疑問を解決します。

 

AFFINGERのカスタマイズをしていると、気になるのがサイト名(サイトタイトル)の大きさ。

当ブログでいうとページ上部にある「JIKORICH」というサイト名。

 

ここのフォントサイズの大きさを変えたい

 

「デオフォルトだと少し小さいかな」と思いませんか??

 

サイト名なので簡単に変更できると思いきや、AFFINGER5にはサイト名のサイズを変更する箇所(簡単に変えられるところ)がないのです。

 

ですが、下記の方法を使えば1分でサイト名の大きさと、行間を変更することができます。

 

本記事では、AFFINGER5でサイトタイトルの大きさを変更する手順を解説します。

 

本記事を流し読み

  • AFFINGER5でサイト名のフォントサイズを変更するには「追加CSS」が必要
  • サイト名のフォントサイズを変更するのは簡単、初心者でも1分で完了!
  • サイト名を中央寄りにするには「AFFINGER5管理」から設定可能

 

ちなみに、AFFINGER5は「稼ぐ」に特化したワードプレステーマですが、「本当に稼げるのか?と疑問に思うところもありますよね。

 

当ブログでは、AFFINGER5に変更してからの収益の一部を公開しています。

気になる方はコチラの”AFFINGERは本当に稼げるか?”の記事をご覧ください。

 

 

AFFINGER5でサイト名の大きさを変更する方法

AFFINGERでサイト名を大きく変更する方法

それでは、早速AFFINGER5でサイト名のフォントサイズを変更する方法を解説します。(行間も変更できますよ)

流れはコチラ。

 

  1. フォントサイズ変更用のCSSコードを下記よりコピー
  2. AFFINGER5のダッシュボードへ
  3. 外観の中にある「追加CSS」へコピペ
  4. フォントサイズ(px)を調整して完了

 

ナミアツ
画像を使って、もう少し詳しく解説しますね。

 

サイト名のフォントサイズを変更する手順


  • step.1 まずはコードをコピー

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

    サイト名のフォントサイズを変更すためのCSSコードをコピーします。

    • font-saizeでフォントの大きさを変更します。
    • letter-spacingがサイト名の行間を設定することができます。

  • step.2 ダッシュボードを開き「追加CSS」へ

    ▼まずはダッシュボードを開く

    サイト名のフォントサイズの変更①

    ▼「外観」→「カスタマイズ」→「追加CSS」

    サイト名のフォントサイズの変更②

    • ワードプレスの「ダッシュボード」
    • メニューの「外観」→「カスタマイズ」
    • カスタマイズの中の最下部にある「追加CSS」を選択

  • step.3 CSSにコードをコピペし微調整

    ▼CSSの空いているところにコードをコピー

    サイト名のフォントサイズの変更③

    ▼値に数字を入力して大きさを確認する

    サイト名のフォントサイズの変更④

    • 「追加CSS」に先ほどコピーしたコードをペースト
    • font-saizeの値を変更してサイズを微調整
    • letter-spacingの値を変更して行間を微調整

PC表示だけでなく、スマホでの表示も確認しつつ進めると修正の手間が省けます。

ナミアツ
所要時間はわずか1分で簡単。以上でサイト名のフォントサイズと行間の設定は完了です。

 

まとめ:サイト名を大きくする方法

  1. CSSコードをコピー
  2. 「外観」→「カスタマイズ」→「追加CSS」
  3. CSSコードをペースト
  4. 数値を変更して完了

 

 

AFFINGER5でサイトタイトルを中央に寄せる方法

AFFINGERでサイトタイトルを中央に寄せる方法

それでは次にサイト名を中央に表示させる方法を見ていきましょう。

「AFFINGER5管理」のみで設定ができるので簡単です。

 

サイト名をページ中央部に表示させる手順


  • step.1 AFFINGER管理のヘッダーを選択

    ▼まずは「AFFINGER5管理」を選択

    サイト名を中央部に表示する方法①

    ▼次に「ヘッダー」の「Hヘッダー設定」を選択

    サイト名を中央部に表示する方法②

    • 「ダッシュボード」→「AFFINGER5管理」→「ヘッダー」
    • 「Hヘッダー設定」を選択

  • step.2 ヘッダーを分割しないを選択

    ▼「ヘッダーを分割しない」を選択

    サイト名を中央部に表示する方法③

    「Hヘッダー設定」の「ヘッダーを分割しない」を選択して、一度「save」します。※一度saveしないと「ヘッダーエリアをセンタリング」にチェックマークが付けられません。


  • step.3 ヘッダーエリアをセンタリング

    サイト名を中央部に表示する方法④

    上記でsaveした後に、再度「Hヘッダー設定」の「ヘッダーエリアをセンタリングに」にチェックを入れて完了です。


 

ナミアツ
サイトタイトルの表示位置がどのようになるか、下記のタブをクリックして確認してみてください。

 




サイト名を中央部に表示する方法⑤

サイト名を中央部に表示する方法⑥


 

サイトタイトルを中央に寄せる方法

  1. 「AFFINGER管理」→「ヘッダー」→「Hヘッダー設定」
  2. 「ヘッダーを分割しない」にチェックを入れ保存
  3. 「Hヘッダー設定」→「ヘッダーエリアをセンタリング」にチェックを入れて完了

 

 

オシャレでインパクトのあるサイトロゴを作る方法

オシャレなロゴ

「もっとオシャレに、もっとインパクトのあるサイト名やロゴを作りたい!」

と思った方は、その道のプロに作ってもらうのがおすすめです。

 

やはり素人のデザインでは限界がありますし、いつまでもデザインばかりに凝っていては肝心の記事作成ができません。

 

おすすめはココナラで、当ブログのプロフィールアイコンも作成頂いております。

 

ナミアツ
料金もリーズナブルなので比較的頼みやすいです。LINE感覚でやり取りできるのも楽。

 

まとめ:AFFINGER5でサイトタイトルを大きくする方法

AFFINGER5のサイト名の大きさを変更

それでは最後に本記事のまとめです。

サイト名(サイトタイトル)の大きさを変更する方法

  1. CSSコードをコピー
  2. 「外観」→「カスタマイズ」→「追加CSS」
  3. CSSコードをペースト
  4. 数値を変更して完了

 

CSSコード(コピペOK)

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

 

サイト名(サイトタイトル)を中央に表示する方法

  1. 「AFFINGER管理」→「ヘッダー」→「Hヘッダー設定」
  2. 「ヘッダーを分割しない」にチェックを入れ保存
  3. 「Hヘッダー設定」→「ヘッダーエリアをセンタリング」にチェックを入れて完了

 

ナミアツ
それでは今回は以上でおしまいです。最後までお読みいただきありがとうございました!

 

アフィンガーアイキャッチ画像
あわせて読みたいAFFINGER5は本当に稼げる?導入後2カ月レビュー【収益公開あり】

続きを見る

-AFFINGER, BLOG
-,

© 2020 JIKORICH