最近のカスタマイズまとめ (2020/12)

2020/12/21 ｜2023/09/06 ｜2

1カラム化以降、特に大きな変化はないですけど、相変わらず暇さえあれば細かい所はちまちまと弄ってますので、メモ程度に纏めておきます。

翻訳ガジェットを設置

最近よくコメント頂く韓国人のBINUBALLさんのブログで紹介されたためか、韓国からのアクセスが増えてきましたので、試しに翻訳ガジェットを設置してみました。

海外からのアクセスは以前から結構ありましたけど、欧米や中東あたりからのリファラースパム混じり？のアクセスと違って、純粋に閲覧目的で来られてると思うので置く価値はあるのではないかと…(活用されるかどうかはわかりませんが)
そのままだとちょっと浮いてしまいますのでテーマに馴染むようにプルダウンメニューのデザインを変更。少しでも読み込みを軽くするべく一部のスクリプトをインラインに変えてあります。

BINUBALLさんのブログ

Calculator & Recorder
블로그의 테마를 교체했습니다
새로 교체된 테마 https://binuball.blogspot.com/2020/10/blog-post.html 위 게시글에서 Contempo Light에 글 리스트를 추가한 상태로 블로그 글을 쓰려 했지만, 여전히 스스로 만든 테마에 미련이 남...
https://binuball.blogspot.com/2020/11/blogger-theme-replace.html

BINUBALLさん、自作テーマを作るに当たって、Blogger Laboさんのテーマ作成解説記事や、当ブログの自動目次スクリプトと番号ページャーのカスタマイズ記事を参考にされたとのこと。Blogger に関する情報は日本のほうが豊富なようです。

こちらのオリジナルテーマ、非常にシンプルでいい感じですね。薄いグレーの背景とか私好みです。
こっそり作り始めたものの面倒くさくなってきて目下絶賛放置中の我がオリジナルテーマもそろそろ手を付けないとな(~_~;)

パンくずリストを廃止し、代わりにステータスメッセージ機能を実装

ステータスメッセージとは、Blogger公式テーマにはデフォルトで付いてる機能で「ラベル〇〇の投稿を表示しています」「〇〇に一致する投稿を関連性の高い順に表示しています」などのメッセージを自動的に表示させることができます。検索結果では「関連度順」と「日付順」の選択オプションも表示されます。

この機能を有効化するには HTML編集で以下のタグを追記します。(テーマによって適切な挿入位置が異なります)
QooQ の場合は <b:include data='posts' name='mybreadcrumb'/> の下に置くと、パンくずリストの下に表示されます。

HTML編集は必ずテーマのバックアップを取ってから行って下さい。

<b:include data='top' name='status-message'/>

ところでパンくずリストですけど、ラベルが階層構造になってないBloggerに果たして必要なのかなって疑問に思いつつも使ってきましが、このステータスメッセージを実装したことによってますますパンくずリストの必要性を感じなくなってきましたので、思い切って廃止しました。
少なくともウチではデメリットとかはないと思いますので(^^;

ラベルの背景をラベル(タグ)風デザインに

プルダウンにしていたラベルウィジェットを一覧表示に戻したのですが、ついでにデザインを変えてみようと思い、ブログ内全てのラベルリンクやラベル表示の背景をCSS疑似要素でタグっぽいデザインで統一してみました。上記ステータスメッセージのラベル表示や全記事リスト(サイトマップ)内のラベルもちゃんと変えてあります。
ただの長方形だとつまんないし、かと言って横に FontAwesome のタグアイコンを付けるのはちょっとベタな気がしたので無駄に凝ってみた次第ですw
疑似要素で背景の形を変えるやり方はググればいくらでも見つかりますので自力で調べてみてねw

表示崩れが…

一応自分的に満足のいくデザインにできたものの、環境(特にフォント?)によっては三角部分のズレなど多少表示が崩れる可能性もあるかもなと思っていたら、なんと多少どころではない大崩れしている箇所があることが先述のBINUBALLさんのコメントで判明しました(・・;)
当方の環境では問題なかったのでまったく気づきませんでしたが、スクリーンショットを見せて頂いたお陰で原因を特定し無事修正することができて本当に助かりました。ありがとうございます！

現在は疑似要素はやめて CSS clip-path でラベルデザインを実現しています。