HTMLに触れはじめて早20年。
Blogger使用歴も、かれこれ10年以上経とうとしているみいです
あれ？なんかその割にはなにも進歩してな……？
そんな訳で、いろんな知識をアップデートするためブログを一新。
今回は大人っぽいチューリップをイメージした配色にしてみました。カワイイよ。
初期の頃は海外向けばかりで(そもそも海外のサービスだから仕方ないけど)、なかなかカスタマイズもしにくかったBloggerさん。
魅力的な部分がたくさんあるにも関わらず、国内ではアメブロとWordPressのシェアがかなりの割合です。
ただ、昔に比べるとBloggerもかなり伸びたかなあと。
日本語のテンプレートもかなり増えて、カスタマイズがとてもしやすくなりました。
今回はそのなかでも、ラムネグさんが作成された「QooQ」というテンプレートを使用させていただいています。
このページでは、自分用のメモも兼ねて、カスタマイズ時に参考にさせていただいたサイトをまとめました！
ナビゲーション関連
ナビゲーションバーのリンクにhoverでアニメーションを追加
下線が文字の中央からにょきっと伸びるアニメーションを使用しました。
このアニメーションとてもよく見かけるんですが、動きがかわいいんですよね。
リンク要素のhover時に下線をCSSでアニメーション表示させる方法 | てらこやわーく
パンくずリスト関連
トップページのパンくずリストを非表示にする
トップページにパンくずリスト表示してるのってあまり見かけないし、ある意味もあんまりないかなあと思うのでサクっと非表示にしました。 【Blogger/QooQ】トップページのパンくずリストは廃止したい | 勉強でもするか
記事一覧の表示部分(トップページ)関連
記事一覧でアイキャッチ画像がない場合デフォルト画像を表示
記事内に画像がない場合、トップページも味気ない感じに。
見た目も高さがバラバラになってしまって少し不格好なので、高さを揃えるためにもデフォルト画像が表示されるように設定しました。
【Blogger/QooQ】トップページに表示させるサムネイル無し記事にデフォルト画像を表示させる | 勉強でもするか
記事一覧のタイトルの長さを固定化
アイキャッチ画像の件と同じく固定化。
タイトルがあまりにも長すぎるとちょっと不格好なので、ある程度の長さになると省略されるように設定しました。
【Blogger/QooQ】トップページの一覧に表示される記事のタイトルの長さを固定値とする | 勉強でもするか
記事一覧のリンクの範囲を拡大
スマホが普及してからは、リンクが広い方が断然いいなあと思うようになりました。
初期のままだとアイキャッチ画像とタイトルの部分にしかリンクがないため、日時や余白部分をクリックしても機能するように変更しました。
【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】-インドアな日々
記事一覧の投稿日時の表示形式を変更
デフォルトの表示形式は好みじゃないので変更しました。
しっくりくるのは、やっぱりよく見かけるスラッシュかピリオドでの区切りなんですよね。
まどうぐ工房: 投稿日時の表示形式を変える【Blogger テーマコーディング】
前後の投稿リンクの代わりにページナビを表示
これがないとちょっと不便だなあと思う機能のひとつ。
Bloggerにはページナビが標準で装備されていないので、リンク先を参考にしてページナビを設置しました。
番号付きページナビウィジェット | ふじろじっく
記事表示部分(個別の記事ページ)関連
記事の最終更新日を表示
読者側としてはあった方がありがたいので、欲しかった機能のひとつ。
まったくアップデートされていない、いつの情報だよってツッコミたくなるようなページもたくさんあるので情報を扱うページには設置しておいてほしいなあと。
【 QooQ カスタマイズ 】 Blogger ブログで最終更新日を表示させたい-インドアな日々
記事のもくじを自動で生成
これもあった方が断然ありがたいので、設置したかった機能のひとつ。
スマホが普及して1ページあたりの文章量も増えてるので、電子書籍感覚で読めるページは読みやすいなあと思っています。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）-スケ郎のお話
関連記事を表示
QooQはデフォルトで関連記事が表示されるように作成されています。
ですがBloggerの仕様変更で、配布されているテンプレートのままでは関連記事が表示されなくなってしまったそう。
応急処置として下記のページで公開されている方法で表示されるようになりました！
【blogger】QooQ関連記事でない、の応急処置方法
関連記事のデザインを変更
初期での表示はサムネイルが円形表示。
他の画像と同じように長方形で表示をしたかったので、下記を参考に変更しました。
【QooQ】関連記事のサムネイル画像のサイズを変更する方法【カスタマイズ】-テキストエディタを作るブログ
前後の記事へのリンクをサムネイル付きのタイトル表示に変更
Bloggerの設定では「次の投稿」「前の投稿」といった表記でしかリンクが作成できません。
味気ないし、ユーザーにもあまりやさしくないのでタイトルとアイキャッチ画像が表示されるように変更。
Bloggerにサムネ画像付きページャーを導入する | IB-Note
サイドバー関連
人気の投稿に表示されるアイキャッチ画像のアスペクト比を変更
文字なしの画像や写真であれば、初期の正方形の方が記事タイトルも表示させやすくてよさそうです。
でも、文字入れしている画像は変にトリミングされてしまうので長方形に変更。
Bloggerの人気の投稿の画像を正方形から長方形に変更する方法。 | かせむずnet
フッター関連
コピーライトの最新年号を自動で変更
年に一回といっても書き換えるのが面倒なのでサクっと自動で変えてもらいます。 GoogleやYahoo! JAPANでさえ間違ってる、Copyright（コピーライト） の正しい書き方 ? 2016年版 | hajipion.com
その他
サイトマップを作成する
更新頻度も記事数も少ないなら手動でもいいんですが、頻度も記事数も多いってなってくると面倒なので自動化。 HTML サイトマップウィジェット (2020/08/07 お知らせを追記しました) | ふじろじっく
スクロールするとトップへ戻るボタンを表示
これも設置しておいてほしい機能のひとつ。
インターネットが定額制になって長いページが当たり前になってきたので、ないとちょっと不便。
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