賢威でスマホのサイドバー表示を変更してページビューを上げる方法!!

gimon

今回は、スマホからの訪問者の回遊率を高め、アドセンス広告をクリックしてもらう確率を高める方法についてです。

 

賢威6.2のテンプレートを使って作っている、特化型のトレンドブログがあるのですが、アクセス解析を確認してみると、そのアクセスのほとんどが携帯電話(スマホ)からです。

 

しかし、賢威6.2のデフォルトの設定ではスマホからの訪問者に最適な状況になっておらず、多くの読者を逃している可能性があります。

 

そこで、しっかりとレスポンシブデザインに目を向け、スマホからのアクセスを掴んで、ページビューを上げていきましょう。

 

レスポンシブデザイン

まず、賢威6.2を使って、レスポンシブデザインを対応させていれば、自動で画面の大きさが変り、その端末に合った表示になることはご存知だと思います。

 

では1度、画面を小さくしてスマホ表記を確認してみて下さい。

 

下記のようにサイドバーが自動で折りたたまれるようになっていませんか?

 

sidemenu

 

これでは、スマホで見ている人がこの【サイドバー】という部分をクリックして開いてくれる可能性はかなり低いです。

 

トレンドブログの場合は、サイドバーに【人気の記事】や【おすすめ記事】、【カテゴリー】などを表記してサイトの回遊率を高める工夫をしているはずです。

 

そのサイドバーが表記されず見てもらえないというのは、致命的です。

 

そこで、賢威の設定を変えて、レスポンシブデザインでスマホ表示になっても、自動でサイドバーが折りたたまれないようにしてしまいましょう。

 

サイドバーの折りたたみ解除

今回、試したのは、賢威6.2のプリティ版のテンプレートです。

(参考画像は一部クール版を使っています。)

 

2カラムで使用している際、サブコンテンツには何の情報もないので、サブコンテンツの部分を削除して、サイドバーの折りたたみ機能も無効にしてしまいます。

 

なので、2カラムでブログを運営している人は参考にして下さい。

 

まずは、賢威のダッシュボードの【外観】⇒【テーマ編集(エディター)】から、【mobile.css】へ進みます。

 

sidemenu2

 

その中に下記のような【/*折り畳み*/】という部分があるので、この部分の記述を全て削除してしまいます。

 

sidemenu3

 

削除する範囲↓↓

#sub-contents .sub-contents-btn,
#sidebar .sidebar-btn{
display: block;
margin-bottom: 1em;
padding: 0.5em;
padding-left: 2.5em!important;
background: url(./images/icon/icon-arrow05.png) 1em center no-repeat #ff9899;
color: #fff;
font-size: 1.167em;
cursor: pointer;
}

.sub-column #sub-contents-in,
.sub-column #sidebar-in{ display: none; }

.sub-column .showSubConts,
.sub-column .showSidebar{
display: block!important;
}

.col1 .sub-column .ranking .item-img,
.col2 #sub-contents .ranking .item-img,
.col2r #sub-contents .ranking .item-img,
.col1 .sub-column .profile-img,
.col2 #sub-contents .profile-img,
.col2r #sub-contents .profile-img{
float: none;
padding-right: 0;
}

.col1 .sub-column .banner li,
.col2 #sub-contents .banner li,
.col2r #sub-contents .banner li{
display: block;
margin-right: 0;
}

.sub-column dl.search-box{ width: 100%; }

.sub-column dl.search-box dt{
margin-right: 0;
margin-bottom: 0.4em;;
width: 100%;
}

.sub-column dl.search-box dt,
.sub-column dl.search-box dd{ float: none; }

 

これで、レスポンシブのスマホ表示になった時でも、サイドバーが折りたたまれる事なく、そのまま表示されます。

 

sidemenu1

 

下にスライドしていくだけで、サイドバーの【人気の記事】や【おすすめ記事】が表示されるので、その記事に興味を持った人がクックしてくれて、回遊率が高まります。

 

そのおかげでページビューが増え、アドセンスの報酬も上がっていきます。

 

この方法は、スマホからのアクセスが増えている現状では大きな効果が期待できます。

 

是非とも取り入れてみて下さい。

 

※CSSを変更する際は必ずアックアップを取ってから行うようにしてください。

※変更が反映されない場合は【F5】を押してページを更新すると反映されます。