AFFINEGER5で
- ブログタイトル（サイト名）のロゴが中央に来ない！
- やたらロゴがデカくなっちゃう！
- モバイル表示でも、サイト名がキレイにセンター表示してほしい！
AFFINGER5の初期設定では、サイト名の表示が左寄せ。なんとか中央に寄せたいと思っていましたが、方法が全然見つからないので放置していました。
このままじゃイカンと思い、形を整えると…
▲Before
▲After
デデン！！！きれいにできました。
▲モバイル表示もこんな感じ。オリジナルロゴを使いつつ、きれいに整いました。
同時に
- ロゴの大きさ再設定
- モバイルでのロゴ表示を最適化
も一緒にやったので、まとめておきますね。
もくじ
「AFFINGER5管理」→「ヘッダー」→「ヘッダー設定」でロゴを中央寄せに
まずは「AFFINGER5管理」に入ります。
▲どっちを押してもOK！
▲「ヘッダー」タブを押します。
▲「ヘッダー設定」へ進みましょう。上の場所をクリックしてもいいし、下へスクロールしてもいい。
▲ここの「ヘッダーを分割しない」に✔を入れましょう。
それから「save」を押し、一旦「AFFINGER5管理」を離れます。
これで完了！！！と は な ら な い
▲なんかデカくなっただけで、左寄せは継続中。なんでや！！ワシは中央に寄せたいんじゃあ！！！
大丈夫、すぐに直せます。もう一度「AFFINGER5管理」→「ヘッダー」→「ヘッダー設定」に入りましょう。
▲さっきは✔できなかった「ヘッダーエリアをセンタリング」っていうのが押せるようになってます。ここに✔。
で、「save」しましょう。
これで
▲タイトルロゴ、やっと中央に来てくれたよ…
▲センタリング前
▲センタリング後
分かりにくいですが、ちびっと寄ってます。最初の「ジ」の字に注目するとよく分かります。
..ふう、とりあえずセンター寄せが完了しました。
そう、気になるよねこれ。ここからは、ロゴの大きさを縮めていきます。
すでにロゴの大きさがピッタリの方は、その下の「モバイルロゴの設定」に進んでください！
サイト名ロゴのサイズが大きすぎるので、縮小していく
ロゴのサイズを適切にするには、主に2つの方法があります。
- 「style.css」に追記する
- ロゴ自体のサイズを変更する
どっちでもいいんですが、「style.css」の方はできるだけイジらない方向で行きます。ちょっとでも表記ミスがあると機能してくれないので、より確実な「ロゴ自体の縮小」でいきます。
まずは、ロゴの画像を変更していきます。わたしは「I♥IMG」という無料ジェネレータを利用しました。
▲「画像を選択」のところにロゴ画像を持っていきます。
▲画面右の操作バーで、縦横比率を変えずに簡単リサイズきます。
とりあえず、ほぼ半分のサイズ（500×96）に変更します。
▲よし、いいサイズになりました。
▲Before
▲After
なんということでしょう。大きさの違いが一目瞭然ですね。
とりあえず、ロゴの中央寄せ問題は解決しました。でもこれはPCで見たときの話。スマホビューの方もチェックしてみると…
▲悪くはないんだけどね。でも、左のメニューボタン（「三」の所）付近が間延びしてるような。
これをイジっていくと…
▲Before
▲After
メニューとタイトルロゴ、横並びでスッキリさせておきましょう。
AFFINGER5のサイト名ロゴ、モバイル表示でも中央に寄せる方法
▲まずは「外観」→「カスタマイズ」へ入ります。
▲「ロゴ画像」へ進みます。
▲こうなっています。この「モバイル用ロゴ画像」をクリックし、設定しましょう。通常のロゴと同じ画像で構いません。
▲その後、赤丸の全部にチェックを入れましょう。レイアウトが整います。
各チェック項目の補足
- 「モバイルロゴを使用する」：上で設定した「モバイル用ロゴ」が使われます。
- 「モバイル用ロゴ画像サイズ調整」：モバイル用にロゴの大きさが自動調整されます。これにより、「三」とロゴが横並び表示されるようになります。
- 「モバイル用ロゴ（略）をセンター寄せ」：左寄りだったロゴが、センターへやってきます。
▲これで完成です！モバイル表示もしっかりセンタリングできています。
AFFINGER5のサイト名ロゴを中央に寄せる方法まとめ
- 「AFFINGER5管理」→「ヘッダー」→「ヘッダー設定」で変更
- 場合によっては、ロゴ画像の大きさ調整が必要
- モバイルの設定も最適化すればスッキリ
という設定でした。AFFINGERはこういう初見殺しの設定がいっぱいあるんですよねえ。こういう「AFFINGER小技」、これからもまとめていきます。
とりあえず、ちゃんとロゴが中央に来てくれたので満足！
