JIN PR

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

JIN-custamaise
記事内に商品プロモーションを含む場合があります

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

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

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

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

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

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

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

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

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

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

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

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

実はわたしもそうだったんです!

パソコンから見ると普通だったのですが、スマホから見てみると・・・

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

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

スマホヘッダー設定方法

ダッシュボード

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

ヘッダー設定

 

ヘッダー設定

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

 

ヘッダー設定

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

非表示

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

ヘッダー画像設定

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

ヘッダー画像設定

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

 

ヘッダー画像設定

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

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

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

 

 

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

スマホ画面

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

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

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

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

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

在宅ワーク 開業届 保育園
在宅ワークでも開業届で保育園に入れられる!コツと注意点を解説します在宅ワークは子供と一緒にいながらできることが魅力ですが、いざ本格的に仕事をしだすと思ってた以上に大変だったりします。 隙間時間にできる...