このBlogではテンプレートにQooQを使用させていただいております。この記事では私が実施しているQooQカスタマイズをまとめています。
QooQを選んだ理由は以下の通り。
- 構成がシンプル。
- カスタマイズ情報が多い。
ただシンプルが故にそのまま使用するには若干寂しいこともあり、あちこちカスタマイズ中です。
私の環境
- ブログ：Blogger
- テンプレート：QooQ v1.29
- アイコンフォント：Font Awesome v5.11.0（無料版）
では私が実施したカスタマイズ内容と参考先をまとめます。
エディタ
BloggerのWebエディタは正直微妙なのでVisual Studio Codeで下書きして画像挿入と仕上げ確認をBloggerでやっています。
BloggerのエディタはVSCodeがおすすめQooQの導入
QooQ未導入の方はまずこちらを参考にQooQを適用してください。
Blogger のテーマを QooQ に変更してみたカスタマイズまとめ
随時更新していきます。参考にさせていただいたサイトをあわせてのせてます。こう見るとだいたいいつも同じ人のサイトを参考にさせていただいているのがわかりますw
自動目次を追加する
自動目次はこちらを参考にしました。幅を自動から100%に変更しています。
追加でカスタマイズしました。現在は幅と左右のマージンをautoにしています。文字が少ないときの余白が気になるのとスマホでの見易さを重視した結果です。いずれカスタム内容を紹介したいと思います。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）鉛筆アイコン、更新アイコン、最終更新日を追加
投稿日の前に鉛筆アイコンを設置。投稿日の後ろに更新アイコンと最終更新日を追加しました。
QooQに最終更新日 | 鉛筆アイコン | 更新アイコンを追加する【Bloggerカスタマイズ】ソートできるリスト型HTMLサイトマップ
タイトルと投稿日で並び替えでき、ラベルでフィルターできるサイトマップです。
【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】 【Blogger】ソートできるリスト型HTMLサイトマップ【カスタマイズ編】記事リンクのホバーアニメ化とリンク範囲の拡大
カードが浮き上がるのと、リンク範囲がカード全体になります。少しラベルの間隔と形状を調整しました。次のリスト化をする前にこちらを先にした方がわかりやすいです。（参考記事の順番のため）
【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】トップページをリスト化
QooQのトップページは2列表示でサムネが大きいのが気になっていました。そこで見つけたのがこちらの記事。スッキリした印象になりました。サムネサイズや文字サイズを調整しています。
【 QooQ カスタマイズ 】 トップページの記事一覧をリスト表示にしてみたよ！コメント吹き出し化
こちらのサイトのコメントいいなと思い使用させていただいています。完全にそのまま使用中です。コメントはありませんがw
【QooQ 他】コメント欄のデザインカスタマイズページ最上部と最下部にジャンプするボタン
ちょくちょく見るジャンプボタン。私もマネさせていただきました。色と透過を自分のブランドカラーに合わせて調整しています。
ページトップに戻るボタンの設置(ページ最下部へ飛ぶボタンを追加しました)SNSボタンの変更
QooQデフォルトでも良かったのですが勉強ついでに変えてみました。記事の状態では丸アイコンなのでborder-radiusを調整して丸みを帯びた四角にしてます。
【QooQ】オリジナルSNSシェアボタンの設置ソースコードを色付きで表示する
highlight.js を導入しました箇条書きボックスを追加する
リストと番号付きリストをそれぞれCSSに準備しました。以下のサイトを参考にさせていただきました。違うアイコンに変更したのですが、Font Awesome 5はfont-weightを指定する必要があり、そのままだとアイコンが出ませんでしたので注意が必要です。
Freeの場合はSolidを指定する必要があるので、font-wight:900;を挿入します。
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれにリンクをカードにする
ブログカードはEmbedlyというサービスを使用しています。設定と使い方を以下の記事にまとめています。
無料版EmbedlyでBloggerにブログカードを埋め込もう 無料版EmbedlyのCSSをカスタマイズしよう引用符ボックスを追加する
引用符のCSSはこちらを参考にしました。QooQの引用符CSSと被っているので使用時にはQooQ側を消す必要があります。
CSSで作る！魅力的な引用デザインのサンプル30（blockquote）対処方法はこちらの中盤に記載しています。競合部分を削除してください。
テンプレートQooQ、引用符ボックス、目次自動生成を使ってみた【初投稿テスト】フッターのカスタマイズ
フッターにラベルなどを追加して見た目をカスタマイズする方法です。
【Blogger × QooQ】フッターにラベルとページリンクを追加｜見た目をカスタマイズTwitterの中央揃え
TwitterはWebページから埋め込み用のコードを取ってこれますが、そのままだと左揃えになってしまいます。CSSで中央揃えにします。
【Blogger】Twitterの埋め込みをCSSで中央揃えする方法似たような状況のブログ
最後に
いかがでしたか？新しいカスタマイズなど随時更新していきます。
何かご不明点ありましたら気軽に連絡ください。
0 件のコメント:
コメントを投稿