【QooQ】カスタマイズ参考サイト一覧

ブログ運営 #Blogger #QooQ #カスタマイズ

QooQ は、非常に使いやすくカスタマイズもしやすい Blogger テンプレートです。

この記事では、私が QooQ を使い始めて以降カスタマイズの参考にさせていただいたサイトを紹介しています。

QooQ はデザイン面、機能面で詳しい方がさまざまなカスタマイズ情報を公開してくれているので、私みたいな初心者でも簡単にカスタマイズできるのがメリットです。

自由にアレンジしてみてください。

本ページで紹介しているコードは各参考サイトを掲載した時点のものになります。
また、テンプレートの修正前には念のためバックアップを取ることをおすすめします。

※追記
テンプレートを JetTheme に変更しました。こちらもおすすめです！

※追記
サブブログで VTrick を使い始めました。

QooQ テンプレート

QooQ のテンプレートは、こちらのラムネグさんのブログからダウンロードさせていただきました。

シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！ - ラムネグ

ブログの土台となるテンプレート選びは非常に重要です。

昨年私は Blogger を始めたときに海外製テンプレートを使いましたが、カスタマイズがしにくくてブログ自体を挫折しました。

QooQ は、これまでの海外製テンプレートと比べて使いやすさ、カスタマイズのしやすさが全然違います。QooQ があるから初心者も Blogger で気軽に始められると言っても過言ではないでしょう。また、紹介されているとおり、ページ表示スピードも速いです。

テンプレートは通常版とリスト版の2種類ありますが、私はスマホで見たときに Yahoo! のトップページのように見えるテンプレートを常々探していたので、迷わずリスト版を選択しました。

記事一覧のリンク範囲を拡大

素晴らしいテンプレート QooQ ですが、気になったのがトップページ記事一覧のリンク範囲が狭い点でした。

リンクが文字部分と画像部分に限定されていて、特にスマホだとうまくタップできないのでリンク範囲を修正。

こちらのデミさんのブログを参考にさせていただき、カスタマイズをしました。

【Bloggerカスタマイズ】記事一覧の記事リンク選択範囲を拡大する方法 - アーシーライフ

私は、カテゴリリンクではなく記事リンクを優先させたかったため、上記参考サイトのCSS②は無しにしています。

ナビゲーションバーの位置変更

ナビゲーションバーを、ブログタイトルの下に変更しました。

こちらのCAD日和さんのブログを参考にさせていただきました。

【blogger設定】qooqのナビゲーションの位置を変更する - CAD日和 SubAssembly

この方がよく見る配置かなと思ったので。お好みだと思います。

ナビゲーションバーに影をつける

移動したナビゲーションバーに影をつけて、少し立体的に見えるようにしました。

こちらのBloggerMasterさんのブログを参考にさせていただきました。

qooqカスタマイズ：ヘッダーに立体っぽく影をつける方法 - BloggerMaster！

#navigation {
box-shadow:0px 2px 3px 0px rgb(0 0 0 / 15%);
}

ナビゲーションではなくヘッダーにつけたい場合は、以下になります。

#header {
box-shadow:0px 2px 3px 0px rgb(0 0 0 / 15%);
}

自動目次機能を追加

Blogger にはデフォルトで目次を生成する機能がないので、こちらのスケ郎のお話さんのブログを参考にさせていただき表示されるようにしました。

[Blogger] 目次を見出しから自動生成するプラグイン（忙しい人向け） - スケ郎のお話

中央寄せ、余白等を調整し、このような仕上がりになりました。

※追記
現在は、details タグ、summary タグを使った折りたたみ式の目次自動生成スクリプトを使っています。特定のコードがある記事にのみ目次を表示するスクリプトです。

記事ごとに、目次の表示有無、表示箇所、開いた状態か閉じた状態かを指定することができます。

パンくずリストと関連記事のラベル表示変更

QooQ ではパンくずリストと関連記事はラベルで管理されています。ただデフォルトの状態だと、複数ラベルをつけた場合、最後のラベルのみが表示される仕様のようです。

すべてのラベルが反映されるよう、こちらのHARUさんのブログを参考にさせていただき修正しました。

【 QooQ カスタマイズ】パンくずリストと関連記事にラベルすべての要素を追加する - インドアな日々

お問い合わせフォームの設置

Blogger のウィジェットとして用意されている連絡フォームを使って、お問い合わせフォームを設置しました。

※追記
Blogger の連絡フォームウィジェットは不具合が発生することがあるようです。
ウィジェットを使用したい場合は、フォームの送信が正しく動作するかを一度テストしてみてください。
動作しない場合は、後述する Google フォームをご検討ください。

ウィジェットを使う場合のカスタマイズは、Cottpic さんのブログを参考にさせていただきました。

Bloggerで連絡フォームを個別ページのみに設置する - Cottpic

こんな感じになっています。

※追記
その後、Google フォームをカスタマイズしたフォームに変更しました。

当ブログの実際のお問い合わせフォームはこちら。

フォームの見た目も自由にカスタマイズできますし、完了ページもブログ内に設置できるので、おすすめです。カスタマイズ方法は以下の記事にまとめました。

「次の投稿」と「前の投稿」を記事タイトルに変更

各記事の下に「次の投稿」と「前の投稿」のリンクがありますが、その表示だとどんな記事かがわからないので記事タイトルを表示させたいと思いました。

