Bloggerのテンプレートを「QooQ」に変更しました-たのしくすごすログ

このブログはBloggerを利用しています。

ブログ開設当時はまだレスポンシブデザインが一般的ではありませんでしたが、今の時代、スマートフォンでの閲覧を抜きには考えられません。

そこで、以下の条件を満たすテンプレートを探してみました。

いくつかの候補を見て回りましたが、今回は「QooQ」を使ってみようと思います。

「QooQ」のダウンロードは

から、QooQダウンロードのリンクを右クリック、対象を名前をつけて保存（QooQ.xml）します。

Bloggerの管理画面から左のメニューの「テーマ」を選びます。

右上の「バックアップ/復元」をクリックし、「ハードドライブ上のファイルからテーマをアップロードする。」の「ファイルを選択」をクリック、先ほどダウンロードした「QooQ.xml」を選び、「アップロード」をクリックします。

これで、「QooQ」のインストールは完了です。

Bloggerは、パソコン用とモバイルデバイス用のテンプレートを切り替えて表示するテンプレートが多いのですが、今回はレスポンシブデザインを採用していますので、切り替えを無効にしておく必要があります。

「モバイル」の下にある歯車をクリックし、「いいえ。モバイルデバイスでもパソコン用のテーマを表示する。」を選びます。

「保存」をクリックしたら、モバイルの表示がグレーになっているはずです。

これで、レスポンシブデザインでの表示が正しく行われるようになります。

QooQのデフォルトカラーは淡いパステルカラーに白抜きの文字です。

これでは文字が読みにくいので、色を濃くするか、文字色を濃くする必要があります。

今回は文字色は白のまま、ブランドカラーを濃くする方向でカスタマイズすることにしました。

デフォルトのブランドカラー

「カスタマイズ」を選び、Bloggerテーマデザイナーの「上級者向け」をクリックします。

「ブランドカラー」をクリックすると、現在のブランドカラーが表示されます。

ブランドカラー、ブランドサブカラーを変更します。下にプレビューが表示されているので、確認したら右上の「ブログに適用」をクリック。

変更後のブランドカラー

「Bloggerに戻る」をクリックして、テーマデザイナーを終了します。

最後にブログを表示して、思い通りの表示になっているか確認を忘れずに。

今後、これをベースに色々と手を入れていきたいと思います。

2020年1月23日　第1稿

Bloggerのテンプレートを「QooQ」に変更しました