SEOとUIに効果的なカスタマイズ【QooQの初期設定その2】

2021/10/03

PC全般

t f B! P L

ブロガーテンプレート「QooQ」を導入してまずしたいカスタマイズその2です。

今回はユーザー視点、SEO的に効果がある項目です。

ここまで終わったらあとはひたすら記事を書くだけですね。


トップへ戻るボタンの設置

トップへ戻るボタンの有無はGUIの一つとしてとても重要ですね。

特にスマホ閲覧時はトップまで瞬時に戻れると、目次を再読できますし、離脱率を下げることもできます

ということで、そのトップへ戻るボタンをBloggerへ追加しましょう。

以下のサイト様を参考にしています。とても分かりやすいです。

ブログ内に「TOPに戻る」ボタンを設置する方法


設置まではサイト様を参考にしていただくとして、ここではサイズの変更、文字の変更などをしてみることにします。

  • #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] 目次を簡単に自動生成(忙しい人向けのコピペ素材)


コードを貼る位置はHTML編集画面上の適当なところを一度クリックして、Ctrlキー+Fキーで検索窓を表示させ、</head>と検索し、表示されたすぐ上ですね。



今まであまりH2,H3タグの使用を意識していなかった場合、手直しが必要です。

目次は最初のH2タグの上に生成されるので、構成を作りなおさなければいけないケースもあるでしょう。

ですがこれを機に、きれいな見出しの構成に変更することをお勧めします(私がまさにこれでした…全部直してやったゾ!)

まとめ:これでかなり充実しました!


今回は他サイト様全面依存のもと、各機能を自サイトに追加できましたね。

これでWordPressにも負けないBloggerサイトになったはずです。

今回行った変更は、Bloggerのアップデートなどで今後動かなくなる可能性も無くはないので、どこをいじったのかを忘れないように、最初にバックアップを取っておく、もしくはCSS・HTML内にメモを残しておく(/*,<!--)などの方法で記録を残しておきましょう。

よし、あとはひたすら記事を書いていくのみですね!

お互いに頑張りましょう!

QooQ

TOP