EDIT

最近のカスタマイズまとめ (2021/09)

｜2024/04/16 ｜6
アイキャッチ

ここ最近の当ブログのカスタマイズや変更点についてまとめておきます。

機能的な変更点

リアクションボタンの廃止

廃止された Blogger 標準のリアクション機能の代替として ShareThis のリアクションボタンを導入していましたが、8月下旬頃から ShareThis のサーバーが400エラーでボタンが出たり出なかったりと不安定な状態が続いていたため一時的に非表示にして様子見していたのですが、結局思い切って完全に外してしまいました。

スクリプトに document.write() が使われていたり、読み込みも結構重いため PSI スコアへもかなり影響するということで段々悩ましく感じてきてた所だったので、ある意味いいタイミングだったかもしれません(^^;

ボタンのデザインもイマイチでちょっと浮いてる感じだったのでそういう点でもスッキリできてよかったですw

それにしてももうちょっといい感じのデザインでお手軽なリアクションウィジェット、どっかにないかな…

アーカイブウィジェットを復活

(少なくともうちでは)あまり必要性を感じてなかったのと、Blogger 標準の JS を無効化したため機能しなくなったこともあって廃止していたアーカイブウィジェットですが、結局また復活させてみました。コンパクトなプルダウン式ならフッターに置いても別に邪魔にはならないし、毎月どのくらいのペースで更新してるのかがひと目で確認できるのもいいかなと思ったもんで。実は密かに「最低月1本は更新する」というノルマを自分に課しているのですが、一応それが継続できているというのがおわかりいただけると思います(^^;

JS 無しでプルダウンメニューを動かす

Blogger 標準の JS なしでアーカイブウィジェット(プルダウンメニュー)を機能させる方法ですが、こちらの mizusame さんの記事に詳しく書かれていて参考にさせて頂きました。

ファビコンmizusame
サムネイル
【Blogger】プルダウン型ブログアーカイブのカスタマイズ（標準JS不要）
Bloggerに標準搭載されているJavaScript（widgets.js）を無効にすることで、ブログを高速化できます。 しかし、一部のウィジェット（ガジェット）が機能しないなどの弊害が起きます。 その一例がブログアーカイブウィジェットです。 標準JSを無効にすると、...
https://mizunosame.blogspot.com/2021/06/blogger-pull-down-archive-menu.html

ちなみに後になって思い出したのですが、onChange='location.href=value;' で動かすプルダウンメニュー、私も以前調べてて、この記事内で使ってたんですよね…すっかり忘れてましたw

ファビコンふじろじっく
サムネイル
旧ブログのアーカイブ
旧ブログ記事アーカイブを公開
https://fujilogic.blogspot.com/2020/01/fujilog-archive.html

年月表記を日本式に

Blogger のアーカイブウィジェットで気に入らない「年月表記」仕様ですが、日本式に表示させるカスタマイズ方法をこちらの「長期ひきこもりの雑ブログ」さんが解説されていますので、参考にさせて頂きました。
※こちらの記事のカスタマイズをそのまま適用すると表示に不具合が生じるらしいのですが、上記の「うたた寝ノート」さんの記事に改善方法が書かれています。

ファビコン長期ひきこもりの雑ブログ
サムネイル
BLOGGERアーカイブガジェット日付表示変更の完成版
アーカイブガジェットの日付表示を変更する方法について自分の中では確定したので再び記事にしたいと思います。
https://hikikomorisos.blogspot.com/2020/12/blogger_12.html

尚、こちらの記事の内容は専門用語も多くて初心者にはやや難易度高いかもしれません(^^;

2022/03/05 追記: 別のカスタマイズ方法に変更しました

こちらの「Google Blogger 問題解決」さんが表記を置き換えるスクリプトを公開されましたので、こちらのやり方に変更しました。上記のカスタマイズはウィジェットのコードを改造する必要がありますが、こちらは JavaScript を設置するだけで実現できます。

ファビコンBloggerテンプレート自作カスタム
サムネイル
Bloggerアーカイブを年月表示に変える
「3月 2022」「March 2022」を「2022/03」の年月表示に変えるjavascriptです。 代表的な公式テンプレートを例にします。Emporioはwidgetversion2、Simpleはwidgetversion1です。 基本的にはリンクの「https:...
https://googlebloggertrouble.blogspot.com/2022/03/bloggerarchivetitle.html

当ブログではスクリプトを少しだけ改造して「2022年03月」というような表記になるようにしています。

参考までに改造版コードを置いておきます。
※公式シンプルや QooQ 等のプルダウン menu 用のコードです。

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded',setBlogArchiveTitle());
function setBlogArchiveTitle(){
  let objlist=document.getElementById('BlogArchive1').getElementsByTagName('option');
  for(let i=1;i<objlist.length;i++) objlist[i].innerText=objlist[i].getAttribute('value').split(location.hostname)[1].slice(1,-1).replace('/','年')+'月 '+objlist[i].innerText.split(' ')[2];
}
/*]]>*/
</script>

デザイン的な変更点

フォローボタンをモノトーンに

これまではフルカラーの SVG を使ってましたけど、先述のリアクションボタン同様ちょっと派手で浮いてるような気がしてきたので、思い切ってクールな感じのモノトーンにしてみました。HTML 的にも、インスタのデザインがシンプルになったことで SVG コードが半分以下に減ったというメリットもありました。人によっては地味に見えるかもしれませんが、ブログ全体のバランスが取れたような気がして自分では気に入ってます。

プロフィールウィジェット変更前
Before
プロフィールウィジェット変更後
After

ちなみにプロフ画像は CSS clip-path で右側を斜めにカットにしています。

見出しを太字に

h2～h4 の見出しを太字にしました。デザイン的に太字があまり好みでなくて、記事中の強調部分以外では基本的に太字は使わないようにしていたのですが、なんとなく試しに見出しだけ太字にしてみたら意外と見やすいなと感じたのでここだけ取り入れてみました。

フッターウィジェットのタイトルを非表示に

見出し太字化のついでにウィジェットタイトルも太字にしようかと思ったものの、フッターに関してはむしろウィジェットタイトルが無いほうがスッキリして良さげだったので非表示にしました。別にタイトルがなくてもウィジェットを見れば何かわかりますよね(^^;

記事内のウィジェットタイトル(関連記事とかコメントとか)に関しては、仕切り線の代わりという役目もあるので残して、太字化ではなく文字サイズを大きくしました。

最後に

またある程度カスタマイズ箇所が溜まってきたら纏めたいと思います。

カスタマイズに関してご質問があればお気軽にコメントしてください。
リアクションの替わりに「いいね」の一言だけでもどうぞw