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

2020/06/10

Blogger ホームページ作成

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"]

さらに「上下のみボーダー」のデザインをちょっといじらせていただき…

<style type='text/css'>.b-toc-container{border-top:solid #1d6677 1px;border-bottom:solid #1d6677 1px;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;font-weight:700;margin:0;padding:0;color:#000}.b-toc-container p .b-toc-show-wrap,.b-toc-container p a{display:none}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container&gt;ul{margin:15px 0 0}.b-toc-container.hide&gt;ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:&quot;&quot;}.b-toc-container ul li a{text-decoration:none;color:#006699!important;font-weight:700;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}</style>

ボーダーと目次のカラーを変更、[非表示]と出てくる部分を見えないようにしています。

やはり目次があるかないかも読者目線では大切な要素なので、Bloggerでさらに記事を読みやすくなります。

スケ郎さんに感謝を伝えつつリンクを張らせていただきました。

表示幅の変更

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

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

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

追記:この点はラムネグさんがQooQのバージョンアップによって解決されているのでv1.27以降は変更しないでも問題ないです。

関連記事の表示を変更

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

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

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

ふじやん。さんはQooQの高速化や1カラムへの変更など多くのカスタマイズをされているので、とても参考になります。感謝です。

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

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 .5em;
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;
border-left: solid 5px $(brand.color);/*左線*/
}

こんな具合にいじっていたのですが。h2見出しはデフォルトのままです。 

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

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

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

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

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

表を作成する

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

ただ、あまりにも横に長い表を作ったときにスマホで表示すると見切れてしまうことがあります。その場合にはHTML編集で表のコードの上のほうにある「table-layout: fixed」という部分を「table-layout: auto」に変えることで自動調整してくれます。

ただ、Bloggerの仕様なのだと思いますが一度表を張り付けた後でHTMLビューに行ってもう一度作成ビューに戻ると…

HTML コンテンツが無効です。作成モードに切り替えると、コンテンツの一部を失う可能性があります。

という警告が表示されるんですよね。しかもコードが異様に長くなるのでSEO的にはあまりよろしくないかなということで別の方法を考えます。

表を作る別の方法

少々難しめな方法ではあるのですが、HTML編集から直接書き込んで行くということもできます。恐らく完成した表は一番シンプルでHTMLも短いのでSEO的にも良さそうですが、なかなか面倒な作業です。

<table border="1" cellspacing="0"> 
<tbody><tr>
</tr><tr><th style="background-color: lightgrey; padding: 5px;"></th>
  <th style="background-color: lightgrey; padding: 5px;">Blogger</th>
  <th style="background-color: lightgrey; padding: 5px;">WordPress</th>
  </tr><tr>
<td style="padding: 5px;">月額料金</td>
<td style="padding: 5px;">0円</td>
<td style="padding: 5px;">約1,000円</td>
</tr>  
<tr>
<td style="padding: 5px;">SEO</td>
<td style="padding: 5px;">普通</td>
<td style="padding: 5px;">高くできる</td>
</tr>
</tbody></table>  

こんな具合でHTMLビューで打ち込んでいくと… 

Blogger WordPress
月額料金 0円 約1,000円
SEO 普通 高くできる

というようなシンプルな表ができます。<th>が表のトップで<tr>~</tr>で括っている<td>は横に並びます。これらを追加してゆくことで大きな表も作れます。

ただし、枠線が見えるようにするためにはテーマの「HTML編集」から、次の部分の変更を行っておく必要があります。

/****************************************
   初期化処理-*基本いじらない
*****************************************/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:1;outline:0;font-size:100%;vertical-align:baseline;background:transparent}…

基本いじらない設定ところ「border:」のところを0→1に変更しないと枠線が消えてしまいます。(これはryoさんの記事の設定をそのまま反映させているだけです)

記事中に囲いを作る

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;
}

 テーマのHTML編集「個別アイテム」下にコピペ。

こんな具合ですね。それでもって今度は記事のHTMLビュー画面で…

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

というふうに打つと…

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

これで出来てますよね?ちなみに囲いの参考にさせていただいたのは、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」でも、秀逸な無料テーマ「QooQ」のおかげで、メニューの表示、パンくずリストやタグの最適化、高速なページの表示によってSEO的にも良い具合に最適化できます。

さらに、今回紹介させていただいたCSSやHTMLのカスタマイズにより、目次やサイトマップなども加えてしっかりとしたブログを構築できます。

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

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

重要なのはコンテンツ

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

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

BloggerでのカスタマイズはHTML編集の勉強にもなるという点では良いなと思います。ただGoogleがよく言う「コンテンツ重視」という趣旨から逸れてしまうことが多いです。⇐(でもサイトが綺麗じゃないと書く気にならない私…)

これからも、まずは記事を充実させてゆくことが大切だということを思い出しつつ全体のカスタマイズも頑張ります。

まとめ

無料ブログ「Blogger」でも優れたテーマである「QooQ」やCSSのカスタマイズによってWordPressなどの有料ブログに迫るクオリティを実現することができます。

使わせていただいたテーマや、参考にさせていただいたCSSを作成して下さったみなさんに心から感謝いたします。

QooQ