「Blogger」のおすすめテーマ「QooQ」を綺麗にカスタマイズできるCSSまとめ

2020/06/10

Blogger ホームページ作成

t f B! P L

Googleがサービスを続けている無料ブログのBloggerを用いて、有料のWordPressに迫るブログを作るためにすべきことを順に説明してゆきます。このカスタマイズは一例であり、当サイトで導入させていただいた手法ですので参考にされてください。たくさんの先人の知恵をお借りしております。

おすすめテーマ「QooQ」の導入

はっきり言ってBloggerの初期テーマは正直使い物になりません。それで、日本であまり人気のないBloggerでも良い感じのテーマを作ってくれている方がおられますので、その方々の力をお借りします。もちろんHTMLやCSSに詳しく、プログラミングも苦ではない方なら話は別ですが…。

Bloggerでおすすめのテーマ「QooQ」

WordPressと比べると本当に選べるテーマが少ないのがBloggerの悲しいところですね。特に日本語対応のテーマはほんとうにわずか。その中でもおそらく一番人気があるのが「QooQ」(クーク)でしょう。ラムネグさんの作成です。

現在このブログでも導入しています。見栄えはシンプルで、かつ十分な機能が備わっています。SEO(検索エンジン最適化)にもかなり有効な設定になっていて表示も高速です。レスポンシブデザインにもなっているのでPCでもスマホでも綺麗な表示ができるのも特徴です。

「QooQ」導入方法

「QooQ」ダウンロードページから、通常版(記事が2列)か、list版(記事が1列のリスト)を選んでダウンロードします。

ダウンロードできたら、Bloggerのメニュー「テーマ」→右側の「・」が3つ並んでいるところ→「元に戻す」→【パソコン上のファイルからテーマをアップロードできます】と出るので「アップロード」→先ほどダウンロードした「QooQ」を選択。

以上の方法でBloggerに「QooQ」のテンプレートを導入できます。

CSSやHTML編集による細かな点の調整

WordPressでは、無料のテーマでもかなり細かく作り込まれていて、ほとんど手を加えなくても綺麗なサイトが完成しますが、Broggerではなかなかそうはいきません。「QooQ」という素晴らしい無料テーマですら、まだ手を加えないとちょっとな…と思うところが生じます。

それで、CSS(ウェブページのスタイルを変更するための言語)やHTMLを直接編集することでさらにカスタマイズしてゆきます。

▲注意点

HTMLやCSSを書き換える場合には必ずテーマとコンテンツのバックアップ取りましょう。

  • Bloggerメニュー⇒テーマ⇒バックアップ
  • Bloggerメニュー⇒設定⇒ブログの管理「コンテンツをバックアップ」

一応両方共のバックアップを取っておくと間違いありません。バックアップはたびたび取っておきたいので、CSSをいじる際や長い記事を書いた後などに必ずバックアップすることを習慣にすると良いです。

スケ郎さんのブログを参考にさせていただきました。HTMLを編集することで、目次を表示させるプラグインとして機能する素晴らしい仕組みとなっています。

私は見出しを増やしてしまいがちなので、表示させているのは「h2」見出しのみにしています。

target: ["h2", "h3", "h4"] ⇒ target: ["h2"]

この変更だけですね。その他のカスタマイズもスケ郎さんのページで解説してくれています。

やはり目次があるかないかも読者目線では大切な要素なので、Bloggerでさらに記事を読みやすくなります。スケ郎さんに感謝を伝えつつリンクを張らせていただきました。

表示幅の変更

【QooQ】トップ画面(記事一覧)の横幅を変更する方法【カスタマイズ】

C#とC++でテキストエディタを作る人さんの記事を参考にさせていただきました。ありがとうございます。

QooQはスマホやタブレットで表示していると気にならないのですが、PCでの画面表示が幅広すぎるかな?と感じてググったところ、こちらの記事で解説して下さっておりました。表示する幅の割合(%の部分)は任意で決められるので、好みに合わせて変更可能です。

関連記事の表示を変更

【QooQ】関連記事ウィジェットのデザインカスタマイズ

