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

Googleがサービスを続けている無料ブログのBloggerを用いて、有料のWordPressに迫るブログを作るためにすべきことを順に説明してゆきます。

このカスタマイズは一例であり、当サイトで導入していた手法ですので参考にされてください。たくさんの先人の知恵をお借りしております。

スケ郎さんのブログを参考にさせていただきました。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でさらに記事を読みやすくなります。

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

表示幅の変更

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

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

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

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

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は簡単には行きません。

#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」タグ【段落】をうまく使う

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

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

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

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

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

<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ビューで打ち込んでいくと… 

というようなシンプルな表ができます。<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:」のところを０→１に変更しないと枠線が消えてしまいます。

【QooQ】Blogger無料テンプレートの表の作成方法この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編集でコードを打ってしまったほうが良いかもしれません。

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

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を作成して下さったみなさんに心から感謝いたします。