wordpressテーマstorkのスマホヘッダーを固定してサイト内循環を誘発させる方法!

wordpressのstorkテーマのスマホのヘッダーを固定する方法

スポンサーリンク




こんにちは、スガタク(@_sugawaratakuya)です😉

この記事では、当ブログのテーマ[ stork ]をちょっとイジってユーザーファーストにしちゃおう!って話

僕は、ブログをはじめるまでウェブデザイナーをメインでお仕事をしていました。

最近は、スマホでサイトを見る人が圧倒的に増えて、スマホファーストが出来ているかで、ウェブサイトはグーグルさんから評価をされたり、サイトを見るユーザーさんからも評価されます。

凄く大切、その点ストークや最近のワードプレスのテーマは良いですね!

しかし、みんな同じテーマで差別化が出来ないのと、アプリのUIやウェブデザインをしていた僕からしたこうしたら、もう少しよくなるよ!と提案です!

なので、ここでは、ユーザーファーストな考え方で、テーマをちょっと編集してあげると、良いよ!って提案が出来たらと思います!

>>>> ストークの詳細をみる!

スマホのヘッダー固定


 

アプリは、ほぼ全てヘッダー固定です!ヘッダー固定のメリットとして、4つあります。

ストークの場合、左上のハンバーガーメニュー内をカスタマイズ出来ます!一番読んで欲しい記事やプロフィールや、SNSリンクなど。パソコンと違ってサイドバーが記事下に行ってしまうので、記事を最後まで読まないと、サイドバーを目にする事がありません。

ヘッダー固定する事で、ハンバーガーメニューのクリック率は上がるので、スマホ用のサイドバー的な活用をすると良いです!

読んで欲しい記事など上手く配置してみましょう!

 

ブランディングとしてサイトのロゴや名前を記録させる事は大切です。スマホアプリを開くとヘッダーにロゴやアイコンにロゴなど様々な所に散りばめられています。

色もセットで大切ですが、まず目に触れる時間を増やす事が大切です!

ヘッダーロゴを配置する事で、ロゴをタップするとトップページに戻る事ができるので、ユーザーが記事に飽きてしまって、トップに戻りたいときになど直ぐにアクセスできるので離脱率を下げる事ができます。

 

サーチ機能もバカにできません、ブログを運営していくと徐々に同じワードでの記事数が増えていきます。そこでユーザーがこの単語の記事ってまだあるのかな?っと思った時に直ぐにワード検索できるボタンをヘッダーに配置する事ができる。

うさぎ君
ユーザーファーストな考えで凄く良いね!
うさぎ君
スマホからのアクセス8割だけど、ヘッダー固定にしてから、サイト内循環するようになったね!良い事だよ!
ライオン君
要因はこれだけじゃないと思うから、常に検証と結果を繰り返すことも大切だね!

まだ記事数が少ないですが、嬉しい限りです。

スポンサーリンク

ヘッダー固定|css

wordpressの管理画面 >> 外観 >> テーマ編集 >> 右上からスタイルシートを選択

/*

sumaho header kotei css

*/

@media only screen and (max-width: 767px) {
#inner-header {
position: fixed !important;
top: 0px;
}
.g_nav-sp {
margin-top: 60px;
}
}

 

上記のコードをコピペして >> 保存 >>で完了!

(FTPでcssファイルを編集している人は、そちらにペーストして下さいね!)

反映までに多少時間がかかる場合があります!

*ロゴ画像が大きすぎる方は、カスタマイズ画面からロゴのサイズを[ 小 ]にして下さい!

あとは、スマホのハンバーガーメニューのカスタマイズは自由にして下さいね!

 

うさぎ君
ロゴやSNSのトップ画像など1回無料で制作受け付けてます!気まぐれで有料にしちゃうので、お早めに!
ライオン君
制作するのうさぎ君じゃないでしょ!。。。スガタクに怒られるよ!笑
  • ブランディングをしたい!
  • まだロゴ作ってない!
  • ロゴ作ったけど、なんか微妙!

依頼は、ツイッターでDMでお願いします!もちろん無料です!

>>>> スガタクのツイッターで依頼する!

>>>> うさぎ君のツイッターで依頼する!

>>>> ストークの詳細をみる!

スポンサーリンク

▼記事を今すぐSNSでシェアする▼