【QooQの初期設定】Bloggerテーマの入れ方と基本カスタマイズ

2021年10月2日2024年2月8日

無料ブロガーテーマ「QooQ」を導入した際にまずやりたいカスタマイズをまとめました。

テーマの導入
各色の変更
記事サムネイルの四角化
トップに戻るボタンの設置
サイトマップの設置
目次の自動生成

初心者向けの記事で簡単な内容になっています。「QooQ」は少し手を加えるだけで劇的に見やすくなるので、ぜひ挑戦してみてください。

※現在のこのブログはワードプレスで運営しています。「SWELL」というテーマを使用しています。非常に使いやすいテーマです。

ブロガーからワードプレスへの移行は以下を参考にしてください。

キタテン

独自（カスタム）ドメインBloggerからWordPressへの移行について | キタテンカスタムドメイン（独自ドメイン）で運用しているBloggerブログを、ワードプレスに移行しました。今後、同様の移行をお考えの方へ、かいつまんで手順と気を付けることを記…

コンテンツ

ダウンロードしてブログに導入する

くうく堂のサイトからダウンロードをする

導入はとても簡単に行えます。まずはブラウザを開いて「QooQ ダウンロード」で検索をします。すると「くうく堂」というページが表示されますのでクリックします。すぐにダウンロードできるページが表示されると思います。

レイアウトには2パターンあります。好みのものを選択してダウンロードしてください。ダウンロードができたらそのファイル（QooQ_list.xml）ブロガーにアップロードします。手順は以下になります。

ブロガーにアップロードする

では実際にブロガーにアップロードしてみましょう。上の画像のように「テーマ」→「（カスタマイズ横）下矢印」をクリックします。

「元に戻す」をクリックします。

ウインドウがポップアップされるので、「アップロード」クリックします。ファイルを選ぶ画面になるので先ほど「くうく堂」さんからダウンロードしたものを選択し「開く」をクリックしましょう。

これでテーマのアップロードは終了です。無事に中身の変更ができたら、一度表示させて確認してみましょう。デフォルトの状態でもよいのですが、より見る人にとって使いやすいページにするために、これから簡単なカスタマイズを一緒にしていきましょう！

Blogger側の設定を変える（大事！）

アップロードはできましたが、このままではスマホ表示の際に元のテーマで表示されてしまいます。それを防ぐために、モバイルの設定をします。以下の画像の個所をクリックします。

テーマ → モバイルの設定

「デスクトップ」にチェックを入れます。

モバイルの時にデスクトップの表示をしても大丈夫なのか？と思うでしょうが、これは、モバイルの時もQooQテーマを表示させるということを意味しています。

QooQはレスポンシブ対応なので大丈夫なんです。

カスタマイズをする際に気を付けること

変更作業の前にはバックアップを取っておく

これからいろいろカスタマイズをしていくのですが、作業の前には必ずバックアップを取っておきましょう。左のリストの「テーマ」を選択→「下矢印」を選択→「バックアップ」を選択。これで現在の状態が保存されたファイルをダウンロードすることができます。

編集画面での検索の仕方

HTML編集画面で編集個所を探す際に検索をする必要が出てきます。検索窓は、「Ctrl + F」で表示させることができます。HTMLが書かれているところを適当にクリックしてからコマンドを入力してください。

コピペのショートカットキー

様々なサイトからコードをコピーしてペーストをすると思います。その際に便利なショートカットキーをご紹介しておきます。コピーは「Ctrl + C」ペーストは「Ctrl + V」です。毎回マウスの右クリックで行うよりも圧倒的に時短になるので使うクセを付けてしまいましょう。

リンク

ブランドカラーの変更とサムネイルの四角化

ブランドカラーを変更する

まずはブランドカラーを変更してみましょう。

「テーマ」→「（カスタマイズ横）下矢印」→「HTMLを編集」の順でクリックしていき、HTML編集画面を開きます。44行目あたりから色を編集できる部分があるのでそこを変更していきましょう。以下のコードの部分です。

<Group description="ブランドカラー">
  <Variable name="brand.color" description="ブランドカラー" type="color"
   default="#334756" value="#334756"/>
  <Variable name="brand.font" description="ブランドカラー部分の文字色" type="color"
   default="#ffffff" value="#ffffff"/>
  <Variable name="brand.subcolor" description="ブランドサブカラー" type="color"
   default="#c4bda5" value="#c4bda5"/>
  <Variable name="brand.subfont" description="ブランドサブカラー部分の文字色" type="color"
   default="#ffffff" value="#ffffff"/>