ふじやんさんのブログ記事からCSSコードを使わせていただいています。

かなり細かな調整というか、好みの部分かもしれませんが関連記事の表記を角ばったデザインに変えことができます。2種類デザインも用意して下さっています。

サムネイル画像を作成する

Bloggerではサムネイルを作成する必要はほぼなく、最初に挿入した画像が自動的にサムネイル画像として登録されます。

それでも異なる画像をサムネイルにしたかったり、本文上に画像を見せたくない場合に次の方法を取れます。

HTML編集から、トップの画像コードのラストに一文挿入するだけです。

‥‥width="320" ここに入れる /></a></div>‥‥
style="display: none"

 上記のコードを入れることで画像が消え、サムネイルとして使われることになります。

最終更新日を追加する

Blogger(QooQ)の初期設定では公開日のみが表示されます。とはいえやはり最終更新日も載せておくと、読者の方もどれほど新しい情報なのかがしっかり伝わるので、やはりHTMLを編集させていただきます。

HARUさんの記事から設定させていただきました。Font Awesomeの導入も行うことが必要でした。細かく解説してくださっているのでわかりやすいです。

サイトマップを作成する

WordPressではプラグインで容易くサイトマップを作成できますが、やはりBloggerは簡単には行きません。

Blogger ブログにHTMLサイトマップを設置する方法

ブロギングライフさんの記事を参考にさせていただきました。

日本語表記にするためにふじろじっくさんの記事のコードも使わせていただきました。テーマのHTML編集と、ページへのCSS貼り付けが必要となります。

見出しのデザインをちょっといじる

QooQのデフォルトの見出しは統一感もあって好きなのですが、上下の余白やらh3、h4見出しのデザインやらをいじりたくなり、編集させていただきました。(Bloggerでは、h2見出し=見出し、h3見出し=小見出し、h4見出し=準見出し、という表記です)

#single-content というところを探して(Ctrl+F)コードを書き換えてゆきます。

 h3とh4見出しのコード

}
#single-content h3{
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 1em;
margin-top: 1.8em;
padding: .5em 0;
line-height: 1.2;
border-bottom: double 5px $(brand.color);/*線の種類(二重線)*/
}
#single-content h4{
font-size: 1.8rem;
font-weight: bold;
padding: .3em 1em;
margin-bottom: 1em;
margin-top: 1.5em;
background: transparent;/*背景透明に*/
border-left: solid 5px $(brand.color);/*左線*/
}

こんな具合にいじって今の見出しとなっております。h2はデフォルトのままですね。 

なぜか消えてしまう表の枠線を表示させる

QooQでの問題点の一つに、表を入れた時になぜか枠線が表示されずに見ずらいということがあります。この解決方法も簡潔にまとめてくださっています。

【QooQ】Blogger無料テンプレートの表の作成方法

ryoさんの記事からとても簡単に枠線を復活させることができました。ありがとうございます。枠線の太さは「1」以外に選べないとのことなのでその辺りはとりあえず諦めようと思います。

追記:この部分は2020年7月に入って「QooQ」をアップデートして下さったようなので最新のバージョンの「QooQ」を導入してあれば問題なさそうです、ラムネグさん、ありがとうございます。

※2020年7月頃にBloggerのアップデートで枠線の作成はできなくなったりしています。また、「CSSを追加」が消えたり、再度戻ってきたりといろいろ変更しているようなので、ちょっと見守る必要がありそうです。

表を作成する

Bloggerのアップデートで表作成ができたりできなくなったりするのでどうしたものかと思っていたのですが、Googleの「スプレッドシート」を用いて表を作成して、それをそのまま本文にコピペすることで普通に作れることがわかりました。

料金使い勝手SEO
Blogger基本0円まあまあ良い普通
WordPress月約500円~簡単高くできる

こんな具合ですね。ただ、あまりにも横に長い表を作ったときにスマホで表示すると見切れてしまうことがあります。その場合には…

HTML編集で表のコードの上のほうにある「table-layout: fixed」という部分を「table-layout: auto」に変えることで自動調整してくれます。

記事中に囲いを作る

