編集

Bloggerテーマを変更しました

2023/02/07

REBORNしたもののネタが増えてない件について

2022年8月にBloggerに切り替えて再スタートをしたものの、なにを書くのかを自問自答しているあいだに
秋がきて、冬になり、そして年が明けてしまいました。(サボりまくり)

年末年始の休みの間に、更新しよう!ということで、休み中にアップできませんでしたが、、ようやっと
Bloggerテーマの更新がひと段落したので、それをネタに書いてみようかと思います。

BloggerテーマをF-Lightブログカード版にしてみた

REBORN記事の次がテンプレートについてで、Bloggerのテーマのことを書きました。
そこでは、ベトナムの方のBloggerテーマである「VTrick」テーマを採用した話を書いています。
機能が結構あって、読書時間の表示とか偽のレーティング(表示)とか複数の広告枠のガジェットがあったりとか機能も豊富でした。
しかし、実際まだ数記事しか書いてないし、そもそも更新頻度がアレなので、機能豊富よりは基本が抑えられていて、シンプルかつ性能重視でいいんじゃないかと思い始め、昨年末ぐらいから休みの間にテーマを変えてみようかなとぼんやりと考えていました。

ということで、いくつかテーマを見てたんですが、やはり日本語で解説してるのがいいよねってことで探してみたところ、ちょうどふじろじっくのふじやんさんが自作されたF-Lightのテーマをカードレイアウト化する記事を見つけまして、おぉ、これでいいんじゃないかってことで採用し、非公開のサイトを作って置き換え作業を始めました。

ちょっとしたカスタマイズ

F-Lightテーマをそのまま利用しているのでなく、ちょっと改造しています。

1.ファビコン・Apple Touch Iconの設定

F-Lightオリジナルだと、Bloggerの設定画面のファビコンにお任せしてる風だったので、ファビコンとApple Touch Iconのどっちも設定するように変更してみました。
ZeRo∞Logの方のJetTheme側を参考にしたので、ZeRo∞Logの方もちゃんとApple Touch Iconも設定するようにもしております。(この際なので、ファビコンも作り直してみたり)

ついでに、このファビコンの指定サイズに合わせて、画像イメージを作成する関数であるresizeImage関数で各サイズのファビコン画像が出来るってことを理解。
そんなBloggerの関数を説明してくれているBloggerユーザのKissyさんのサイトを見つけたので、メモっておきます。 

Step: 【第3回】これでわかった!Bloggerの制御タグ・データタグまとめ

Step: 【第3回】これでわかった!Bloggerの制御タグ・データタグまとめ

bloggerのカスタマイズなどを情報発信しています。

2.問い合わせフォームをGoogle Docsで

ZeRo∞Logの方と旧テーマのときには、連絡フォームウィジットを用いた問い合わせフォームにしていましたが、今回せっかくなのでGoogle Docsでフォームを作って固定ページに設定するようにしました。
参考にさせていただいたのは、以下の記事ですが、問い合わせフォームの項目は非常にシンプルなもに修正しています。

Googleフォームで作成した問い合わせフォームをBloggerで表示する

Googleフォームで作成した問い合わせフォームをBloggerで表示する

Google フォームを使って作成した問い合わせフォームを、ブログのページやサイドバーなどに表示することができます。ここでは Google フォームで作成した問い合わせフォームを Blogger で表示する手順について解説します。

ちなみに、Google Docsは独自ドメインで利用しているGoogle Workspaceなので、ほかのサイトにあるようなフォーム画面の箇所が独自になっていて、以下のようなメッセージが表示されます。

このフォームは PETITPOWER 内部で作成されました。

3.HTMLサイトマップは前のカスタマイズを踏襲

HTML形式のサイトマップは、前回と同様にMy Blogger Labのスクリプトを流用しています。

詳細の説明ページは、以下のページです。

How to Add an HTML Sitemap Page in Blogger

How to Add an HTML Sitemap Page in Blogger

Want to create a sitemap page with links to all the pages on your Blogger site? Learn how to easily add an HTML sitemap page in Blogger in this guide

設置につきましては、下記の日本のBloggerユーザであるイチケンさんのサイトを参考しています。
但し、テーブルの項目名については英語になっているので、これを日本語化するためにJavascriptソースをオリジナルのものを参考にして、項目名だけを変更したものに置き換えているので、設置方法は最終的に独自になりました。
なお、現在の設置方法については、該当ページのソースを見てもらうのが一番良いかと思います。
ご要望があれば説明記事をアップします。

