Wordpressテーマ

【AFFINGER5】サイト名ロゴが中央に来ない時の対処法。分かりにくい管理画面を攻略しよう

2020年10月8日

AFFINGER5のサイト名ロゴを中央に来させる方法

AFFINEGER5で

ざらし

  • ブログタイトル(サイト名)のロゴが中央に来ない!
  • やたらロゴがデカくなっちゃう!
  • モバイル表示でも、サイト名がキレイにセンター表示してほしい!

以上の疑問に答える記事です。

AFFINGER5の初期設定では、サイト名の表示が左寄せ。なんとか中央に寄せたいと思っていましたが、方法が全然見つからないので放置していました。

このままじゃイカンと思い、形を整えると…

AFFINGERのサイト名ロゴが中央に来ない

▲Before

AFFINGERのサイト名ロゴを中央に寄せたあと

▲After

デデン!!!きれいにできました。

 

AFFINGER5のサイト名ロゴをモバイルでセンタリング

▲モバイル表示もこんな感じ。オリジナルロゴを使いつつ、きれいに整いました。

特にコード等はイジらずに、簡単に出来ますよ!
Jinzo

 

同時に

  • ロゴの大きさ再設定
  • モバイルでのロゴ表示を最適化

も一緒にやったので、まとめておきますね。

「AFFINGER5管理」→「ヘッダー」→「ヘッダー設定」でロゴを中央寄せに

まずは「AFFINGER5管理」に入ります。

 

AFFINGER管理を開く

▲どっちを押してもOK!

 

「AFFINGER管理」の「ヘッダー」タブを開く

▲「ヘッダー」タブを押します。

 

AFFINGER5で「ヘッダー設定」へ進む

▲「ヘッダー設定」へ進みましょう。上の場所をクリックしてもいいし、下へスクロールしてもいい。

 

AFFINGER5ヘッダー設定

▲ここの「ヘッダーを分割しない」に✔を入れましょう。

それから「save」を押し、一旦「AFFINGER5管理」を離れます。

 

これで完了!!!と は な ら な い

AFFINGER5管理で「ヘッダー分割しない」だけ選んだ結果

▲なんかデカくなっただけで、左寄せは継続中。なんでや!!ワシは中央に寄せたいんじゃあ!!!

 

大丈夫、すぐに直せます。もう一度「AFFINGER5管理」→「ヘッダー」→「ヘッダー設定」に入りましょう。

AFFINGER5管理で「ヘッダーエリアをセンタリング」をチェックする

▲さっきは✔できなかった「ヘッダーエリアをセンタリング」っていうのが押せるようになってます。ここに✔。

で、「save」しましょう。

 

これで

AFFINGER5でタイトルロゴが中央にやってきた

▲タイトルロゴ、やっと中央に来てくれたよ…

 

「ヘッダー分割しない」だけ選んだ結果
▲センタリング前

タイトルロゴが中央にやってきた
▲センタリング後

分かりにくいですが、ちびっと寄ってます。最初の「ジ」の字に注目するとよく分かります。

はあああん分かりにくい!一旦管理画面を離れたら知らんボタンが出てくるとか、どないして分かるねええええん!!!!
Jinzo

..ふう、とりあえずセンター寄せが完了しました。

 

ざらし
でも…なんかロゴ、デカくない?

そう、気になるよねこれ。ここからは、ロゴの大きさを縮めていきます。

すでにロゴの大きさがピッタリの方は、その下の「モバイルロゴの設定」に進んでください

 

サイト名ロゴのサイズが大きすぎるので、縮小していく

ロゴのサイズを適切にするには、主に2つの方法があります。

  • 「style.css」に追記する
  • ロゴ自体のサイズを変更する

どっちでもいいんですが、「style.css」の方はできるだけイジらない方向で行きます。ちょっとでも表記ミスがあると機能してくれないので、より確実な「ロゴ自体の縮小」でいきます。

 

まずは、ロゴの画像を変更していきます。わたしは「I♥IMG」という無料ジェネレータを利用しました。

I LOVE IMG

▲「画像を選択」のところにロゴ画像を持っていきます。

 

ロゴサイズ変更

▲画面右の操作バーで、縦横比率を変えずに簡単リサイズきます。

とりあえず、ほぼ半分のサイズ(500×96)に変更します。

 

ロゴ画像をリサイズした結果
▲よし、いいサイズになりました。

 

タイトルロゴが中央にやってきた
▲Before

ロゴ画像をリサイズした結果
▲After

なんということでしょう。大きさの違いが一目瞭然ですね。

 

とりあえず、ロゴの中央寄せ問題は解決しました。でもこれはPCで見たときの話。スマホビューの方もチェックしてみると…

スマホで見たブログロゴ

▲悪くはないんだけどね。でも、左のメニューボタン(「三」の所)付近が間延びしてるような。

これをイジっていくと…

スマホで見たAFFINGER5ブログロゴ

▲Before

AFFINGER5モバイルロゴの設定完了

▲After

ざらし
おお!スッキリしたね!

メニューとタイトルロゴ、横並びでスッキリさせておきましょう。

 

AFFINGER5のサイト名ロゴ、モバイル表示でも中央に寄せる方法

AFFINGER5モバイルロゴ表示変更

▲まずは「外観」→「カスタマイズ」へ入ります。

 

AFFINGERモバイルロゴ表示変更2

▲「ロゴ画像」へ進みます。

 

モバイル用ロゴ画像11

▲こうなっています。この「モバイル用ロゴ画像」をクリックし、設定しましょう。通常のロゴと同じ画像で構いません。

 

