ごきげんよう。
本記事はBloggerテーマのカスタマイズ録２ということで、前回から色々変えたので変更点などを紹介していきます。
前回の記事：
https://www.gotyablog.com/2022/03/blogger-customize1.html
4年も経っとるし…
主な変更点
・記事まとめページ設置
・ダークモード実装
・Webツール作成
・フッター整理
大きいカスタマイズポイントはこの辺です。順に説明していきます。
カテゴリツリーの設置
PCなら右側、スマホなら下側にあるコレです。
左側に出せるメニューやPCの上部メニューバーからも全カテゴリに飛べるのですが、何だかんだこういう古典的なのが一番何があるか把握しやすいやろなってことで、HTML手打ちで実装しました。
仕組みはごく単純で、HTMLブログパーツ内に
<![CDATA[<ul>
<li><a href="https://www.gotyablog.com/search/label/PC%E3%82%B2%E3%83%BC%E3%83%A0" style="display: block;;"><b>PCゲーム</b></a>
>
<a href="https://www.gotyablog.com/search/label/Minecraft" >Minecraft</a> /
…</li>
以下省略]]>記事まとめページ実装
トップページにあるコレです。
先駆者の方がいなかったので中々大変でしたが、終わってみればやったことは単純で、
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- ここにHMTLソースコードを挿入(トップページのみ表示) -->
<div class='section' id='main-row'>
<div class='wrapfullpost card'>
ここに内容ここに出したいものを書くだけでした。今回はリンクを指定した画像を2枚横並べ（スマホなら縦）にしたかったので、flexコンテナ方式で画像を配置しています。
まとめページの中はある程度分類したものをブログカードで並べているだけですが、こういったまとめページがあると検索的にも読者的にもかなりプラスになるそうです。
ダークモード実装
左側メニューやPCの右側メニュー最上部（スマホなら下の方）にあるこういうのです。
ボタンは自作ですが、JavaScriptの機能部分はこちらを参考にしています（というか大体パクってます）
CSS変数を使ったダークモード対応・切り替え実装 | Siteseeing 福岡市在住のWebサイト制作フリーランス
コード例 HTML CSS /* 通常のスタイル */ :root { --c-font: #
色の変更についてもダークモード実装前は１つ１つにカラーコードで色を割り当てていましたが、実装を期にカスタムプロパティ形式へ大工事しました。
:root[data-theme="light"]{
--background-color-header: #fffebb;}
:root[data-theme="dark"]{
--background-color-header: #2d2d25;}
header{background-color: var(--background-color-header);}
ヘッダー画像との格闘
１つめちゃくちゃ苦労したのがヘッダー画像の切り替えです。
ダークモードに合わせてヘッダー画像も変わるようになっていますが、単に表示する画像を切り替える処理をすると、読み込む一瞬は画像がない判定になってレイアウトが大きく崩れたり画像2つ分のスペースができたりと、実用的ではありませんでした。
試行錯誤した末に上手くいったのが、「最初から２種類読み込んでおいて片方は透明にし、ダークモード中は不透明にする」でした。
:root[data-theme="light"]{
--light-header-image-opacity: 1;
--dark-header-image-opacity: 0;}
:root[data-theme="dark"]{
--light-header-image-opacity: 0;
--dark-header-image-opacity: 1;}
.light-header-image{ opacity: var(--light-header-image-opacity);}
.dark-header-image{ opacity: var(--dark-header-image-opacity);}
実は、常に透明のダークモード仕様のヘッダー画像が前にあります。ライトモードでヘッダー画像を新しいタブで開くと分かるはずです。よければやってみてください。
この透明と不透明を切り替える処理もいくつかあったのですが、他の方式だとカスタムプロパティで切り替えられなかったり謎のスペースができたりと大変でした。
難点はヘッダー画像を２つ読み込んでしまうのでページが僅かに重くなるという部分ですが、ここは致し方なかった。
さらに他サイトでは少ない処理として、全ての画像にグレースケールを適応することで、暗い所でも眩しくないようにコントラスト・輝度を落とすようにもしています。
作るの大変だったので是非使ってね。
Webツール作成
ふと作ってみたいなと思い立ったので作りました。
ごちゃ混ぜ絵文字スロット
ゲーム中心の雑記ブログ。価値あるものを広めてゆきます。
Javescriptの知識はほぼ無いので、やりたいこととエラー修正をAIに指示しまくって作成しています。Blogger側のデザインと干渉する部分だけHTMLを手修正してますが、そのくらいです。
爆速でツール作れるのすごい。
ツール一覧ページも（執筆時点で１つしかないですが）作ってもらいましたが、ページ内でもこんなお洒落な表現実装できるんだな～って感動しました。
ごちゃっとWebツール置き場
ゲーム中心の雑記ブログ。価値あるものを広めてゆきます。
もういくつか作ってみたい。
フッター整理
相互リンクのサイトが全部死んだので、相互リンク欄そのものを消しました。悲しいのう
相互リンクする気が無いわけではないので、いいリンク先があればまたやります。いいサイトがあればね…。リンク希望の方はお問い合わせください。
フッターについては<footer-sec>みたいなのがあるので、その中のHTMLをレイアウトに追加したHTMLブロックの記述を参考にしながら変えています。
うちのブログはカスタムしすぎてレイアウト画面がぶっ壊れてるので直接HTMLをいじりまくってます（もうBloggerじゃなくてよくね？） 。
また、ひっそり右下にコピーライトを明記したりしました。
著者・当ブログについての通りブログの歴史は2011年まで遡れるので、コピーライトも2011-にしています。なんか歴史があってかっこいいっすよね。
その他の変更点
前回実装したボタンで開く形式の著者情報を常時表示にしたり、PCの上部メニューの表示をコンパクトにしたり。
ページの軽量化についてはもうできることを全てやったので諦めています。そこまで重くないしいいかなって。
今後の実装目標
正直だいぶ満足していますが、一応いくつかあります。
bloggerから静的サイトへの移行
本末転倒ですが、最近は静的サイトというhugo/Github Pageを活用した軽量爆速独自サイトを作る方法があるそうなので、軽量化とカスタム性の限界に達しつつあるbloggerからの移行を検討しています。
そもそもうちのブログの移転周期が丁度5年なのですが、安く安定したサイトを作る環境の進化が5年くらいなんだと思います。今年でbloggerに来てから5年くらいですしね。WordPressは維持費が高すぎるんで使いません。
まあ超大作業なのですぐにはしないと思いますし、Bloggerに軽量化以外の不満はないのでサ終するまで居座る可能性も十分あります。
軽量なコメント欄
まだ諦めていません。cusdisという超軽量かつdisqusからの移行を第一目標としたサービスを見つけたのですが、使おうとしてもインポートボタンがどこにも見当たらず。
プロジェクト自体生きてるのか分からない感じだったので泣く泣く断念。
スマホ表示のバグ修正
前回「記事下部にラベルを出す」を目標にしておりまして、結果的に実装はできましたが一部のスマホ環境（というか自分のスマホ）でバグります。
実装方法は…だいぶ昔なんで忘れました。同じ疑問を持った人の解決にならなくてすまない。
ラベル表示の他、SNSシェアボタンも環境によって欠けたりと微妙に不安定なので修正したいです。でも記事本体に影響はしていないので後回しになっちゃってますね…。iPhoneだと正常に見れてるはずなので。
現段階ではこのくらいですかね。デザインはもう十分だと思うので記事に注力していきたいです。
ここまでご観覧ありがとうございました！