こちらのきゃんつくばっとさんのブログを参考にさせていただき、修正を加えて反映しました。

Blogger「次の投稿」と「前の投稿」を記事タイトルに（超簡単） - きゃんつくばっと

「レイアウト」→「フッター」に、ガジェット「HTML/JavaScript の設定」を追加。下記コードを入力して保存します（タイトルは空欄）。見た目は CSS で調整します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" #single-header-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" #single-header-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

※追記
このコードでは、記事タイトルを取得するために前後のページへのアクセスが発生するようです。
できれば不要な読み込みは発生させたくないのですが、今のところ回避方法が見つからず、今のところは記事タイトルを表示させています。

※さらに追記
前後ページの読み込みをしない、さらに画像も表示してくれるスクリプトが紹介されていたので、そちらに変更しました。

以下ブログを参考にさせていただきました。PV数のカウントが正確に近くなるのでありがたいですね。

参考：Bloggerにサムネ画像付きページャーを導入する | IB-Note

本文カラムの幅を変更

PCでブラウザを横に広げると、記事本文部分の幅がかなり広くなり読みにくく感じたので、幅を狭めるカスタマイズをしました。

こちらのテキストエディタを作るブログさんのブログを参考にさせていただきました。

【QooQ】トップ画面(記事一覧)の横幅を変更する方法【カスタマイズ】 - テキストエディタを作るブログ

上記サイトではPC画面幅設定を % で指定していますが、私は固定幅にしたかったので次のように修正しました。

.container {
    width: 640px;
}

記事一覧の下に番号付きページナビを設置

記事一覧の下に、番号付きページナビを設置しました。ブログ全体の記事ボリュームを把握できるのが良いですね。

こちらのブログを参考にさせていただきました。

番号付きページナビウィジェット (2020/1/20 追記) - ふじろじっく

CSSは一部調整しました。当ブログでは以下のCSSを使用しています。

.showpageNum a,
.showpage a {
    font-size: 15px!important;
    font-weight: bold;
    width: 38px;
    padding: 9px 8px;
    margin: 0 3px;
    color: #fff!important;
    background: #6495ed;
    opacity: .8;
    display: inline-block;
    text-decoration:none;
}
.showpagePoint {
    width: 38px;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 8px!important;
    margin: 0 3px;
    text-decoration:none;
    color: #666;
    display: inline-block;
    background: #fff;
}
.showpageNum a:hover,
.showpage a:hover {
    opacity: .5;
    text-decoration:none !important;
}
 .showpageOf {
    display: none;
}

※追記
その後、IB-Note さんのブログで紹介されているスクリプトに変更しました。とても軽いのでおすすめです。
参考：【軽量＆高速】Blogger用ページネーションを作成しました | IB-Note

最終更新日を表示、投稿日前にアイコンを表示

デフォルトでは記事の投稿日しか表示されないため、以下の変更を加えました。

最終更新日を表示し、右寄せにする
投稿日の前にアイコンを表示

変更後の表示イメージはこちら。投稿日と更新日が同じ場合は、投稿日のみ表示されます。

更新がない場合

更新がある場合

以下のブログを参考にさせていただきました。

Bloggerで記事に最終更新日を付ける方法【2018年更新】 – 某氏の猫空

上記ブログを参考に修正を加え、実際に当ブログで使用したコードと挿入箇所はこちらです。よろしければご利用ください。カスタマイズ方法等の詳細は参考ブログに掲載されています。

<p id='single-header-date'>
      <data:post.dateHeader/>
      <span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0em;'/></p>
<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日  
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
// <![CDATA[
// 投稿日
var pp_Y = ""+published.getFullYear();
var pp_M = (""+(published.getMonth()+1)).slice(-2);
var pp_D = (""+published.getDate()).slice(-2);
// 最終更新日 
var dd_Y = ""+updated.getFullYear();
var dd_M = (""+(updated.getMonth()+1)).slice(-2);
var dd_D = (""+updated.getDate()).slice(-2);

if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){
    //日付が同じときは出力しない
}else{
    var updated_dd = '<i aria-hidden="true" class="fas fa-sync-alt fa-fw"></i>'+" "+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
    document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script>

設置箇所：HTML 内で下記記述を検索し、上記コードに置き換えます。

<p id='single-header-date'><data:post.dateHeader/></p>

日付の右寄せは、次のコードをCSSに追加して行いました。

#single-header-date{
   text-align: right;
}

投稿日の前のアイコン表示は、次のコードをCSSに追加して行いました。
※Fontawesomeのアイコンを使用しています

#single-header-date::before{
font-family: "Font Awesome 5 free";
content:"\f044";
font-weight: 900;
}

※追記
その後、こちらのバグ取りの日々さんのブログで紹介されているスクリプトに変更しました。
アイコンを含めた表示のされ方がきれいで、トップページの記事一覧に更新日を載せる際にも苦労せず導入できました。
参考：Bloggerに更新日を表示する - バグ取りの日々

※追記
さらに、すたすた式さんのブログで紹介されているスクリプトに変更しました。更新日の表示方法に迷っていろいろ試していたところ、表示がきれいでかつカスタマイズしやすい構造になっているように感じたためです。
参考：Bloggerに最終更新日を表示させる2020 [ for Widget version 1 ]-すたすた式