このブログのテーマはaffinger5を使っているのだが、設定やカスタマイズの方法がよく調べないとわからないこともあり、ブログデザインを疎かにしていた。googleアドセンス用にメニュー等は作っていたのだが、当初から気になっていたトップページの余白を消すことに成功したので、その手順を紹介したいと思う。
1.affinger5導入したはいいけど、トップページの余白多くね？
affinger5のテーマ導入し、ブログロゴの画像も作って設定し、さあブログ書くか！となったものの、当初より気になっていたことがあった。あれ、なんかトップページの余白多くね？ということである。
しかし、ブログ初心者向けのコメントを見ると、「デザイン気にしている暇があったら記事を書け」と二言目には書いてあるので、半分泣きながら記事ばっかり書き続ける日々だった。でもやっぱり気になるので、ちょろっと調べたものの、なかなか原因がわからねぇ・・。ということで、またしばらく放置した。
2.やっとわかった余白の原因と対処
そして、時間がまとまって取れる時があったので、ちゃんと調べてみた。そしたら、やっと余白の原因がわかった。対処するのもまた一苦労だったのだが、設定することができたので紹介したいと思う。
ブログキャッチフレーズの非表示設定
原因の1つ目がブログのキャッチフレーズだった。余白だと思っていたが、実は白い背景にキャッチフレーズが白文字で設定されており、見えなかっただけであった。全体の配色を白黒を選択していたのが悪かったのかもしれないが、デフォルトの設定で見えなくなってしまっていた。まずは、キャッチフレーズがどんな感じで本来表示されていたか、確認してみる。
wordpress管理画面の外観＞カスタマイズの順に選択し、基本エリア設定の中のヘッダーエリアを選ぶ。
下にスクロールすると、"サイトタイトルとキャッチフレーズの文字色"という欄があるので、色を選択し、白から変更する。
設定を保存し、改めてトップページを見てみると・・・
キャッチフレーズが出てきた。
キャッチフレーズの内容自体へのツッコミはおいといて、僕のブログのデザイン上は不要だと思ったので、非表示設定することにした。※SEOに影響するかは意見がわかれるようです。
affinger5 管理＞ヘッダーを選び、下にスクロールする
ヘッダー設定に、"ヘッダー(及びフッター)にキャッチフレーズを表示しない"にがあるのでチェック
設定を保存し確認してみると、確かに消えていた。
これで、キャッチフレーズの非表示は完了。
※その後、下記で設定変更し、ロゴ下にキャッチフレーズを表示することにしました。
スライドメニューの非表示設定
しかし、スマホで見てみると、まだ余白があるように見える・・。ということで、さらに調べてみる。すると、スマホのスライドメニューも同じく白い背景に白色で設定されていることがわかった。スライドメニューとは、下記の画像のもの。スマホでよくあるやつ。中には、ハンバーガーメニューと呼ぶ方もいるようです。
ということで、同じく色を付けて表示させてみる。
外観＞カスタマイズの順に選択し、メニューのカラー設定を選ぶ。
続いて、スマホスライドメニューを選び、
スライドメニューボタン背景色を黒にしてみる。
すると、左上にスラドメニューが見えるようになった。
選択すると、設定していたメニューが左からニュッと出てくる。
これも不要ではないか・・？と思ったため、非表示にすることにした。
affinger5 管理＞メニューから、スマホ用スライドメニュー設定画面の中の"スマートフォンメニューを表示しない"チェックボックスにチェック。
設定を保存し、トップページを見てみると・・・
非表示にでき、やっと余白が消えてくれた・・。
3.まとめ
ということで、以上が今回やった余白の対処だ。結構突き止めるのに時間を要し、苦労した。設定も、affinger5 管理から行うのか、カスタマイズから行うのかで結構迷ったりした。affinger5の余白で悩んでいる方でいたら、是非参考にしていただければと思う。
今回の余白とは別に、affinger5の全体的な設定について、こちらのブログが役に立ったので、ご紹介させていただきたい。