Blogger改造あれこれ

2024年6月18日

Blogger 雑記

なんとなく当ブログのデザインをいろいろと変えてみたので備忘的にまとめ。

テーマカラー変更

単に色を変えただけなんだけど、キーワードを入れるとそれに合ったテーマカラーを教えてくれるAIなんてものがあったので使って出てきた色に変えてみた。
芸能のライトグリーンとダブらないかなと思ったけど結構いい感じ。
そこはかとなく抹茶感のあるニューカラーとなった。

アイキャッチ画像事情

問題集ページで、画像問題があると記事のアイキャッチ画像が問題で使ってる画像になってしまうのでデフォルト画像を非表示で仕込んでるんだけど、今まではリンクが入っちゃってたのを削除。
これは問題を追加するタイミングで順次対応してるのでまだ途中。

ラベルの数字の色

サイドバーのラベルのところに、そのラベルの記事が何件あるか数が記載されているんだけど、数字の部分だけなぜか灰色で視認性がわるかったので白に変更。

シェアボタン

今回一番改造した部分かも。
ここはQooQっていうBloggerのテンプレートを使ってて、そこについてたシェアボタンをそのまま使ってたんだけどtwitterをXに変えるだけじゃなくてちゃんとしたアイコンにしようと思ってがっつり変更。
企業アイコンって余白をこのくらい取れとかいろいろ規約あるのよね。

カテゴリボタン

やってることは地味だけど変更に苦労した項目。

記事の下部分にある○○カテゴリってボタンが中央揃えで1つずつ縦配置になってるのが微妙だったのでまず横に並べるようにしたのが変更1つ目。CSSの部分をいじりまわして試行錯誤しながら調整。
内容を理解して進めたわけじゃないのでもう1回やれと言われたら同じくらい時間かかりそう

「カテゴリ」って4文字も使うのだるいなと思ってしおりマークに変えようと思ったのが変更2つ目。
fontawesomeってとこからアイコンを使うためにheadの中にURL貼り付けたあとは各アイコンのコードを入れるだけだったので仕組みがわかれば応用がいろいろききそう。

リンク範囲

閲覧上だいぶ重要な変更だったかも。
各記事のリンク、なんとアイコンか題名の文字をクリックしないと飛べない(枠内の白いところは反応しない)というイラッとする仕様だったことに気づいたので枠をリンク範囲となるように変更。
もちろんタグ部分は別になるようにレイヤーの順番を調整済み。

サイドバー順

問題検索で使うことが多いであろうブログ内検索を上に持っていったり順番入れ替え。

その他

エラーにはならないけど好ましくないらしいタグの使い方をちびちび直したり。
というのもSearchConsoleを久々に確認したら蹴られてるページがだいぶ多かったので。
もともとはこれを直そうとしたのが他もいろいろ気になって上述の変更点もろもろ手をつけてしまった感じ。
某20万問載ってるところとは比べるまでもないけど今までよりは閲覧増えるといいなと。

ブログ内検索

自己紹介

QooQ