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

無料ブロガーテーマ「QooQ」を導入した際にまずやりたいカスタマイズをまとめました。初心者向けの記事で簡単な内容になっています。「QooQ」は少し手を加えるだけで劇的におしゃれになるので、ぜひ挑戦してみてください。

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

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

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

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

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

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

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

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

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

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

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

「モバイルの設定」をクリックし、「デスクトップ」にチェックを入れます。モバイルの時にデスクトップの表示をしても大丈夫なのか？と思うでしょうが、これは、モバイルの時もQooQテーマを表示させるということを意味しています。QooQはレスポンシブ対応なので大丈夫なのです。

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

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

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

編集画面での検索の仕方

編集画面で編集個所を探す際に検索をする必要が出てきます。検索窓は、「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>
  <!-- 戻るボタンここまで-->
  </body>
</html>

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);
}
/*戻るボタンここまで*/
   ]]></b:skin>

ここまでで一度保存をして画面を確認してみてください。シンプルな円形のボタンが画面の右下に追加されたと思います。もちろんレスポンシブ対応なので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>
<!-- 戻るボタンここまで -->
 </head>

ボタンの見た目を変えてみる

以下にいくつか他のボタンを紹介しておきます。お好みのものをHTML、CSSを追加する箇所にコピペして使ってください。張り付ける場所を間違えないようにしてください。

See the Pen go Top 1 by taichi (@taichi_na) on CodePen.

ブランドカラーを背景にしたものです。#page-top の background の値をご自身のブログのブランドカラーに変更して使用してください。

See the Pen go Top2 by taichi (@taichi_na) on CodePen.

こちらは矢印がふわふわ動いているタイプです。色や動きをアレンジして使ってみてください。

See the Pen gotop3 by taichi (@taichi_na) on CodePen.

矢印が二つになっているタイプです。これもかっこいいいですね。HTMLにも変更があるので注意してください。

See the Pen goTop4 by taichi (@taichi_na) on CodePen.

TOPの文字が入っているタイプです。

See the Pen goTop5 by taichi (@taichi_na) on CodePen.

TOPの文字で周囲が四角のタイプです。

まとめ：QooQはとても使いやすいテーマ

ということで今回は、テーマの導入から色の変更、記事のサムネイルの四角化、トップに戻るボタンの設置を行いました。この3つだけでも大きくサイトの印象は変わったと思います。

私も Blogger の詳しい構成はよくわからないのですが、 WordPress に比べて直感的にカスタマイズができるので、私のような初心者には良い勉強になっています。

次回は目次を自動生成してくれる機能を、ほかのサイト様を参考に組み込んでみましょう。そしてさらに細かい見た目の調整もしていきます。

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