どうも。瀕死のはずの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 == "item"'> を検索で探し、その下にある赤文字のタグを削除します。
<b:if cond='data:blog.pageType == "item"'> (中略) <b:if cond='data:label.isLast == "true"'> <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 は管理ページのアドレスバーを確認すればわかります。
ファビコンの変更でお困りの方はご参考に。
2020/07/23 追記
現在は設定ページにてファビコン変更が出来るようになっています。
今回の主なカスタマイズは以上です。
また何かしら弄ったら(PCも生きていたら)記事に纏めます。
コメントを投稿
別ページに移動します24 件のコメント (新着順)
ふじやん
中々いいんじゃないですかね。
もしくは、5pxぐらいに広げれば間隔の差が目立たなくなると思いますよw
jp
ありがとうございます。
もうカテゴリラベルの両端を丸めといて間隔を0にしても別タグとして認識されるようにしましたw
やや不格好ですが、変なあるかないかわからない隙間だったりあったりするかよりマシかなとw
ふじやん
おそらくですが、画面の解像度に依って変わってくるのかもしれませんね。どの条件でも常に一定の間隔を保たせるのは難しいのかも…?
jp
あ、スマホ表示だと無理なときもありますねw
あんまし気にし過ぎも良くないかもですね。
仕方ないならこれでもいいので無理はされないでください
ふじやん
ん? 今確認してみましたが、1.5px だと間隔が揃ってないみたいですね…ちょっと検証し直してみますね。
jp
いつもありがとうございます。
ほんと何でもおわかりなんですね・・・
検証でそのタグをいじってたのですが、pxにすることで改善可能なんですね
初めて知りました。。。
ラベルの間隔に気づいたのは、検証でアイフォン5サイズで見ていると、ラベルの左右の余白のせいで変にラベル文字が改行されてるし余白いらないなと思って間隔を上下左右同じにしたんですよね。
そうしてラベルを観察することになるとなんか間隔がおかしいぞと思い気づきました笑
みなさんも間隔がおかしい感じなのでぼくだけではないと思ってそこまで気にしていたわけではなかったのですが、まさかpxで間隔を統一できるとは驚きです
ふじやん
そういえばブログのURLも変わってますね。
ラベルの件ですが…pjさん、よくこんな微妙な違いに気づきましたね(^^;
私も結構細かいところに拘るタイプですが、ここは気づきませんでしたw
たぶん、以下の部分で .1em になってる箇所を 2px ぐらい(お好みで微調整を)にすれば間隔が揃うと思いますよ。要は em 単位ではなく px で指定してやればいいんです。
.list-item-category-item {
margin-left: .1em;
}
↓↓
.list-item-category-item {
margin-left: 2px;
}
jp
ふじやんさん、そうなんですよ。名前を変えました
クリスチャンですでにbjと名乗る人がいてしかも不良系の牧師気取りの人なので嫌になり本名からjとpを取り、逆さまにしてpjにしました
ラベルは例えばぼくのブログのトップページ記事一覧をご覧いただいて、最新記事の複数ラベルの間隔とそこから4つ目下のモルモン教批判記事のタイトルも観察しますと、若干ラベルが複数並んでいるケースに置いて間隔が異なるのがわかります
でも他の方もこんなのが多々ありましたね。
ふじやん
pjさん、こんにちは。(名前変えられたんですね)
関連しそうな記事が見当たらないようでしたらふじ庵でも構いませんよ。
で、ご質問の件ですが、ラベルの間隔というのはどの箇所のラベルのことでしょうか?
トップページの記事一覧や記事ページやラベルウィジェット、どれも特におかしな点は無いように見受けられますが。
もうすこし具体的に補足して頂けませんか。
jp
こんにちは。
ラベルについての記事検索しても見つかりませんでしたので、こちらにコメントさせていただければ幸いです
qooqのラベルって変に間隔がバラバラだったりするのですが、これは仕方がない仕様なのでしょうか
妙に間隔があるのもあれば、狭いのもあったりとあまりこの仕組みがわからないのですが、もし改善点などありましたら教えていただけると幸いです
ふじやん
Google+のようにサービス終了…という可能性はゼロではないかもしれませんが、日本ではマイナーでも海外ではBloggerはWPに次ぐぐらいユーザーは多いですからね。
私もそういう心配は無用じゃないかなと思います(^^)
bj
何度もありがとうございます。そうですねbjと名前欄に入力することにいたしますw
それにしてもGoogleブロガー自体が消えることってないですよね。。。
ヤフーブログはサービス終了したように、いきなりGoogleブロガーも終了なんてことになると悲しいなと思うのですがそんな事にならないことを願います。
海外では無料ブログサービスといえばGoogleブロガーですからないとは思いますが。
ふじやん
MERMONAさんのブログは独自ドメインですが中味はBloggerですよ。
Wayback Machine はページソースも保存されてて確認できます。
view-source:https://web.archive.org/web/20201020051130/https://www.mermona.com/
詳しくはわかりませんがドメインの更新か管理関係で何か問題があるのかもしれませんね。
ところでbjさん、コメント投稿に関してですが、「匿名」ではなく「名前/URL」にしてはどうでしょう?
名前だけ入れてURLは空白のままでも投稿できますよ。
匿名
ご返信ありがとうございますbjと読んでください。
そうですねその方は確かワードプレスでサイト構築されておられたからドメインの有効期限が過ぎて更新してないかもしれませんね。
私は最初Googleブロガーのドメインかと思っていましたが残念ながらワードプレスなら更新されないなら消えますよね。
ふじやん
bjさん(とお呼びしてもいいのかな?)、こんにちは。
Wayback Machine は私もよく利用していて、私の旧ブログ(ふじろぐ)のアーカイブも残っているので、昔のカスタマイズの確認などで重宝してます。
MERMONAさん、1年近く更新がなかったので、このまま消えてしまうのではないかと心配になります。
匿名
クリスチャンbjブログに先程はコメント下さりありがとうございました。
確かにエラーでみえなくなっていますね
削除されたりするブログを見る方法はこれです
https://web.archive.org/web/20201020051130/https://www.mermona.com/
ふじやん
あトんさん、コメントありがとうございます。
拙い記事ですが、お役に立てたのなら何よりです(^^)
ブログ、拝見しましたが、相当ガッツリ弄られてるようでビビりました(笑)
あトん
ふじやん。さん
初めまして。あトん、と申します。
こちらのサイトが無かったら、Bloggerのカスタマイズに行き詰まってました。
丁寧な解説で、いろいろ参考にさせて頂きました。
深く感謝いたします。
ふじやん
mocaさん、コメントありがとうございます。
お役に立てたようで何よりです。
mocaさんの Tokyo テーマのブログは以前から何度か拝見させて頂いてますが、とてもわかり易く解説されていて、こちらこそ色々参考にさせて頂きたいです。(^^;
QooQ テーマの新ブログの更新も楽しみにしています(^^)
moca
ふじやん。さん
はじめまして。
ファビコン設定できなくなって困っていました。ありがとうございます♪
Bloggerはまだ不慣れで、分からないことだらけなので、またいろいろ参考にさせていただければと思います(*^-^*)
ふじやん
実は Squirrel さんにオススメしようかなあ、とちょっと思っていました。
なるべくならJSや外部サービスに頼らず、Blogger純正のウィジェットで賄いたいですよね。
Squirrel
スニペット表示は、こちらのやりかたに変更しました。
おかげで、余計なjsが一つ減らせました。ありがとうございました。
ふじやん
Squirrelさん、こんばんは。
メイリオって安定感があるし、視認性もいいですよね。
游ゴシックも嫌いじゃないけどちょっとクセが強め(^^;
Squirrel
読みやすくなりました^^やっぱり、メイリオですね。