</Group>

HTMLでは色を表す際に#から始まる6桁（省略された3桁の場合も）の英数字を使います。Webカラーと呼ばれるもので、白は#ffffff、黒は#000000、こんな感じで表現します。

色に関するサイトがたくさんあるので、お好みの色を探してみてください。ブランドカラーを変更するには上のコードの黄色で示した部分を変更します。

試しに適当な色に変更して保存をしてみてください。タイトルや見出しの背景色が変わっていると思います。それに合わせてブランドサブカラーや文字色も変更してみましょう。HTML初心者の人でも簡単にいじって変化を楽しめると思います。

余談です…色に関してはテーマデザイナー対応となっているのですが、ブランドカラーの変更ができない状態になんですよね。文字色の変更はテーマデザイナーで可能なのですが、なぜかブランドカラーだけ変更できないのです。（※テーマデザイナーとはHTMLに直接変更を加えることなくレイアウトや色を変更できるBloggerの機能の一つです。）

サムネイルを四角にしてみる

.list-item-img{
    display: block;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

検索窓で「.list-item-img」と検索して上の黄色の部分の値を変更（50%→0%）すれば、各記事のサムネイルが四角になります。試してみてください。

この border-radius: というプロパティは要素の角の部分を丸くするものです。要素を正方形にしてこの値を50%に指定すると正円となります。

そして、各投稿ページの下部に出てくる関連記事のサムネイルも同様に四角に変更してみましょう。

.mrp-post-img{
    display: block;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    object-fit: cover;
    margin: 0 auto 0 auto;
}

今度は検索窓を出して「.mrp-post-img」と入力をし Enter を押します。上のコードの黄色の部分をまた変更（50%→0%）して保存をしてください。関連記事のサムネイルも四角になり統一感が出たと思います。

リンク

トップに戻るボタンを設置する

今度はクリックをするとトップに戻ってくれるボタンを設置してみましょう。

このボタンの有無でユーザーの使い勝手は大きく変わります。ぜひ加えたい機能の一つですね。では3か所にコードを追加していきます。

HTMLを追加する

では実際にボタンを設置して動くようにしてみましょう。再度HTML編集画面を開きます。コードの一番下まで移動すると </body> というタグがあるので、そのすぐ上に以下の3行を追加します。

<!-- 戻るボタン-->
   <a href='#wrap' id='page-top'><div class='page-top__arrow'/></a>
<!-- 戻るボタンここまで-->

<!– 戻るボタン–> と <!– 戻るボタンここまで–> はコメントで実際のコードは真ん中の一行のみです。今後機能を追加していくときは、このようにコメントを追加してわかりやすくしておきましょう。

CSSを追加する

次はCSSを追加します。検索窓を開き「]]></b:skin>」と入力し Enter を押して移動します。

]]></b:skin> の直前に以下のコードをコピペしてください。先ほどと同様にしっかりコメントを残しておきましょう。

/*戻るボタン*/
#page-top {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border: 1px solid rgb(49, 49, 49);
    border-radius: 50%;
}
.page-top__arrow {
    width: 35%;
    height: 35%;
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 2px solid rgb(49, 49, 49);
    border-right: 2px solid rgb(49, 49, 49);
    transform: translate(-50%, -33%) rotate(-45deg);
}
/*戻るボタンここまで*/

ここまでで一度保存をして画面を確認してみてください。シンプルな円形のボタンが画面の右下に追加されたと思います。

もちろんレスポンシブ対応なのでPCモニターでもスマホ画面でも表示されます。今の段階ではクリックをしても動作しないので、さらにコードを追加して動くようにしていきましょう。

Java Script を追加する

ではボタンを押したときの動きを追加します。検索窓を開き </head> と入力し Enter を押してその場所まで移動します。

そして </head> の直前に以下のコードをコピペしてください。これでボタンを押したときにページの先頭まで戻るようになったと思います。

<!-- 戻るボタン -->
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
 <script>

$(function() {
    var topBtn = $(&#39;#page-top&#39;);
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() &gt; 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $(&#39;body,html&#39;).animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>
<!-- 戻るボタンここまで -->