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

QooQカスタマイズ参考サイト一覧アイキャッチ

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

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

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

好きなようにアレンジしてみてください。

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

※追記(2021/11/4)
テンプレートを JetTheme に変更しました。こちらもおすすめです!

テンプレートを JetTheme に変えました

テンプレートを JetTheme に変えました

約2年前に Blogger でこのブログを始めてから QooQ を利用してきましたが、今回 JetThemeというテンプレートに変えてみました。

目次

QooQ テンプレート

こちらのラムネグさんのブログからダウンロードさせていただきました。

ブログの土台となるテンプレート選びは非常に重要です。昨年 Blogger を始めたときは海外製テンプレートを使いましたが(そして挫折)、使いやすさ、カスタマイズのしやすさが全然違います。QooQ があるから初心者も Blogger で気軽に始められると言っても過言ではないでしょう。書かれているとおり、まじで感動の速さ。

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

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

素晴らしいテンプレート QooQ ですが、気になったのがトップページ記事一覧のリンク範囲が狭い点でした。リンクが文字部分と画像部分に限定されていて、特にスマホだとうまくタップできない!

こちらのデミさんのブログを参考にさせていただき、リンク範囲を広げるカスタマイズをしました。

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

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

ナビゲーションバーをタイトル下に変更しました。
こちらのCAD日和さんのブログを参考にさせていただきました。

この方がよく見る配置かなと思ったので。デフォルトだと、ブログ名よりもナビゲーションの方に目がいってしまう気がしました。

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

移動したナビゲーションバーに影をつけて、少し立体的に見えるようにしました。影の有無はきっと好みですね。
こちらのBloggerMasterさんのブログを参考にさせていただきました。

#header {
box-shadow:0px 2px 3px 0px #b0bbb1;
padding: .5em 0 .3em 0;
margin: 0 0 .5em 0;
}
#navigation {
box-shadow:0px 2px 3px 0px #b0bbb1;
padding: .5em 0 .3em 0;
margin: 0 0 .5em 0;
}

ヘッダーとナビゲーションバーの位置を入れ替え、ナビゲーションに影をつけるとこのような感じになります。

目次をつける(2021/10/16追記)

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

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

※追記(2021/10/16)
現在は、details タグ、summary タグを使った折りたたみ式の目次自動生成スクリプトを使っています。特定のコードがある記事にのみ目次を表示するスクリプトです。
記事ごとに、目次の表示箇所や、開いた状態で表示するか閉じた状態で表示するかを指定することができます。

【Blogger】折りたたみ式の目次を自動生成できた

【Blogger】折りたたみ式の目次を自動生成できた

目次のアイデアやスクリプトをいろいろ探しつつ自分のブログにあわせて試行錯誤してるうちに、折りたたみ式の自動目次ができました。素人なので参考サイトのつぎはぎコードなんですが、一応動くのでご紹介します。

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

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

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

お問い合わせフォームの設置(2021/2/28追記)

Blogger のウィジェットとして用意されている連絡フォームを使って、お問い合わせフォームを設置しました。こちらの Cottpic さんのブログを参考にさせていただきました。

こんな感じになっています。当ブログの実際のお問い合わせフォームはこちら

※追記(2021/2/28)
その後、Google フォームをカスタマイズしたフォームに変更しました。フォームの見た目も自由にカスタマイズできますし、完了ページもブログ内に設置できるので、おすすめです。カスタマイズ方法は以下の記事にまとめました。

Google フォームのデザイン・完了ページをカスタマイズ

Google フォームのデザイン・完了ページをカスタマイズ

先日、当ブログのお問い合わせフォームを Blogger ウィジェットから Google フォームに変更しました。Google フォームのデフォルトデザインだと浮いてしまうため、ブログに合うようにデザインをカスタマイズ&完了ページをブログ内に設置しています。今回はそのカスタマイズ方法をご紹介します。

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

各記事の下に「次の投稿」と「前の投稿」のリンクがありますが、その表示だとどんな記事かがわからないので記事タイトルを表示させたいと思いました。こちらのきゃんつくばっとさんのブログを参考にさせていただき、修正を加えて反映しました。

「レイアウト」→「フッター」に、ガジェット「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でブラウザを横に広げると、記事本文部分の幅がかなり広くなり読みにくく感じたので、幅を狭めるカスタマイズをしました。こちらのテキストエディタを作るブログさんのブログを参考にさせていただきました。

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

