想うが儘にもの作り: 脱 bundle.css、シェアボタン自作、その他いろいろブログの改造

リダイレクトエラー問題への対処のためにブログに意識が向いたついでで、css の見直しなど色々やりました。

脱 bundle.css

今回いろいろと変更した中でのメインの作業です。

Blogger ではデフォルトで bundle.css という css があります。
　css を自作するなら始めから bundle.css を無効化しておくのが良かったのだけど、Blogger に移行した当時の私は Blogger の仕様がよく分かっていなかったために、bundle.css の効果よりも自作 css のほうが優先度が高くなるように記述することで対処していて、二つの css が混在する状況を作り上げてしまっていました。

参考

bundle.css を無効化する方法

Bloggerの表示速度を高速化する

シェアボタンを自作

ブログの内部的な見直しを始めた当初は予定になかったのですが、シェアボタンを自作できるということを知って、せっかくならやってみようと思ってやってみました。

この作業をした時点での Blogger のデフォルトのシェアボタンのメンバは、メール、Blogger、X（Twitter）、Facebook、pinterest の 5 つ。
　このメンバにも不満があったので、この機会にメンバも変更しました。

参考

テーマの xml を git 管理に移行

今回一番最初にやった作業。

テーマの xml をテキストファイルにコピペしてローカル環境で保存していて、ファイル名に変更日を含めています。

変更日はファイル名を見れば分かるのですが、変更した内容や変更した理由はファイルを比較しないと分からない状態で、頻度は少ないものの過去の変更内容を確認したい場合に不便な状態でした。

そこで、この xml ファイルを git 管理に移行して、コミットメッセージで変更理由を残すようにしました。

日付が h2 タグなのを div タグに変更

ベースとしたテンプレートがその記事の投稿日に h2 タグを、記事のタイトルに h3 タグを使っているのですが、投稿日の重要度は高くないので h 系のタグではなくして、記事タイトルを h2 にしたいとずっと思っていました。

この機会に変更を実施。

コメント部分の css を見直し

余白の設定やインデントの設定、返信ボタンの位置など色々と調整しました。

この一言で済ませていますが、労力的には脱 bundle.css や自作シェアボタンと同じくらいに大変でした。

mobile 専用の html 構造部分を削除（したけど復活する）

テーマの xml ファイルの中に、mobile 専用の html 構造を出力する部分があります。

このブログではレスポンシブデザインという、PC でも mobile でも同じ html・css を使用する方式を採用しているため、mobile 専用の html を出力する必要がありません。

そこで、テンプレート xml から mobile 専用の部分を削除したのですが、勝手に復活してきます。

mobile 向けの表示を調整

2024 年 03 月に section タグの入れ子の深さに応じたインデントをするレイアウトができるようにしたのですが、mobile で表示するとインデントが大きすぎていたため、mobile 表示でのインデント量を調整。

ページ内のヘッダ部分にあるおすすめ記事と、フッタ部分にあるプライバシーポリシーなどへのリンク部分の装飾線が mobile 表示で改行された時に不格好になってしまっていたため、調整。

その他、全体的な css の見直し

ページレイアウトから css の float をなくして、flexbox や grid に変更。

前のページ・次のページの部分を flex レイアウトに変更したついでに、前 or 次のどちらかがない場合でもホームが中央に配置されるように改良。

今回の色々を通して、Blogger のテーマ xml についても少し詳しくなりました。

参考

data タグ

Bloggerの<b:data>タグを利用する
 Bloggerのdataタグ一覧
 Blogger変数一覧

独自タグ

Bloggerテンプレートの文法
 【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ
 【Blogger】独自タグの活用方法まとめ

h1 タグの不在を修正

タイトル表示部分の仕様を理解していなかったことも影響して、テンプレートの xml では h1 タグが存在しているのに、実際に生成される html では h1 タグが存在しない状態でした。

これを修正したついでに、タイトル表示部分の xml から助長な記述を削除。元々はタイトル画像の有無などによって場合分けされていましたが、このブログでは画像がある場合のみなので、不要になる場合分けの部分を削除しました。

個別記事のページと記事一覧表示のページとで h1 タグの対象を変更

個別の記事ではブログタイトルは div タグにして、記事タイトルを h1 タグにしました。

トップページやアーカイブなど記事が一覧表示されるページではブログタイトルを h1 タグにして、記事タイトルを h2 タグにしました。

b:if を使って実装するつもりでしたが、b:tag の使い方を理解したのでこちらで実装。

h1 タグの不在を修正したついでにこちらの処理を実装。
　日付のタグを h2 → div に変更した時にこれもやろうかと思っていましたが、手間な気がして後回しにしていた結果、日付部分のタグを変更してからひと月くらい後にでの実装となりました。

参考

b:tag

Bloggerテーマの基礎知識 - <b:tag>要素について知ろう
 Blogger b:tag Tag

おすすめ記事

脱 bundle.css、シェアボタン自作、その他いろいろブログの改造