Blogger:二つ目のブログでQooQを使ってみる

2020/03/07

Blogger QooQ

t f B! P L

Bloggerの日本語テーマ(テンプレート)であるQooQ(クーク)を使って見たくて、新しいブログを開設しました。

新しいブログの作成

これはとても簡単です。
管理画面の左上に、たとえば「ヨジローの雑記帳」と現在のブログ名が表示されています。これをクリックして、一番下の「新しいブログ……」をクリックします。


新しいブログの作成画面が現れます。


タイトルとアドレスを入力し、テーマを選択します。
僕は次のようにしました。

タイトル:ドイツ語文法
アドレス:german-grammar1.blogspot.com
テーマ:シンプル

german-grammerにしたのは、英語で中身がわかるようにしておくとSEO的にいいかと思ったからですが、効果のほどは不明です。

「ブログを作成」をクリックすれば、作成したブログの管理画面となります。
う~む、すごいです。あっという間です。こんなふうにして100個もブログが作れるなんて。でも、100個作った人なんているんでしょうか。

QooQのテーマ(テンプレート)を適用する

ラムネグさんのサイトに行きます。

QooQとQooQ listがありますが、あまり画像は使わないだろうと考えて、QooQ listの方を選びました。

ダウンロードして、どこかに「QooQ_list.xml」ファイルを保存しておきます。
テーマを適用するのは、管理画面から「テーマ」を選び、右上の「縦の三点」をクリックします。すると、


という表示が右上に出ますので、「元に戻す」をクリックします。
「元に戻す」というのは、一度バックアップしたテーマを再び適用することが前提になっているのでそういう表現になっているのでしょう。でも、「別のテーマを適用する」とか、もっとわかりやすい表現にしてほしいですね。

これでQooQのテーマが適用されます。

QooQをカスタマイズする

参考サイト

QooQリリースノートと初期設定方法に従って、初期設定を行います。
いらないガジェットを削除したり、色を好みのものに変えたりします。

ラムネグさんの「blogger初心者講座」やわちゃ子さんの「Bloggerテンプレート「QooQ」のカスタマイズ方法と参考にしたサイト一覧」も役に立ちます。わちゃ子さんのブログが美しいです。かなり影響を受けました。

スマホ表示用のデザインをオフにする

Bloggerは最初からパソコン表示とスマホ表示を分ける設定になっているようです。QooQはレスポンシブデザイン対応なのでスマホ表示用のデザインを使わないようにします。

管理画面 > テーマ > 右上の「縦の三点」 > モバイルの設定

とクリックすると、


こんなのが出ますので、「デスクトップ」をクリックして「保存」を押します。

ヘッダーのフォントサイズを大きくする

ヘッダー(「ドイツ語文法」)のフォントサイズが小さいような気がしました。

管理画面 > テーマ > 右上の「縦の三点」 > HTMLを編集

をクリック。

/****************************************
ヘッダー
*****************************************/ 

とあるところの、

#header-title{
 font-size: 110%;
 font-weight: bold;

のfont-sizeを、210%にしました。

個別記事のタイトルのフォントサイズを大きくする

個別記事のタイトルとは、「主語になる人称代名詞」です。
上と同じようにして、

/****************************************
個別記事
*****************************************/

とあるところの、

#single-header-title{
 font-size: 2.3rem;
 font-weight: bold;
}

のfont-sizeを、3.0remにしました。

結果

こんなブログになりました。

ホームでは画像が必要になるので、アイキャッチ画像というのを、サルワカくんのページを参考に冒頭に入れてみました。

なんか、あっという間に本格的なサイトになった感じです。
QooQ、とってもいいですよ。ラムネグさん、ありがとうございます。

でも、でも、いくつものブログを書き続けていくのはきっと大変なんでしょうねえ。


QooQ. Powered by Blogger.