プログラミング

【AFFINGER アフィンガー5】サイト名とスマホ用ハンバーガーメニューを横並びにする方法

こんにちは、イケゾーです。

今回は、ワードプレステーマ「AFFINGER5」のカスタマイズを解説していきます。

先日、下のツイートをしました。

まず、デフォルト状態を確認します。

スマホ表示にした時に、ハンバーガーメニューアイコン(三)とサイト名(IkezooBlog)が縦並びになっています。

かっこ悪いですね。これを横並びにする方法を解説していきます。

 

この記事を読むと、「AFFINGER5」ヘッダーのカスタム方法が分かります。

 

【AFFINGER アフィンガー5】サイト名とスマホ用ハンバーガーメニューを横並びにする方法

まず現状ですが、ハンバーガーメニューのアイコンと、サイト名のそれぞれがブロック要素として配置されているためですね。

これを解除して、横並び(フレックス)にする方法を解説していきます。

 

 目標の確認

最終目標の形を確認しておきましょう。

 

【PCやタブレットでの表示】

 

【スマホ表示 NG】

ハンバーガーメニューと、サイト名の間に改行がされている。

【スマホ表示 OK】

ハンバーガーメニューと、サイト名げ横並びで、スマート。

 

 ステップで解説

管理画面を開く

「外観」→「カスタマイズ」を選択します。

詳細設定画面を開く

メニュの中から、「ロゴ画像」を選択します。

設定を変更し、保存

モバイル用ロゴ(又はタイトル)を使用する にチェックをいれる。

モバイル用ロゴ(又はタイトル)をセンター寄せ にチェックをいれる。

※画像は選択してもしなくても問題はありません。

 

おわり

以上です。簡単な設定ですが、2時間近く格闘しました。

誰かのお役に立てれば嬉しいです。

このブログでは、効率的で楽しい「健康プログラミング」を発信しています。

 

ぜひ、他の記事もご覧ください。

 

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング
-, , , ,