【当サイトではアフィリエイト広告等を利用しています】

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

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の導入も行うことが必要でした。細かく解説してくださっているのでわかりやすいです。

Font Awesomeを使わない方法

Font Awesomeを使うといろいろなアイコンを使えるようになるので便利なのですが、外部から素材を読み込みのために速度低下が起きます。

これを防ぐために、わたしはアイコン自体を使わずに(更新)と表記を変えてFont Awesomeは入れていません。

else{ var updated_dd ="(更新)"+ dd_Y+"/"+dd_M+"/"+dd_D+"";document.getElementById("last-modified").innerHTML = updated_dd;}//]]>

最後の方の記載を上記のように変更して、<!--更新マーク-->の部分は削除しています。

ちなみにFont Awesomeを外部から読み込まずに直接書いてしまう、インラインSVG化ということも可能のようです。

私としてはそこまでしてアイコンはいらないかな…と今は手をつけていませんm(_ _)m。

サイトマップを作成する

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);/*左線*/
}

こんな具合にいじっていたのですが現在はさらに変更しました。

h3の二重線の部分をh4の左線に入れ替え、h4見出しは左線から細い下線「border-bottom: 1px solid #c0c0c0;」としました。h2見出しはデフォルトのままです。

「p」タグ【段落】をうまく使う

Bloggerに追加された段落モード

「QooQ」ではVer1.28にて「pタグマージン」の追加がなされているため、最新のQooQを使ってれば「段落」を用いて改行すると自動的に行間が空くようになっています。

最新QooQでは /* 個別記事本文 */ の部分に

#single-content p{margin-top: 1.8em;margin-bottom: 1.8em;}

が付け加えられています。

1.8emだと結構広く行間が空くため、私は1emと書き換えています。(1emとは1文字分の間隔になります)

表を作成する

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に変更しないと枠線が消えてしまいます。

【QooQ】Blogger無料テンプレートの表の作成方法このryoさんの記事を参考に枠線を復活させることができました。ありがとうございます。

枠線の太さは「1」以外に選べないとのことなのでその辺りはとりあえず諦めようと思います。

記事中に囲いを作る

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編集でコードを打ってしまったほうが良いかもしれません。

トップページを固定ページにしてサイト感を出す

QooQテンプレートの特徴として、トップページに新規記事が追加されていくブログ感のあるデザインがなされています。

そのトップページを固定ページとすることで、サイト感を出すことができます。

ちなみに方法はヨジローさんの「ヨジローの雑記帳」Blogger:固定ページでトップページを作るを参考にさせていただきました。ありがとうございます。

方法としては、新規のページを作り、タイトルを「index」とします。設定に移ってカスタムリダイレクトでそのページをリダイレクト先に設定します。

その後ページのタイトルを変更してもOKで、投稿一覧については「レイアウト」からナビゲーションを編集して投稿一覧のリンクを追加します。

詳しくはヨジローさんの記事を参照されてください。

「かんたんリンク」のデザイン変更

Amazonや楽天市場の商品を紹介しやすいもしもアフィリエイトの「かんたんリンク」はBloggerでも使いやすいです。

特に、2021年2月には「かんたんリンク」がリニューアルされてボタン色の変更や、自由ボタンを追加することもできるようになりました。

おしゃれになったかんたんリンク
かんたんリンクの新デザイン

ただし、かんたんリンクもリンク色がおかしくなる(私の場合はほかのリンク色と同じブルーになってしまう)パターンが多いので、CSSで変更しています。

CSSを張り付ける場所

「メニュー」⇒「テーマ」⇒「点が3つのところ」⇒「HTML編集」

ここで「Ctrl」+「F」キーにて「個別アイテム」と打って出てくる2つ目すぐ下に記載すればCSS追加と同じ意味になります。

商品名とAmazon、Rakuten、Yahoo!ショッピングの文字色のみ変更するため以下のCSSのみ追加しています。

/* ------------------------------------- 
  かんたんリンク カスタマイズ   
------------------------------------- */
p.easyLink-info-name a {color: #555555 !important;}
a.easyLink-info-btn-amazon {color: #fff !important;}
a.easyLink-info-btn-rakuten {color: #fff !important;}
a.easyLink-info-btn-yahoo {color: #fff !important;}

これで商品名はブラック(濃いグレー)に、Amazonなどのリンクの文字は白になります。

Bloggerとも相性の良い「もしもアフィリエイト」のメリットとデメリットなどもまとめています。

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

Bloggerでも秀逸な無料テーマ「QooQ」のおかげで、メニューの表示、パンくずリストやタグの最適化、高速なページの表示によってSEO的にも良い具合に最適化できます。

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

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

さすがにそのような次元まで追いつこうとするのは相当大変です

しかし、本来ブログの目的である有益な情報を正確にわかりやすく伝えるという面においては、カスタマイズを施したBloggerでも十分に満たしています。

重要なのはコンテンツ

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

WordPressでサイトを運営している時も外観のカスタマイズに凝ることが多いです。装飾を施すほどサイトが重くなってSEO的にも良くないのにやっちゃうんですよね。

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

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

まとめ

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

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