AFFINGER5(WING)

【AFFINGER5】ブログ名表示を1行にする方法(スマホ表示)

投稿日:

ブログをスマホで表示した時に、ブログ名部分を1行にする方法を紹介します。

この方法はAFFINGER5(WING)を使用している方の設定方法になります。

タイトル表示を1行にしてスッキリさせたい!という方は参考にしてみてください(^-^*

通常のスマホ表示は見やすいけれど・・・

設定前の当ブログをスマートフォンで見た場合のタイトル部分は次のような表示でした。

Befor

  • 1行目・・・ハンバーガーメニュー(三本線のやつです)
  • 2行目・・・キャッチコピー
  • 3行目・・・メインタイトル(ロゴ画像)

タイトル自体は見やすいのですが、スマホの画面が小さいと肝心の記事の表示部分がせまくて見えにくい状態でした。

それを設定を変えて変更すると次のようになります。

after

ハンバーガーメニューの横にタイトルロゴ画像が表示され、1行のスマートなタイトルとなりました。

おかげで1画面でアイキャッチやタイトル下の書き出し文もスクロールせずに見えるようになりました。

タイトルとメニューを1行にすることは、コンパクトサイズのスマホを愛用している人にも見やすい画面作りにも繋がります!

それでは設定方法をチェックしてみましょう。

AFFINGER5 設定方法

step
1
ロゴ画像を設定する

外観 > カスタマイズ > ロゴ画像 を選択します。

「モバイル用ロゴ画像」を設定

※ロゴ画像を使用しない場合は必要ありません。

step
2
チェックボックスにチェックを入れる

「モバイル用ロゴ(またはタイトル)を使用する」にチェックを入れます。

step
3
「公開」ボタンを押して完了

最後に忘れずに「公開」ボタンをポチっとします。

公開後は確認もしてみてくださいね。

WordPress上の管理画面でも確認ができる機能がありますが、私の場合WordPressの管理画面上ではちゃんと変更ができていることが確認できませんでした。

しかし、モバイル上はちゃんと変更ができていたので、実際に確認してみるのが確実です。

ユーザーが使いやすいサイト作りを!

メニュー画面も気をつけなくちゃと感じたのは、友人の女性にはコンパクトタイプのスマホを好む人が数人いたからでした。

コンパクトタイプのスマホを見させてもらうと画面下部に固定メニューが出ているのや、広告が出てくる場合は記事が殆ど読めないなんてこともありました。

せっかく書いた記事はせめて読みやすいように表示させたいものですね。

 

 

 

 

-AFFINGER5(WING)

Copyright© ブロログ , 2019 All Rights Reserved Powered by AFFINGER5.