【Blogger】QooQカスタマイズをまとめます

このBlogではテンプレートにQooQを使用させていただいております。この記事では私が実施しているQooQカスタマイズをまとめています。

QooQを選んだ理由は以下の通り。

• 構成がシンプル。
• カスタマイズ情報が多い。

ただシンプルが故にそのまま使用するには若干寂しいこともあり、あちこちカスタマイズ中です。

私の環境

• ブログ：Blogger
• テンプレート：QooQ v1.29
• アイコンフォント：Font Awesome v5.11.0（無料版） 

では私が実施したカスタマイズ内容と参考先をまとめます。

エディタ

BloggerのWebエディタは正直微妙なのでVisual Studio Codeで下書きして画像挿入と仕上げ確認をBloggerでやっています。

QooQの導入

QooQ未導入の方はまずこちらを参考にQooQを適用してください。

カスタマイズまとめ

随時更新していきます。参考にさせていただいたサイトをあわせてのせてます。こう見るとだいたいいつも同じ人のサイトを参考にさせていただいているのがわかりますw

自動目次を追加する

自動目次はこちらを参考にしました。幅を自動から100%に変更しています。

追加でカスタマイズしました。現在は幅と左右のマージンをautoにしています。文字が少ないときの余白が気になるのとスマホでの見易さを重視した結果です。いずれカスタム内容を紹介したいと思います。

鉛筆アイコン、更新アイコン、最終更新日を追加

投稿日の前に鉛筆アイコンを設置。投稿日の後ろに更新アイコンと最終更新日を追加しました。

ソートできるリスト型HTMLサイトマップ

タイトルと投稿日で並び替えでき、ラベルでフィルターできるサイトマップです。

記事リンクのホバーアニメ化とリンク範囲の拡大

カードが浮き上がるのと、リンク範囲がカード全体になります。少しラベルの間隔と形状を調整しました。次のリスト化をする前にこちらを先にした方がわかりやすいです。（参考記事の順番のため）

トップページをリスト化

QooQのトップページは2列表示でサムネが大きいのが気になっていました。そこで見つけたのがこちらの記事。スッキリした印象になりました。サムネサイズや文字サイズを調整しています。

コメント吹き出し化

こちらのサイトのコメントいいなと思い使用させていただいています。完全にそのまま使用中です。コメントはありませんがw

ページ最上部と最下部にジャンプするボタン

ちょくちょく見るジャンプボタン。私もマネさせていただきました。色と透過を自分のブランドカラーに合わせて調整しています。

SNSボタンの変更

QooQデフォルトでも良かったのですが勉強ついでに変えてみました。記事の状態では丸アイコンなのでborder-radiusを調整して丸みを帯びた四角にしてます。

ソースコードを色付きで表示する

箇条書きボックスを追加する

リストと番号付きリストをそれぞれCSSに準備しました。以下のサイトを参考にさせていただきました。違うアイコンに変更したのですが、Font Awesome 5はfont-weightを指定する必要があり、そのままだとアイコンが出ませんでしたので注意が必要です。

Freeの場合はSolidを指定する必要があるので、font-wight:900;を挿入します。

リンクをカードにする

ブログカードはEmbedlyというサービスを使用しています。設定と使い方を以下の記事にまとめています。

引用符ボックスを追加する

引用符のCSSはこちらを参考にしました。QooQの引用符CSSと被っているので使用時にはQooQ側を消す必要があります。

対処方法はこちらの中盤に記載しています。競合部分を削除してください。

フッターのカスタマイズ

フッターにラベルなどを追加して見た目をカスタマイズする方法です。

Twitterの中央揃え

TwitterはWebページから埋め込み用のコードを取ってこれますが、そのままだと左揃えになってしまいます。CSSで中央揃えにします。

似たような状況のブログ

最後に

いかがでしたか？新しいカスタマイズなど随時更新していきます。

何かご不明点ありましたら気軽に連絡ください。