在宅ワークが無料で学べる基礎講座やってます!詳しくはコチラ
JINカスタマイズ

【JINカスタマイズ】スマホヘッダーがうまく表示されていないときの対処法

JIN-custamaise

誰でも簡単にオシャレなブログにすることができるWordPressのテーマJIN

アイキャッチ
WordPressテーマJINへ変更!賢威と比べた感想ワードプレスを始めたときに、一番最初に選ばないといけないのがテーマ。 ブログの顔ですからね。 このテーマが、無料有料含めたらすごくた...

誰でもオシャレにできるはずなのに

ひよこ
ひよこ
おや?
思った通りにできてない!

なんてことありませんか?

わたしはスマホで見たときのヘッダーの表示がなかなかうまくいきませんでした…

今の時代、ブログの8割くらいはスマホから見られるとか。

なのに一番最初に目に入るヘッダーの表示が不自然だと、サイトの信頼性も下がりますよね。

そこで今回はスマホのヘッダー設定についてJINのマニュアルだけではわからない部分も詳しく解説していきたいと思います!

スマホヘッダーを見やすくしよう

スマホ普及に伴って、ブログ訪問者もスマホからの人がかなり多くなりました。

ブログはパソコンでの作業がほとんどなので、パソコンから見るとすごくおしゃれなサイトでも、スマホから見ると「なんだこりゃ!」となってるサイトもありますよね。

実はわたしもそうだったんです!
パソコンから見ると普通だったのですが、スマホから見てみると・・・

スマホ画像
にいな
にいな
ヘッダーの文字が全部映ってないし、ブログ名がダブってる!

ということで、このままだとかっこわるすぎるので、見やすい表示に直していきます。

スマホヘッダー設定方法

ダッシュボード

ダッシュボード「①外観」の中の「②カスタマイズ」をクリック。

ヘッダー設定

 

ヘッダー設定

ヘッダー設定」をクリック。

 

ヘッダー設定

ヘッダー全体の表示選択を「①非表示」にして「②公開」をクリック。
そうすると最上部のヘッダー部分が非表示になります。

非表示

今回の設定は「スタイル9(ヘッダー画像あり)」の場合です。
ヘッダー画像を設定されていない方は「表示」のままでもいいと思います。
両方試して好きな方を設定してみてくださいね。

ヘッダー画像設定

続いてヘッダー画像の切れてしまっている文字を調整します。

ヘッダー画像設定

ヘッダー画像設定」をクリック。

 

ヘッダー画像設定

①px」を調整してお好みの場所にテキストを表示させたら「②公開」をクリック。

テキストを上げたい場合はマイナス値を指定(例:-20px)、テキストを下げたい場合はプラス値を指定(例:20px)します。

参考サイト→JIN公式マニュアル

 

 

スマホでもヘッダーがちゃんと表示されるようになりました!

スマホ画面

まとめ*スマホでもパソコンでも見やすいブログに

今回はバランスを考えてサブテキストはカットしました。

パソコンの設定画面でもスマホから見たサイトを表示できますが、実際の表示とは違ったりするので、直接スマホを見ながらの設定をおすすめします!

ヘッダーはブログの顔です。

少しでも読者さんに好印象を持ってもらえるようにしたいですね♪

アイキャッチ
【人気テーマJIN】初心者でも安心!入れておくと便利なプラグイン14選 今回はわたしが愛してやまないWordPressテーマ「JIN」に入れておくと便利なプラグイン14選を紹介します♪ 絶対入れてお...
メルマガ 登録

在宅ワークってどんなもの?

自宅で稼げる方法でどんなものがあるの?

続けられるか不安…

 

そんなあなたのために、在宅ワークの基礎から学べる無料メルマガ講座をはじめました。

パソコン初心者なにいなでも、お家で稼いでいる方法を惜しみなく発信中!