BloggerのQooQカスタマイズメモ。設定の仕方、ナビ・ヘッダーの色変更、タイトル中央揃え

2020/10/01

ブログ運営のうだうだ話

今回はてなからBloggerに引っ越すにあたって、テンプレートをいろいろ試したり弄ったりしたので忘備録的にメモしておこうと思います。
★僕はBlogger初心者です。以下を参考にしたい人は最初にバックアップとるとか自己防衛してね。

さて、最初は公式の「シンプル」を弄ってみたんだけど、レスポンシブデザインじゃないから携帯で見たときにイマイチすぎました。で、いろいろ調べた結果、「QooQ」という日本語対応のテンプレートが素晴らしいそうなので使わせてもらうことに決定!

QooQはここからダウンロードできるよ↓

https://blog.dododori.com/create/program/blogger-qooq/


インストールの仕方。

1ダウンロードしたファイルを「メモ帳」とかで開いて全文コピーします。

2Bloggerの編集メニューの「テーマ」を開き、「カスタマイズ」というボタンの横っちょの下向き三角▼を押して「HTMLを編集」をクリック。

3HTMLコードがいっぱい出てくるのを、全部消す。

4、1でコピーしたやつを貼り付けます。右上にあるフロッピーディスクみたいなアイコン(保存アイコン)をクリックして保存すると

5、わーいできた!


次。モバイルの設定をします。僕これ最初にやるの忘れててなんか変だった。

1さっきの2のところの下向き三角▼をおして「モバイルの設定」を選ぶ。

2「デスクトップ」を選ぶ。保存。

3 わーいできた!


次にテーマカラー(デフォルトではミント色とオレンジ)を変更します。なんか「テーマデザイナー」とかいうページから変更できる?らしいけどそのページがどこなんだかよくわからないのでHTMLの方を弄ります。

1、「インストールの仕方」で使った「HTMLを編集」を開く。

42行目くらいから、ブランドカラーの設定があるのでここを変えます。

  <Variable name="brand.color" description="ブランドカラー" type="color"

   default="#fff" value="#ffffff"/>

この#の後を、好きな色のコードにすればいいだけ。

僕の場合はffffff(白)、サブブランドカラーを000(黒)にしました。


これだけでかなり格好良くなりました。もう一つ、タイトルが左揃えになってしまうのを、中央揃えに直します。

1、「インストールの仕方」で使った「HTMLを編集」を開く。

160行目くらいから、ヘッダーの設定があるのでここを変えます。

#header-text{
font-size: 80%;
font-weight: bold;
        (ここ★)
}

(ここ★)と書いたところに、
text-align: center;
と書き込めばおしまいです。保存してできあがり。









QooQ