【Bloggerテンプレート】QooQのメインカラーとサブカラーをカスタマイズしてみよう

2026年8月30日日曜日

カスタマイズ テンプレート

t f B! P L
私はくうく堂さんのQooQというテンプレートを使用しています。 
QooQはくうく堂さんが作ってくださっているBloggerの日本語用のテンプレートです。リンクはこちらになります。
シンプルで日本語が美しく表示され、とても見やすいテンプレートです。カスタマイズもしやすいようになっており、初心者にもおすすめです。

メインカラーとサブカラーを変えてみよう

今回はQooQのメインカラーとサブカラーのカスタマイズのやり方を、自分自身の備忘録も兼ねて説明していきます。

初期の状態はこの色です。

私はこの色から薄い紫色と濃い紫色に変更しました。

では、みなさんもご自分の好きな色へ変えていきましょう!

カラーピッカーを使って好きな色を探そう

Googleで「カラーピッカー」と検索をします。そうすると、検索結果の上部にポインターで好きな色を押すとその数値を教えてくれる機能が出てきます。

まずはここで色々な色を実際に見て好きな色を探してみましょう。
HEXと書いてある数値がブログの色を変える数値になります。どれにするかが決まったら、その数値を覚えておきましょう。HEXの数値の横にある ▢ を押すとコピーできます。

バックアップを取ろう

次にバックアップを取ります。

テーマのタブのカスタマイズの▼のところを押すとバックアップが表示されます。ここで今のテンプレートをバックアップしておきましょう。ダウンロードフォルダにダウンロードされます(環境によって違いがあるかもしれません)。
バックアップをとることは面倒くさいと感じるかもしれませんが、上手く変更できなかった時や間違えてしまった時も前の状態に戻せるようにするために大切なので必ず行いましょう。

HTMLを編集を開こう

ではHTMLを編集していきましょう。
テーマのタブのカスタマイズの▼を押して、HTMLを編集を押します。

そしてHTMLを開くとこのように見えると思います。

これを見つけたら、少し下にスクロールをしていきます。
そうすると、ブランドカラーとブランドサブカラーの項目が見えてきます。赤くマークしたところに、カラーピッカーで調べた好きな色の数値を入れます。「””(ダブルクォーテーション)」の間に数値を入れましょう。
「default」のところはそのままでかまいません。「value」のところだけ入力をすれば大丈夫です。

数値を変えられたら保存をしましょう。

カスタマイズを楽しもう

これでQooQのメインカラーとサブカラーを自分の好きな色に変更できました。
自分の好きな色がブログで使えると、自分らしさが出せますね!
また、自分のブログを見る時も好きな色は心地よく感じると思います。
私もHTMLの編集を楽しんでいきたいです。

自己紹介

日常のなにげないことを書きたいなと思っています。

このブログを検索

最新記事

【ドドール】しっとりカリカリのフレンチトースト・ハニーメープルを食べてきました

ドドールが大好きでよく行っています。見かけると色んなところでドトールに入ってしまいます。 今回たまたま入ったドトールでフレンチトーストを見かけたので食べてきました。とても美味しくて食べごたえがありました。 カリッとしているが中はしっとり 焼け具合と卵液の浸り具合のバランスがとても...

QooQ