【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】

【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】

追記 2023.01.30

ここで一旦この記事を公開したところ、ふじやんさんからF-Lightテーマに合わせたHTMLサイトマップの記事をTwitterで教えていただいたので、さっそく入れ替えました。
オリジナルのMyBloggerLabのものより機能がちょっとアップされています。
F-Lightテーマに合わせてあるので、色合いとかダークモードへの対応もできていますし、ソートを表す記号表示(SVG)もあったりしてちょっと見やすくなっています。

【F-light】カスタム サイトマップ & 最新コメント ウィジェット (ダークモード対応 CSS 付きコード) | ふじろじっく

【F-light】カスタム サイトマップ & 最新コメント ウィジェット (ダークモード対応 CSS 付きコード) | ふじろじっく

F-light テーマのダークモード対応済み「サイトマップ」「最新コメント」コードを紹介します

ZeRo∞LogのサイトマップもこのF-Light版HTMLサイトマップの触発されて、ちょっと表示イメージを変えてみました。(F-Light版をそのまま利用するにはスタイルシートを修正しないといけないので、オリジナルベースでちょっと表示系を修正した程度にしています)

Adsenseとの連携

Bloggerの管理画面で収益メニューでAdsenseとの接続を実施しておくと自動的にAdsenseのJavascriptが入るようです。
というか、分かっていたつもりだったんだけど、、前のテーマのソースをよくよく見てみたらAdsenseのheadタグ前に挿入しておく構文を入れてたのに気が付いて取り外しました。
前のVtrickのテーマにも確かAdsenseの箇所があって、いろいろ設定してた記憶が・・・。

テーマ側でAdsenseの箇所がある場合は、収益の箇所は設定せずにテーマ側に合わせる方がよいのかも知れません。
F-Lightテーマでふじろじっくさん的には広告対応は一切してないと仰っておられましたが、
テーマ側でAdsenseの設定がない場合は、収益の箇所でAdsenseと接続しておいて、かつ自動広告が有効にしておけば、いい感じに自動的に広告が入るようです。、
なお、個別に特定の箇所に表示させたい場合は、HTML/Javasciptウィジットを追加して、広告コードを埋め込むことで対応できます。

ちなみに、記事内容表示の部分にマルチ広告のコードを埋め込んでみました。
この埋め込みは、記事表示後のSNSボタンとの間にいれたかったので、ウィジットではなくてテーマの中に直接埋め込んでます。

PageSpeed Insightsは諦め

F-Lightテーマに限らず、Bloggerテーマの説明には、PageSpeed Insightsで高得点であることが1つのポイントになっていたりします。

が、、しかし、AdsenseとかタグマネージャーとかGoogleアナリティクス4とか入れるとめっちゃ遅くなり、評価数字も落ちてしまいます。

計測結果で警告とか出てくる大半は、外部のJavascript系とかだったり画像だったり・・・。

ということで、Tag Managerいれたけど結局AdsenseはBloggerが勝手につけてくれるのはAnlyticsだけ使うことになるので1つならTag Managerあまり意味なくないかと思っています。

ついでに、スポンサードリンクのガジェット領域はGoogleアドマネージャーを使っています。
広告自体のコンテンツ表示には、Tag Managerは使えなさそう(まだ、ちゃんと理解できていないけど)なので、Ad Managerの読み込み部分は結局テーマ内に書いておく必要があるようです。

Google アドマネージャーがまだDFPがめちゃくちゃ遅かったころは、オープンソースのOpenX(現在とRevive Adserver)を使っていました。
ちょっと面白そうってことで手を出していましたが、アドマネージャーよりシンプルで使いやすかったです。
現在、自前のサーバはないので最新版の機能については不明ですが、自前の広告サーバを考えている方にはおススメの1つかと思います(ほかにあまり聞いたことないですけどね)

Bloggerテーマ変更とは

いろいろな公開されているテーマをベースに、自分用にアレンジするのはとても面白く、かつ、ちょっと学習要素もあって楽しいものです。

テーマそのものがBloggerユーザにとってのキーになるところなので、今後もテーマは触っていくはずですが、当面の間はベーステーマを変えなくてもいいかなと思っています。

あ、そもそもブログだけにテーマより記事を書け! って話もありますが・・・・(では、また次回に)