CSSを追加する際「Bloggerテーマデザイナー」の「上級者向け」の中に「CSSを追加」というのがありました(アップデートで消えたりする)

そもそもCSSとして書き込んだHTMLはどこに行くのか探してみるとQooQではテーマのHTML編集で「個別アイテム」というところにあるのがわかりました。

ということでしっかりCSS追加が可能なのかどうか、囲いをつくってみるCSSコードをHTML編集の「個別アイテム」のすぐ下に追加してみます。

/* 囲い */
.kakoi {
padding : 1em;
border : solid 3px #6495ed;
border-radius : 3px;
box-shadow : 2px 2px 2px 0 #bbbbbb;
}

こんな具合ですね。それでもって…

<div class="kakoi">
「個別アイテム」のすぐ下に追加
</div>

というふうに今度は記事のHTML編集画面で打つと…

「個別アイテム」のすぐ下に追加

これで出来てますよね?ちなみに囲いの参考にさせていただいたのは、BloggerMasterさんの「bloggerカスタマイズ!記事中に目立つ囲いをつくる!」です。ありがとうございます。ほかにも詳しく載せてくださっているのでぜひ参考にされてください。

さらに細かく設定されたい場合はCMAN「いろいろな枠線「border」のCSS生成」などを参考にされると良いと思います。勉強になります…。

ちなみに囲いの色の変更のために#の後を入れ替えました。青系からグレー系へ。

border : solid 3px #6495ed⇒#666666

そしておしゃれな影も消してしまいました(私のブログには洒落すぎていて‥すみません)

box-shadow : 2px 2px 2px 0 #bbbbbb;⇒丸ごと削除

CSSを追加せずに囲いを作る方法

上記の方法以外の仕方でも囲いを作成することはできます。例えば上のシンプルな囲いと全く同じものを作るなら、ブログ作成中のHTML編集にて次のコードを書いてみると同じ事になります。

<div style="padding: 1em; border: solid 3px #666666; border-radius: 3px;">ここに文章</div>

 シンプルな囲いであればわざわざテーマにCSSを追加するよりも直接ブログのHTML編集でコードを打ってしまったほうが良いかもしれません。

WordPressの有料ブログと比較してみる

ここまでのカスタマイズを施してゆくと無料のBloggerでも、SEOに関してはかなりいい具合に最適化できます。秀逸な無料テーマ「QooQ」のおかげで、メニューの表示、パンくずリストやタグの最適化、高速なページの表示を可能にしてくれています。

さらにCSSやHTMLの編集により、目次やサイトマップなども加えてしっかりとしたブログを構築できます。

確かにWordPressで有料のテーマなどは、それらを当然のように備え、かつスムーズに編集ができるように調整されています。

さすがにそのような次元まで追いつこうとするのは相当大変です。しかし、本来ブログの目的である有益な情報を正確にわかりやすく伝えるという面においては、カスタマイズを施したBloggerでも十分に満たしていると考えて良いでしょう。

重要なのはコンテンツ

ここからは個人的な感想となるのですが、ブログを書いていてなぜかサイトの外観に凝ってしまい内容をしっかり書き込めないということがあります。

Bloggerについても、さまざまなカスタマイズはHTML編集の勉強にもなるという点では良いなと思う部分もありましたが、Google先生がよく言うような「コンテンツ重視」という趣旨から逸れてしまうことが多いです。⇐(でもサイトがきれいじゃないと書く気にならないですよね?)

WordPressでサイトを運営している時も外観が気になっていろいろといじって1日終了したことも多いです。正直いろいろ装飾を施すほどサイトが重くなってSEO的にも良くないのにやっちゃうんですよね。

最低限のカスタマイズで良い

ということで、まとめとしましてはCSSなどカスタマイズしてみて無料ブログ「Blogger」でWordPressに迫ろうということすが、とりあえずは記事を充実させてゆくことが大切だということに結局落ち着きます。装飾を施しても読んでもらえない(Googleに評価されていない)記事ではあまり意味がないので。

それでもサイトはきれいな見栄えであってほしい…使わせていただいたテーマやCSSを作成して下さったみなさんに心から感謝いたします。

QooQ