.container {
    width: 640px;
}

記事一覧の下に番号付きページナビを設置(2021/9/3追記)

こちらのブログを参考にさせていただきました。ブログ全体の記事ボリュームを把握できるのが良い!

こんな感じに。

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;
}
※追記(2021/9/3)
その後、IB-Note さんのブログで紹介されているスクリプトに変更しました。とても軽いのでおすすめです。
参考:【軽量&高速】Blogger用ページネーションを作成しました | IB-Note

最終更新日を表示、投稿日前にアイコンを表示(2021/8/31追記)

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

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

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

更新がない場合

更新がある場合

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

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

<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に更新日を表示する - バグ取りの日々

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

ラベル、人気記事のリンク範囲を、ブロック形状にして広くする

QooQ のデフォルトテンプレートだと、リンク範囲が微妙に狭い箇所がいくつかあるのが気になっていました。文字の部分にしかリンクがないので、カーソルを細かく合わせないといけないという微妙なストレスが。以下のブログを参考にさせていただき、修正しました。

リスト版トップページ記事一覧のサムネイル画像サイズを変更(2020/1/20)

記事一覧のサムネイル画像が小さく感じたので、画像サイズを変更しました。CSS でサイズを大きくするだけだと画質が粗いまま拡大されてしまうので、テンプレートを修正して画像をリサイズする必要があります。

以下の記事で、サムネイル画像のリサイズ方法を紹介しています。

【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法

【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法

リモナーダ好きの雑記ブログ。スペイン語学習、Blogger、中南米遺跡など。

アドセンスを本文中の特定箇所に掲載(2020/1/20)

アドセンスの審査に合格してからブログに広告を表示するまでの流れ、設定方法をまとめました。

記事の本文中、特定箇所に広告を自動表示するスクリプトも紹介しています。

【Blogger】アドセンスの設定方法、参考サイト【QooQ】

【Blogger】アドセンスの設定方法、参考サイト【QooQ】

先日アドセンスの審査が通りました。ただ実際どのように掲載すれば良いのか疑問だったので、自分で行った設定の流れをまとめてみました。Blogger で初めてアドセンスを設定する方の参考になれば幸いです。

なお、これからアドセンスを始める方は、こちらの記事をご参照ください。申請方法をまとめています。

Bloggerにアドセンスを掲載する方法

Bloggerにアドセンスを掲載する方法

Google が運営するブログサービス Blogger では、無料で Google アドセンスを掲載できます。独自ドメインがなくてもOK。

Blogger では、独自ドメインあり・なしのどちらでもアドセンスの利用が可能です。

highlight.js を導入、コードコピーボタンを設置(2020/1/20)

highlight.js を使うと、ソースコードを見やすくハイライトして表示できます。

また、コードをワンクリックでコピーできるコピーボタンも合わせて導入すると便利です。導入方法、参考サイトを以下の記事でまとめています。

【Blogger】コード表示に highlight.js を導入してみた

【Blogger】コード表示に highlight.js を導入してみた

highlight.js を使えば、お手軽にコードをブログに掲載できます。Blogger での導入方法をまとめました。

リンクをブログカード形式で表示(2021/2/6)

ブログカードジェネレーターを使うと、リンクを簡単にブログカード形式で表示できます。おすすめツールをこちらの記事でまとめています。

シンプルで使いやすい ブログカードジェネレーター5選

シンプルで使いやすい ブログカードジェネレーター5選

ブログカードを簡単に生成できるツールを紹介します。

サイトマップ表示(2021/2/6)

ブログ記事の全体像がわかるように、サイトマップを設置しました。

提供されているスクリプトはいくつかあるようでしたが、私はこちらのふじろじっくさんのブログを参考にさせていただきました。記事タイトルと投稿日でソートできる点、記事数が何件あるか表示される点が気に入っています。

関連記事消失を復活させる(2021/3/25)

Blogger の仕様変更でリアクションウィジェットが廃止されたことにより、QooQ の関連記事が表示されなくなりました(2021/3/22頃)。QooQ テーマ作成者ラムネグさんのブログで対処法が解説されています。

対応内容としては、以下のコードを探し、

<b:if cond='data:top.showReactions'>
<div id='mrp-wrapper'>
<p id='mrp-title'><data:top.reactionsLabel/></p>
<b:include data='post' name='mrp'/>
</div>
</b:if>

