
Blogger に来て約3年。
これまで使ってきたテーマは「シンプル」と「Contempo」で、それぞれもう弄りたいとこが無くなる程にカスタマイズしまくってきたわけですが、年も明けたことだし、心機一転のいい機会でもあるので、久しぶりに新しいテーマに変えてみることにしました。
今回選んだテーマは最近人気の日本製無料テーマの「QooQ」です。
ラムネグ
シンプルで速い日本語bloggerテンプレート「QooQ」の紹介!blogger日本語テンプレート「QooQ(クーク)」紹介!SEO対策から関連記事までオールインパックになった表示の速いテンプレートですhttps://blog.dododori.com/create/program/blogger-qooq/
実はこれまでずっと公式テーマに拘っていて、サードパーティ製のテーマを使うのはちょっと抵抗があったんですが、段々公式テーマへの執着が薄れてきてた(新しいのが中々出ないせいもある?)上に、QooQ に公式以上の魅力があったという理由で自然とこういう選択になりました。
CONTENTS
QooQ に惹かれたポイント
日本製無料テーマは他にも、Vaster2 や ZELO や、QooQ の前身である Tokyo、Kyoto や、最近 ZELO の作者さんがリリースされた veta 等、魅力的なものはいくつかありますが、なぜ私が QooQ を選んだかというと・・・
まずはトップページのミニマムな構成のデザイン・レイアウトですね。
これまではシンプルも Contempo も PC だと横長のリスト風で、記事本文の概要が表示されるせいもあり、特にスマホだと情報量が過多でゴチャゴチャした感じだったのですが、 QooQ は本文表示は無く、PCではタイルが横2列に並んだグリッドレイアウトになっています。→その後、結局概要文も表示させるようにしました。
実はこういう大きなサムネ画像のグリッドレイアウトへの憧れもあったんです(´▽`)。なので公式の Emporio も一応候補には挙げてました。
見た目だけでなく中身の HTML も非常にシンプルで構造もわかりやすく、カスタマイズも捗りました。
ただ無駄を省いただけでなく、高速化や SEOの最適化等の対応も抜かり無いという所も高評価なポイントです。
Contempo より前の旧バージョン(ウィジェットバージョン1)に戻るということが乗り換えを躊躇してた理由の一つではありましたが、シンプルテーマで扱い慣れてることもあり、自分にはこっちの方がやり易かったです。意外とデメリットよりもメリットの方が大きかったかも。
それではここから、主なカスタマイズの内容を纏めておきます。
カスタマイズまとめ
主なカスタマイズ (随時更新)
- 月別アーカイブページのページャーを翌月・前月リンクに (2022/01/22)
- トップページのサムネイル(アイキャッチ)画像を自動的に WebP に変換 (2021/02/28)
- 各記事ページの投稿日に月別アーカイブページへのリンクを付けた (2021/02/13)
- モバイル表示時のナビバー開閉ボタンが押す毎に ≡ と × に変化するように (2020/12/29)
- ラベル名の背景をラベル(タグ)風デザインに (2020/12/17)
- ラベルウィジェットをプルダウン化 (2020/11/30)
- レイアウトを1カラムに変更 (2020/10/06)
- トップページの記事リストをリストレイアウトに変更 (2020/09/07)
- 追従するサイドバーウィジェット
- トップページのタイル全面をリンク範囲に。
- トップページに記事スニペットを表示
- 投稿日の横にコメント数を表示
- 関連記事をタイルデザイン(グリッドレイアウト)に
- アーカイブウィジェットのプルダウンリストをオリジナルデザインにカスタマイズ
- ナビゲーションバーをページ上部に貼り付く仕様に。
- スマホ時のナビゲーションバーの折りたたみ動作をCSSアニメでヌルっと開閉。
- 前後記事リンクを記事エリア外の下部へ移動。
- トップページのサムネサイズの比率を 2:1→16:9 に変更。
参考記事: 【Blogger】月別アーカイブに翌月・前月のリンクを設置する | mizusame
年別アーカイブページでは機能しない仕様なのでページャーは非表示にしています。
参考記事: アイキャッチ画像をWebPに一括変換する方法 | IB-Note
こちらの記事に QooQ での導入手順を追記しました→ ブログを高速化しました | ふじろじっく
参考記事: Bloggerブログで投稿の日付からアーカイブページへ記事タイトルから記事ページへリンクする方法
アーカイブガジェットを外したことによりアーカイブページへの入り口が無くなってしまったので暫定対策としてやってみました。
※その後アーカイブガジェットを復活させました。
参考記事: ついにハンバーガーメニューを実装しました | IB-Note
記事書きました→ 【QooQ】ナビバー開閉ボタンのカスタマイズ
ブログ内全てのラベルリンクやラベル表示の背景をCSS疑似要素でタグ っぽいデザインで統一してみました。
↓のプルダウンはやめましたw
参考記事: 【Blogger】ラベルのガジェットをプルダウン表示にする方法 - バナナのBloggerカスタマイズ日記
→1カラムレイアウトにしてみた
サイドバーガジェットの一部をフッターに移動させて、サイドバー自体は完全に撤去しました。
こちらの記事に共感しまして、ウチもリストレイアウトに変えてみました。
→【 QooQ カスタマイズ 】 トップページの記事一覧をリスト表示にしてみたよ!-インドアな日々
※CSS はウチ独自のカスタマイズです。
参考記事: 【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】-インドアな日々
ラベル部分だけは独立したラベルリンクになってます。
参考記事①: Blogger・QooQの投稿リストにスニペットを表示させる方法 | MERMONA (Wayback Machine)
2021/02/12現在、MERMONAさんのサイトが削除されて閲覧できない状態ですが、幸い Wayback Machine にアーカイブが残っていたのでそちらのリンクを載せておきます。
参考記事②: Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす(些細な日常)
※スマホでは非表示にしています。
参考記事: 【QooQ】トップ画面にコメント件数を表示する方法【カスタマイズ】 - テキストエディタを作るブログ
うちではコメントがある記事のみ表示するようにしました。クリックした時にポップアップウィンドウを開かせず、コメントエリアへの直リンになるように変えました。
記事書きました→ 【QooQ】投稿日の横にコメント数を表示させる
→【QooQ】関連記事ウィジェットのデザインカスタマイズ - ふじろじっく
※スマホ表示時はリストデザインに変化
参考記事: 【CSS】プルダウンメニューのデザインを変えてみる - バナナのBloggerカスタマイズ日記
記事書きました → 【QooQ】ナビゲーションバーを上部に固定する方法
(理想の挙動イメージとは微妙に違うけど一応妥協(^^;)
参考記事: HTMLとCSSだけ!要素の表示・非表示を切り替える方法(サルワカ)
2020/08/18 追記: こちらの記事のお陰で理想的な開閉挙動に出来ました!
参考記事: QooQ スマートフォンの時のナビゲーションをゆっくり開閉させる - すたすた式
記事書きました→ 【QooQ】前後記事リンクの位置を変える | ふじろじっく
前テーマから引き継いだり新たに追加したスクリプト、ウィジェット類
- 更新時刻表示
- 番号付きページネーション
- 前後記事リンクを記事タイトルに置き換え
- ページトップに戻るボタン🚀
- 最新記事ウィジェット
- 最新コメントウィジェット
- オリジナルSNSシェアボタン
- オリジナルデザインの検索ウィジェット → ナビバー内に埋め込み。
- 自動目次+スムーススクロール
- コメントに吹き出し
→参考記事: コピペでかんたんQooQカスタマイズ!最終更新日を表示する-BloggerMaster!
記事に書きました → 【QooQ】ナビゲーションバーの中に検索ボックスを埋め込む
その他細かいカスタマイズ
- フッターのコピーライトのブログ名にブログのリンクを付けた。
- コピーライトの年表示を自動更新化
- 投稿・更新時刻横にアイコン
前テーマから引き継がなかったウィジェット(今後の導入は未定)
- ブログリストウィジェット
- 2つ目(別期間)の人気の投稿ウィジェット
- はてなスター → トップページで上手く表示出来ないので設置はやめました(どうせ★なんて付かないし…)。
今後は…
とりあえず今のところはこんな感じで。ていうか、1週間でもうほぼ理想の状態に出来ちゃったんで、今後はもうこれ以上弄ることは無いかもw
ちなみに jQuery とか Font Awesome とか Adobe Fonts なんかも入ってますけど、 Pagespeed Insights での計測結果は PC が90台、モバイルが60~80台と高スコアを維持していました。スゴイですねえ。
こちらのモバイルの速度計測(Test My Site)での結果は2.6秒とやや遅めではありますが、以前の Contempo では3秒だったので、多少は改善されてるということでまあ良しとしましょう(^^;
というわけで、せっかくのいい状態を維持するためにも、カスタマイズはこの辺で妥協しといた方がいいですよね(´▽`)
コメントを投稿
別ページに移動します