ここ最近の当ブログのカスタマイズや変更点についてまとめておきます。
CONTENTS
機能的な変更点
リアクションボタンの廃止
廃止された 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
コメントを投稿
別ページに移動します6 件のコメント (新着順)
ふじやん
ののさん、こんばんは。
デザインをお褒め頂きありがとうございます(^^)
フッターもウィジェットのタイトルを消してさらにスッキリしていい感じになりました。
絵文字みたいなリアクションボタン、海外ユーザーはああいうデザインが好きなんでしょうかね(^^;
せめてデザインの選択肢(モノトーンとか文字だけとか)が用意されてればいいんですけどねえ。
古い記事とかに思いがけず「いいね」が付いてたりすると嬉しいしモチベーションも上がりますよね。
のの
こんばんは。
ブログとてもスッキリまとまったデザインでとてもいいと思います。
私も、ShareThisのリアクションボタン以外にもう少し地味なのがないかなぁ..と探したりしました。
ろくに訪問者もいないんだけど...、それでもたまに「いいね」とポチッとされるとやる気が出たりするのです。(^-^)
ふじやん
Fumaさん、こんにちは。
IB-Noteさんで ShareThis ボタンやFC2拍手があった頃はく押させて頂いてましたが、いつの間にかなくなっていたのはやはり同じような理由で外されてたんですね(^^;
もし良さげなのを見つけたらお知らせしますね(^^)
フォローボタン、カラフルでも少し淡めにしてみることも考えましたが、やっぱりモノトーンの方が好みでなんとなく落ち着きます(^^;
ちなみに記事には書きませんでしたが SNS ボタンの色は若干淡い感じに変えてあります。
Fuma
こんにちは。ShareThis、機能としてはとても良いんですが、時々不安定だったり重いのが玉に瑕という感じですよね。私は以前FC2拍手も使用していましたが、正確にカウントされないことがあり、デザインも気に入らなかったので結局外してしまいました。いい感じのデザインでお手軽なものが欲しいという意見、激しく同意です(^^;)
ちなみにフォローボタンのほう、以前のデザインも鮮やかで好きでしたが、今のモノトーンスタイルも似合ってて良いですね。シックな感じで素敵です。
ふじやん
ヒデヒデさん、こんにちは。
ご提案ありがとうございます。Web拍手はたまに見かけますね。一応詳細調べて検討はしてみますが…ここ最近は省けるものは極力省いてシンプル軽量化することがマイブーム?になってきてるもんで、当分は今のままで行くつもりです(^^;
ボタン名が重なる件に関しては Instagram の文字数が多いせいだと思いますが、ブラウザ幅を縮めてもギリギリ重ならないように微調整はしたつもりですけど、環境によっては重なってしまうんですね…
フッターが3列→1列に切り替わるブレイクポイントを変えるという対処法もありますが、とりあえず手っ取り早い方法で文字数減らして Insta にしてみましたw
ヒデヒデ
お手軽なリアクションウィジェット…web拍手ぐらいしか思い浮かばないですねぇ(web拍手については『web拍手って何?』参照で)。
私も何か設置したいなと思いつつ、今の所何も設置してなかったりします。
ランキングバナーは何か違う気がするし(記事の良し悪し関係なく、律儀に毎日クリックする人とか、稀にいるんで…)。
私はブラウザをあまり広げてないようで、フォローボタンの文字が重なって表示されてしまってたりします。まあ意味は分かるから問題ないですが(^_^;)