以下のように置き換えます。コメントアウト部分は、削除しても良いようです。

<!-- <b:if cond='data:top.showReactions'> -->
<div id='mrp-wrapper'>
<p id='mrp-title'>関連記事</p>
<b:include data='post' name='mrp'/>
</div>
<!-- </b:if> -->

元のコードではリアクションウィジェットの表示をオンにしていた場合に関連記事を表示する設定だったところ、常に表示するように変更。「関連記事」というタイトルは、リアクションウィジェットの入力欄を引っ張ってきていたところをベタ書きに。

▼この消失事件に関する私のぼやき

【QooQ】関連記事が突然消えた(解決済み)

【QooQ】関連記事が突然消えた(解決済み)

リモナーダ好きの雑記ブログ。スペイン語学習、Blogger、中南米遺跡など。

サイドバーに最新記事リストを表示(2021/4/1)

IB-Note さんのブログを参考にさせていただき、サイドバーに最新記事が表示されるようカスタマイズしました。シンプルなデザインで QooQ の人気記事ともデザインを合わせやすく、良い感じです。

サイドバーのプロフィールをカスタマイズ(2021/8/26)

サイドバーのプロフィールエリアをカスタマイズしました。

これまではテキストガジェットで無理やりつくっていたのですが、使い勝手が悪かったのでデザインも一新して新しいものに。

76logさんのブログを参考にさせていただきました。「ブログ概要」等のボタンも、こちらのブログのサイドバーを参考にさせていただいています。

かわいくて良い感じのSNSシェアボタンを設置(2021/8/26)

QooQ にもシェアボタンは設置されていますが、より良い感じのデザインが公開されていたので入れ替えました。

QooQ のシェアボタンは、見栄えより表示速度を重視したと作者さんのページにも説明があるようにかなりシンプルなので、気になる方はお好みでカスタマイズしてみると良いと思います。

ブログのロゴを SVG 形式で作成(2021/9/16)

ブログタイトルを、自分で作成したロゴに変更しました。

拡大・縮小してもぼやけない、SVG という画像の形式でつくっています。簡単なロゴの作成方法と QooQ での設定方法を以下の記事でまとめました。簡単にきれいな画像ができるのでおすすめです。

ブログのロゴを svg 形式で簡単につくる。ロゴ作成手順と Blogger での設定方法

ブログのロゴを SVG 形式で簡単につくる。ロゴ作成手順と Blogger での設定方法

ブログのロゴって設定していますか? 今回はフリーソフトを使って、拡大・縮小しても画像がぼやけない SVG という形式のロゴ作成方法をご紹介します。Blogger(QooQ)での設定方法もまとめました。

ページ表示速度を落とさずに Google フォントを導入 (2021/10/16)

Google フォントを使うときの最適なコード記述方法を以下の記事でまとめました。

Google フォントのようなウェブフォントを読み込むと一般的にページ表示速度は落ちてしまいますが、非同期でフォントを読み込むことで表示速度への影響を抑えることができます。

ページ表示速度を落とさずに、非同期読み込みで Google Fonts を使う

ページ表示速度を落とさずに、非同期読み込みで Google Fonts を使う

できるだけページ表示に影響を与えずに Google Fonts を読み込む方法を調べたので紹介します。

新テンプレート JetTheme のカスタマイズ一覧(2021/11/8)

新しく使い始めた JetTheme のカスタマイズについては、以下の記事でまとめています。

【Blogger】JetTheme カスタマイズ方法一覧

【Blogger】JetTheme カスタマイズ方法一覧

JetTheme を導入するにあたって、いくつかカスタマイズを行いました。 当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。

JetTheme はデフォルト機能が豊富なので、機能面では QooQ よりも必要なカスタマイズは少ないと思います。

▼ JetTheme の特徴・機能もまとめました。

JetTheme の特徴と機能。導入後の気づき

JetTheme の特徴と機能。導入後の気づき

JetTheme を導入して2週間ほど経ちました。今回はカスタマイズを通してこのテンプレートについて感じたことを自分なりにまとめてみます。

固定ページの作成方法(2022/1/12)

Blogger での固定ページの作り方をまとめました。

Bloggerで固定ページを作成する方法

Bloggerで固定ページを作成する方法

Blogger でブログを始めたばかりの方向けに、Blogger で固定ページを作成する方法を紹介します。

次の記事 前の記事