【AFFINGER】スマホヘッダーロゴの高さ調整について(コピペでOK!)

2022年1月8日

”””

 

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

 

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

 

こんな人におすすめ

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

 

参考となる記事

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

 

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

続きを見る

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】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】サイトタイトルとロゴ画像のカスタマイズ方法

続きを見る

 

作業お疲れ様でした!

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

 

初心者から有名ブロガーまで愛用されているSEO最強テーマ(14,800円)。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

 

AFFINGER6の購入はこちら

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-,