ブロガーテンプレート「QooQ」を導入してまずしたいカスタマイズその２です。
今回はユーザー視点、SEO的に効果がある項目です。
ここまで終わったらあとはひたすら記事を書くだけですね。
トップへ戻るボタンの設置
トップへ戻るボタンの有無はGUIの一つとしてとても重要ですね。
特にスマホ閲覧時はトップまで瞬時に戻れると、目次を再読できますし、離脱率を下げることもできます。
ということで、そのトップへ戻るボタンをBloggerへ追加しましょう。
以下のサイト様を参考にしています。とても分かりやすいです。
設置まではサイト様を参考にしていただくとして、ここではサイズの変更、文字の変更などをしてみることにします。
- #page-top {
- position: fixed;
- bottom: 20px;
- right: 20px;
- font-size: 100%;
- }
-
- #page-top a {
- background: #c4bda5;
- text-decoration: none;
- color: #fff;
- width: 80px;
- padding: 20px 0;
- text-align: center;
- display: block;
- border-radius: 5px;
- }
-
- #page-top a:hover {
- text-decoration: none;
- background: #c4bda5;
- }
- ]]></b:skin>
↑ここに表示したCSSコードが、見た目をきめています。
黄色で示した部分がボタンの大きさを決めています。
この数字を調整しお好みの大きさにしましょう。
そのままだと少し大きいので、私は少し小さくしています。
width: 80px; こちらは幅を
padding: 20px 0; こちらは左右のスペースを
それぞれ指定するCSSですね。
ボタン内の言葉は最下部に設置したコード内の文字を変更すれば反映されます。
- <p id='page-top'><a href='#wrap'>TOP</a></p>
- <!-- ページトップへ戻るボタン-->
- </html>
黄色で示した部分を、「トップへ」「上に戻る」などお好きな言葉に変えましょう。
短くて意味が伝わる言葉がベストでしょう。
あくまでもユーザー様目線でお願いします。
サイトマップの設置
サイトマップの設置はSEO対策やアフィリエイトを導入するために必須と言われておりますし、ユーザーのためにも、自分のためにも目で見てわかりやすいのでぜひ作っておきたいところです。
ここで作るのは、グーグルロボットさんのためのもの（xml）ではなく、実際にサイトに表示させるhtmlのものです。
こちらもサイト様に感謝ということで以下を参考に導入しましょう。
記事数の多いBlogger ブログに適したラベルでまとめるHTMLサイトマップの作成方法
これはほんと助かりました。素晴らしい！
紹介されているのは、以前のバージョンのBlogger管理画面で少しわかりづらいかもしれませんので、補足で説明します。
※基本的に上記のサイトに従って作業を進めてください。
簡単に言うと以下のような流れになります。
・「投稿」ではなく「ページ」で上部の「+新しいページ」をクリックします。
・ページのタイトルは「サイトマップ」とでもしておきましょう。
・HTML編集モードにしてコードをコピペし
という流れです。
そしてせっかくサイトマップを作ったのだからナビゲーションバーに追加してみましょう。
「レイアウト」をクリックし、「ナビゲーション」の左下にあるちっこい編集ボタンをクリックします。
「新しいアイテムを追加」をクリックします
最上段の「ページ名」をクリックすると、作ったページの一覧が表示されるので、今作った「サイトマップ」をクリックし保存を押すと追加されます。
全ての作業が終わったら、ナビゲーションバーで確認てみましょう。
ナビゲーションに「サイトマップ」が追加されており、クリックするとサイトマップが生成され表示されました！
目次の自動生成
こちらも先輩のサイト様を参考に行いましょう。
ネットの世界には偉大な先人が多くいて、本当にありがたい！
感謝を忘れずに使わせていただきましょう。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）
0 件のコメント:
コメントを投稿