【QooQ】最近のカスタマイズまとめ

2024/10/1524
アイキャッチ

どうも。瀕死のはずのPCが意外としぶとく生き延びてる間に、相変わらず飽きもせずせっせとカスタマイズに精を出してる ふじやん。です。

ここ最近で色々弄った内容を覚え書きとして記しておきます。

テーマ編集は必ず予めバックアップを取ってから行って下さい。

CONTENTS

トップページ

トップページカード

スニペットを表示

QooQ にはデフォルトでは実装されていないスニペット(記事冒頭文)を表示。

これが無くてスッキリしてることが QooQ を選んだ理由の一つでもあったんですけど…うちの記事は短いタイトルが多くて内容が分かりづらいかもしれないし、タイトルが短い分スペースには余裕あるし、というわけで結局スニペットを付けてみることにしました(^^;
※スマホでは非表示にしています。

先日偶然見つけたこちらのブログ →「Blogger・QooQの投稿リストにスニペットを表示させる方法 | MERMONA」(Wayback Machine)と、以前から何かとお世話になってる結城永人さんのブログ →「Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす」の合わせ技で簡単に実装出来ました。
2021/02/12現在、MERMONAさんのサイトが削除されて閲覧できない状態ですが、幸い Wayback Machine にアーカイブが残っていたのでそちらのリンクを載せておきます。

当ブログで設定したスニペットタグはこんな感じ。

<b:eval expr='snippet(data:post.body, { length: 60, links: false, linebreaks: false, ellipsis: true })'/>

length(文字数)は全角文字で2行以内で収まる様、60文字に設定してあります。
links(aリンク)と linebreaks(改行)は無効に。ellipsis(末尾の「…」)表示を有効に。

ちなみに <i>~</i> や <b>~</b> 等のタグの範囲の途中で区切られていると、ページ全体のレイアウトがおかしくなってしまうので要注意です。その場合は
<span style="font-style:italic">~</span>
<span style="font-weight:bold">~</span>
というようなスタイルタグで書き直せば回避できます。

ラベルの位置を左上隅に移動

ラベルはこれまではタイル枠の右下に表示していましたが、スニペットが増えたせいで枠内が一杯でゴチャゴチャになってしまうので、スペースが空いているサムネイル上の隅に移動させました。代わりに投稿日を右下に移動させてます。

Emporio もラベルはサムネイル上にありますよね。あちらは普段は隠れていて、マウスホバー時に浮き出てきますが、実現するのは面倒そう?なのでやめました(^^;
なのでとりあえずなるべくサムネイルの邪魔にならないように半透明にしてあります。

2021/08/15 追記:
Emporio の様に普段は非表示にしておいて、マウスホバー時に浮き出るようにしてみました。
【QooQ】トップページのラベルの表示を変えてみた

CSS の以下の部分にコードを追記するだけで簡単に配置を変えられます。
右上に配置したい時は left:0 を right:0 に変更します。

.list-item {
position: relative;
}
.list-item-category {
position: absolute;
top: 0;
left: 0;
}
/*ラベルを半透明に*/
.list-item-category-item {
opacity: .5;
}
.list-item-category-item:hover {
opacity: 1;
}

2/28追記: タイル全体をリンク範囲に

タイル全体をクリック可能な記事リンクにしました。ラベル部分だけは独立したリンクになってます。

実は以前、別の方の記事を参考にこれをやろうとして何故か上手く行かなかったのですが、こちらの記事の手順でやってみたらあっさり出来ました(^^;

ファビコンインドアな日々
サムネイル
【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】
https://indoor-days.blogspot.com/2020/02/Blogger.QooQ.Customizing-article-links.html

個別記事ページ

パンくずリストを復活

必要性があるのかどうかがいまいちよく分からなくて QooQ 導入直後に取っ払っていたものの、やっぱり無いよりはあった方がいいのか?という気が段々してきたもんで復活させました。
まあラベルの代わりにもなるかなと。というわけでデフォルトでは最後の1ラベルしか表示されないので、全てのラベルが表示されるように変更。これまで記事上部に置いていたラベルは関連記事の上に移動させました。

パンくずリストで全てのラベルを表示させるには
<b:if cond='data:blog.pageType == &quot;item&quot;'> を検索で探し、その下にある赤文字のタグを削除します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
(中略)
<b:if cond='data:label.isLast == &quot;true&quot;'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
<a expr:href='data:label.url' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta content='2' itemprop='position'/>
</span> /
</b:if>

SNS シェアボタンを減らした

カラフルなので飾り代わりにもなる(笑)という理由もあり赤や緑のボタンも並べてましたけど、まず使われることはないであろうサービスのボタンは思い切って廃止しました。
数が減ったのでバランスも考えて左寄せにしました。

全体その他

投稿日の横にコメント数を表示

ここ最近よくコメントを頂くということもあり、トップページと記事ページの投稿日の横にコメント数を表示するようにしました。同様の理由でサイドバーに最新コメントウィジェットを復活させてます。

コメント数表示で参考にしたのはこちらのブログ。

ファビコンTZLOG
サムネイル
【QooQ】トップ画面にコメント件数を表示する方法【カスタマイズ】
エディタ作成よりもブログのカスタマイズ方法を調べていました。知りたかったのは記事のコメント件数をトップ画面に表示する方法です。私のブログは多分コメントが書き込まれることは無いと思うんですけど(コメントして頂けました。ありがとうございます)、
https://tz-log.com/qooq-display-number-of-comments/

うちではコメントがある記事にのみ表示するようにしました。
記事ページでこの部分をクリックするとコメント位置にスクロールします。

フォント

フォントを久しぶりにメイリオ(Macではヒラギノ角ゴになってるはず)にしました。今まで色々試してきましたが、なんだかんだでやっぱりメイリオが一番見やすいし落ち着きますね(笑)
ちなみに italic のみ游ゴシックにしてあります。(メイリオはChrome等では英数字しか斜体にならないため)

ファビコン変更

最後に気分転換で、久しぶりにファビコンを変えようかとレイアウト画面を開いたら・・・

ファビコン設定のセクションがない!?

どうやら新デザインのレイアウト設定画面ではファビコン設定ができない状態になっているようです。
I want to update my favicon but I don't see the widget. Help, please. www.moonfullart.com - Blogger Community
フォーラムのエキスパートの回答によると

ファビコンを設定するオプションは、現在進行中のBloggerレイアウトエディターの最新アップデートでは使用できません。
フィードバックをBloggerに送信できます。
その間、左側のサイドバーオプションからClassic Bloggerに切り替えて、古いバージョンのBloggerに切り替えてファビコンを設定できます。

つまり「以前のBlogger」に戻さないと出来ないとのこと。

ですが、最新レイアウト画面のままでもファビコンを変える方法があります。
ファビコン設定ウィンドウの URL に直接アクセスすればいいのです。
https://www.blogger.com/change-favicon.g?blogID=自分のブログID

自分のブログID は管理ページのアドレスバーを確認すればわかります。

blog ID
ファビコン設定

ファビコンの変更でお困りの方はご参考に。

2020/07/23 追記

現在は設定ページにてファビコン変更が出来るようになっています。

設定画面

今回の主なカスタマイズは以上です。
また何かしら弄ったら(PCも生きていたら)記事に纏めます。