前々からやりたかったスマホサイトのメニューボタンを付けました。ブログへのアクセスは７０％がスマホからと言われていますから、まずスマホから手がけましょう。
ただし、これが出来るのはPro契約の方のみです。
スマホサイトにメニューを設置する
参考にした記事はこちらです。
スマホサイトのデザインカスタマイズ情報をまとめてくださっています。
わかりすく書いてくださってありがとうございます。
色々あるカスタマイズの中から、本日は「トグルメニューバーの追加」実装しました。
メニューボタンを押したらピヨーンって下に出てくるアレです。
スマホサイトって、デフォルトでカテゴリーが表示されていないんですね。
カテゴリー表示はやっぱりあった方がいいと思います。
この「トグルメニューバー」
作業としては、
１．コードを貼り付けて
２．「カテゴリの名称」とその「リンク先URL」をそれぞれ書き換える
だけです。
思いのほか簡単に出来ました。まだの方ぜひお試しください。
matkaさんのご説明にもありますように、直帰率を下げるためにもこちらのボタンは有効です。直帰率というのは「１ページしか閲覧されなかったアクセスの割合」です。
折角訪問してもらったからには、ぜひ他のページも読んでいただきたいものです。
私もメニューボタンがあると他のページもついつい読みたくなります。
matkaさんが記事の中でご紹介されているコードの作者さま
Yukihyさんのブログです。ありがとうございます。
このブログすごすぎます。面白い記事を山ほど書いておられます。
全部読みたい。そして大学４年生～！
この才能でこの若さ。うらやましすぎます。
見出しデザインの変更
記事を読みやすくするには見出しのデザインも重要です。話の区切りが分かりやすくなります。見え方をよく確認してみましょう。
私のスマホデザインに利用しているコード
「デザイン設定」→「スマートフォン」→「タイトル下」に書きます。
私のブログの例です。
/*タイトルのデザイン*/
</style>
<style type=”text/css”>
.entry-content h4{
color: #3f3f3f;
background: #f5f5f5;
padding: 7px 15px;
border-left: 5px solid #ff7f7f;
border-bottom: 0px solid #ff9999;
}
.entry-content h5{
color: #3f3f3f;
background: white;
padding: 5px 15px;
border-left: 0px solid #ff9999;
border-bottom: 1px solid #ff9999;
}
.entry-content h3{
color: #ffffff;
background: #ff9999;
padding: 7px 10px;
}
.entry-content a:link{
color:#111CC;
text-decoration:underline;
}
.entry-content a:hover{
color:#81F7F3;
text-decoration:underline;
}
.entry-content a:visited{
color:#819FF7;
text-decoration:underline;
}
</style>
タイトルデザインの変更
▼参考にさせていただいたブログ。ありがとうございます。
おしゃれデザインにする技が満載です。
メニューバーを設置した事で、過去の記事にもアクセスしてもらえています。おすすめします。
では、またお会いしましょう。