AFFINGER5モバイル用ロゴ画像設定

▲その後、赤丸の全部にチェックを入れましょう。レイアウトが整います。

各チェック項目の補足

  • 「モバイルロゴを使用する」:上で設定した「モバイル用ロゴ」が使われます。
  • 「モバイル用ロゴ画像サイズ調整」:モバイル用にロゴの大きさが自動調整されます。これにより、「三」とロゴが横並び表示されるようになります。
  • 「モバイル用ロゴ(略)をセンター寄せ」:左寄りだったロゴが、センターへやってきます。

 

AFFINGER5モバイルロゴの設定完了
▲これで完成です!モバイル表示もしっかりセンタリングできています。

 

AFFINGER5のサイト名ロゴを中央に寄せる方法まとめ

AFFINGER5のサイト名ロゴを中央に来させる方法

  • 「AFFINGER5管理」→「ヘッダー」→「ヘッダー設定」で変更
  • 場合によっては、ロゴ画像の大きさ調整が必要
  • モバイルの設定も最適化すればスッキリ
こんなん初見で分かるはずないやんけ!!!!!!
Jinzo

という設定でした。AFFINGERはこういう初見殺しの設定がいっぱいあるんですよねえ。こういう「AFFINGER小技」、これからもまとめていきます。

とりあえず、ちゃんとロゴが中央に来てくれたので満足!

おすすめ新着記事

アフィリエイト

2020/10/29

【12%増収もあり】登録しておくべきASPまとめ。見直すだけで収益増も見込めます

この記事では、わたしがブログ収益化のため実際に使っているASPをまとめています。 ざらしASPなんて、ぶっちゃけA8とAdSenseだけでいいのでは…? というわけにはいきません。ASPによっては「報酬の12%上乗せ払い」「振込手数料無料」など、すぐに増収を見込めるものもあるからです。   結論から言うと Google AdSenseは基本中の基本 物販系はもしも・バリューコマースを。次点で本家Amazon 「12%上乗せ」してくれるASPまである。今のうちにサイト登録を という内容です。 大抵 ...

続きを読む

【3〜5万円台】ブログを始めるためのおすすめパソコン。歴5年のブロガーが厳選しました

ガジェット

2020/10/27

【3〜5万円台】ブログを始める・買い換えるためのおすすめパソコン。歴5年のブロガーが厳選しました

ざらし ブログ始めるんだけど、スマホだけじゃダメ?パソコンって要る? ブログのためには、どれぐらいの性能のパソコンが必要? ブログのため、パソコン買い替えた方が良いかな? という疑問をお持ちの方に役立つ記事です。 結論から言うと、パソコンはブログに必須。スマホやタブレットはサブ機として悪くないですが、それ「だけ」じゃ作業に支障が出ちゃいます。 でも、そんなハイスペックパソコンは必要ないです。3〜5万も出せば、ブログ用のパソコンとして十分すぎるのが手に入ります。 わたしは性能の違う3台のパソコン+iPadで ...

続きを読む

ブログで月収1万円を 安定させた方法

アフィリエイト

2020/10/26

ブログで月収1万を安定して稼ぐため、やったことをまとめます【検索流入・複数の収入源がカギ】

ざらし ブログで月収1万円稼ぐにはどうしたらいいの? ブログ収入をガンっと伸ばす方法はあるの? ブログ収入を伸ばしたいけど、今のやり方で合ってるのかな? といった疑問を、わたし自身が解決した方法をまとめています。   結論から言うと、大事にしたのは Googleアドセンス以外の、物販(Amazonなど)やアフィリエイト案件も扱う 検索キーワードを意識する 「量より質」。でも、数が少なすぎるのも✗ というところ。これらを意識した結果、ブログで月収1万円を4年半ほどは達成できています。(2020年も ...

続きを読む

AFFINGER5のサイト名ロゴを中央に来させる方法

Wordpressテーマ

2020/10/24

【AFFINGER5】サイト名ロゴが中央に来ない時の対処法。分かりにくい管理画面を攻略しよう

AFFINEGER5で ざらし ブログタイトル(サイト名)のロゴが中央に来ない! やたらロゴがデカくなっちゃう! モバイル表示でも、サイト名がキレイにセンター表示してほしい! 以上の疑問に答える記事です。 AFFINGER5の初期設定では、サイト名の表示が左寄せ。なんとか中央に寄せたいと思っていましたが、方法が全然見つからないので放置していました。 このままじゃイカンと思い、形を整えると… ▲Before ▲After デデン!!!きれいにできました。   ▲モバイル表示もこんな感じ。オリジナル ...

続きを読む

まずは月1,000円!ブログ収入を増やした戦略

アフィリエイト

2020/10/27

まずは月1,000円のブログ収入!初心者のわたしが成功したアフィリエイト戦略【実体験】

ざらし ブログの収入、どうやって増やすの? とりあえずブログで月1,000円(4桁)は稼げるようになりたい!どうしたらいいの? 初心者がASPのアフィリエイト案件で収入を得るために、どうしたらいい? 上のような疑問に答える記事です!   ブログを始めたてのとき、収入源は「Googleアドセンス」の場合がほとんど。でも1日2円とかですよね、アレ。 わたしも最初はそうでした。月500円もいけばすごーい!っていうレベル。月1,000円はかなり遠い道のりのように思いました。   ブログの収入を ...

続きを読む

  • この記事を書いた人

Jinzo

2015年にブログ「ジンゾースタジオ」を立ち上げ。ブログスキルを向上させていくため、身をもって試したことを備忘録としてまとめています。

-Wordpressテーマ
-, ,

© 2020 jinzo.tech