【AFFINGER6】スマホヘッダーロゴの高さ調整について（コピペでOK！）

「AFFINGER」使用時における、スマホ閲覧時のトップ画面のヘッダーロゴ画像エリアの高さの変更方法について解説していきます。

アフィンガーのトップ画面のカスタマイズにお困りの方やブログ初心者の方はぜひ参考にしてください。

こんな人におすすめ

WordPressテーマ「AFFINGER」の初心者の方
スマホトップ画面のロゴの高さ調整を行いたい方
ワードプレスにてCSSの追加•編集したい方

参考となる記事

サイトのロゴやタイトルに関するカスタマイズ方法については、以下の記事が参考になります。まだ設定できていない方は以下の記事を参考にしてみてください！

: 参考【AFFINGER6】サイトタイトルとロゴ画像のカスタマイズ方法

続きを見る

＼当ブログ使用テーマ／

誰でも簡単オシャレなデザイン！
インフォトップ月間総合第１位！
SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

スマホヘッダーエリアとは？？

スマホのヘッダーエリアについてです。これは、「サイトタイトル」や「サイトのロゴ」が表示されるエリアであり、どのサイトのトップページにも基本的には表示させる言わばホームページの標識みたいなものです。

以下の画面がスマホで表示されたホームページのヘッダーエリアです。

スマホヘッダーエリア（適度1）

メモ

固定記事・投稿記事などさまざまな場面において表示されるエリアになります。

そのため、当然ユーザーの方の目に触れる場面がかなりありますので、大切な設定エリアだと思っておきましょう。

スマホでのヘッダーエリアの表示が低い問題

PCやタブレット表示は問題ないけど、スマホで表示した時にヘッダーエリアが狭いのはなんで？？

こんな感じの疑問があるかと思います。実際には、以下のような感じでスマホで表示した際に「ヘッダーエリアの高さがギリギリ」といった問題を抱えている方も多いかと思います。

スマホヘッダーエリア（狭い1）

サイトロゴの表示自体は問題ないかと思いますが、少しきゅうくつに感じますね、、、

CSSにてコードの編集で解決

コード入力

それでは、上記に記載した問題はサイトのCSSにてコードの編集で解決します。コードをコピペでOKなので簡単に作業ができるかと思います。

追加CSSでの設定手順

手順1. まずは、WordPress管理画面より「外観」→「カスタマイズ」を選択しましょう。

手順2. カスタマイズ画面より、「追加CSS」を選択する。

追加CSS

手順3. CSSコードの追加をする。貼り付けが完了したら以下のコードをコピペ、貼り付けで作業完了です。

※「公開」を選択して設定の保存を完了しておきましょう。

追加CSS

@media print, screen and (max-width: 599px) {

/*ヘッダーアイコンの高さ*/

#s-navi dt.trigger {

height:80px;

}

実際に貼り付けた画面以下の通りです。

参考

ちなみに、CSSにおいて「 @media print, screen and (max-width: 599px) {} 」と言うのは、スマホで表示した時の設定を指します。

その後に記述するコードがスマホ表示した時の設定が反映されるので、覚えておきましょう。

設定後のヘッダーエリア

それでは、CSSの追加の追加、設定保存できたら編集が完了できていると思います。

せなお

スマホでの自分のサイトを確かめてみましょう！

実際の画面は以下の通りです。

スマホヘッダーエリア（適度）

確かにスマホでの表示した際のヘッダーエリア高さの調節ができています。あとは高さの変更はお好みで変更しましょう！

まとめ

「AFFINGER」を利用した際のスマホヘッダーロゴの高さ調整についてでした。

: 参考【AFFINGER6】サイトタイトルとロゴ画像のカスタマイズ方法

続きを見る

せなお

作業お疲れ様でした！

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら