Mutter
編集

ZEROからF-lightへBloggerテーマ変更

｜2024/11/07

ZEROからF-Lightにテーマ変更

記事本文で使っている吹き出しをどう引き継ぎするのか

ZEROとF-Lightの違い等

テーマ変更する方の参考になれば幸いです

テーマ変更後のカスタマイズもこちらにまとめて紹介してます

ZEROからF-lightへ

吹き出し

まずは、一番最初にテーマ変更で悩んだところ

 吹き出し 

ZEROで吹き出しを使ってたんですが、それをどうやってF-lightに引き継ぐか、、、

吹き出しをそのまま引き継ぎとか無理だよなぁ。。。

なんて思いつつ聞いてみたら、、、

なんと出来るって！！　コードまで教えて頂きました！！


F-light カスタマイズ集 (随時追加予定) | ふじろじっく

F-light カスタマイズ集 (随時追加予定) | ふじろじっく

作者おすすめの F-light テーマカスタマイズを紹介します

ファビコンfujilogic.blogspot.com


さて、ZELO の吹き出し用 CSS の F-light への転用ですが、基本的には ZELO のクラス名(.entry-content)を F-light のクラス名(.post-body)に置き換えるだけでOKです。
あとはダークモードで白文字にならないよう、文字色を設定してやれば完了です。 
というわけで、F-light 用に最適化した CSS が下記のコードになります。
(アイコン画像URLはGOさんのブログのソースコードからコピーしました) 
これを /*==== ユーザー カスタム CSS ====*/ の直下にコピペして下さい。


教えて頂いたコードがコチラ

これがF-liteに対応したコードになります

   /* ---------- フキダシ */
.post-body .f-l,
.post-body .f-r {
  position: relative;
  width: 70%
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #000;
  background-color: #ffffe0;
  color: #111;
  z-index: 1;
}
.post-body .f-l {
  margin: 24px 32% 24px 0;
}
.post-body .f-r {
  margin: 24px 0 24px 32%;
}
.post-body .f-l::before,
.post-body .f-r::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 11px;
  height: 11px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background-color: #ffffe0;
  z-index: 2;
}
.post-body .f-l::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.post-body .f-r::before {
left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.post-body .f-l::after,
.post-body .f-r::after {
  position: absolute;
  content: "";
  width: 56px;
  height: 56px;
  top: -4px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.post-body .f-l::after {
  right: -84px;
}
.post-body .f-r::after {
  left: -84px;
}
.me::after {
  background-image:url(画像URL);
}
.you::after {
  background-image:url(画像URL);
}

オレンジの箇所の数値を変えて位置調整してください
画像URLに自分が用意した画像のURLを貼り付けてください 


<div class="f-r me">セリフ</div>
<div class="f-l you">セリフ</div>

記事作成の時にHTMLにこれを貼り付け

『セリフ』の部分を好きに書き換えれば吹き出し完成です


これで吹き出しが引き継がれます

吹き出しで書いた部分をひとつずつ変更していくなんて途方もない作業

仕事でもないのに絶対にやりたくない

これが解決しただけで俄然テーマ変更をやる気になりました

幾ら気に入ったデザインのテーマでも手直し作業が当方もないとやる気になりません

素人にはCSSやコードをコピペは出来ても理解できてないから作る事なんてできないから


テキストの背景色

テキストの背景色変更

これを多用してたんですよ

ダークモードにすると文字が白になるので黄色の潰しだと文字が見えなくなります

こればっかりは手直ししかない、、、


しかし、これも一括変換で引継ぎができるらしい

素人には想像もできない技がある。。。

背景色は無効にして、下線を太くしてマーカー風にしています。 pink はお好みのカラーコードや色名に変えて下さい。 
    .post-body b {
  background: none!important;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: pink;
  text-decoration-thickness: 5px;
  text-underline-offset: -1px;
}

今後太字指定された範囲も全てマーカー付きになります。

ちょっと条件付になりますが、この技を使いたい方もいるかもしれないのでアップしときます

自分は太字とテキストの背景色変更は別々に使いたいので手作業で直しました

全てマーカー装飾に変更完了。。。


バージョンアップ方法

F-lightはふじやんさんがバージョンアップしてくれています

バージョンアップする時にテーマを元に戻すでテーマを適用するとテーマカラーとかカスタマイズした物がリセットされて元に戻すの超面倒臭いのでバージョンアップするのが嫌になるんですが、、、

変更箇所（バージョンアップ箇所）だけを書き換えてカスタマイズ等はそのままでバージョンアップする方法です

BloggerテーマF-lightバージョンアップ方法～変更箇所だけ書き換え | Trekking from Kochi

BloggerテーマF-lightバージョンアップ方法～変更箇所だけ書き換え | Trekking from Kochi

BloggerテーマF-lightの変更箇所だけ書き換えのバージョンアップ方法

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


Google アナリティクスの設定

昨日のブログPVを見てみたら、、、

44

嘘でしょ！？

この数字は絶対にない！！

Bloggerの統計情報見たら600PVオーバーだったから44って数字は絶対にない明らかに異常な数値です

ブログ村のPVポイントとか見ても44なんて数字は100％ない


なにかがオカシイ！！

あっ、もしかして、、、

アナリティクスのタグ？？？

テーマ変更してからタグを貼ってなかったわ、、、

で

GA4ではBloggerの設定でID入力しても駄目です

テーマ変更HTML編集でタグを貼り付けてください

Bloggerの設定でID入力しても計測してくれません

2023年12月、Bloggerの設定でID入力だけにすると全く計測されなくなりました。Tag Assistantでチェックするとタグが０でなにもありませんでした。


これ全然頭になかった

 テーマ変更する方は気を付けてね！！ 


※追記／2024年8月現在
Bloggerの設定でID入力して設定、、、なんて記事がアップされていたのでGoogleが何か変更したのか？とBloggerの設定でID入力しHTMLからタグを削除したら計測されなくなりました。何も変わってません！！ 


追記

直帰率が異常に低いのに気が付きました。。。

直帰率が異常に低い～Googleの設定をチェックしましょう | Trekking from Kochi

直帰率が異常に低い～Googleの設定をチェックしましょう | Trekking from Kochi

離脱率が低くありませんか？ 二重登録していませんか？

ファビコンkochimountaingo.blogspot.com



Googleの評価

サイトの評価は上がりました

ページエクスペリエンススクショ

良好は0だったんですがテーマ変更で変化がでました

今までも突然良好が100％になったりと

Googleがなにかする度に変化がありましたが

今回は確実にテーマ変更の効果でしょう


パソコンサイト評価変更前

パソコンサイト評価変更跡
変更前 77、変更後 93
デスクトップ
※2024年8月現在、テーマカスタマイズ等をした結果


モバイルサイト変更前評価
モバイルサイト変更後評価
変更前 33、変更後 70
モバイル
※2024年8月現在、テーマカスタマイズ等をした結果


2023年12月追記

現時点で改善が必要もなくなり良好だけになりました

PageSpeed insightsのテストでもOKです

しかし、今までも突然悪化したり良くなったりもしてたのでGoogle先生はよくわかりません


現在、とりあえずこんな感じ

F-Lightは最初から機能満載でカスタマイズの必要があまりないですね

テーマカラーとかそういう部分をどう自分好みにするかくらいの話で終わると思う

最初からF-Lightにしとけば、どれだけ楽だったか、、、

当時はなかったから仕方ない、、、


F-lightでなにか解らなかったら↓に行きましょう

ふじろじっく

ふじろじっく

Blogger カスタマイズ、空写真、音楽、雑記 etc…広く浅く、好きなことを気ままに書いています。

ファビコンfujilogic.blogspot.com


カスタマイズ

マーカー装飾

HTMLだけでやるやり方を、これまた教えて頂きました


<span style="background:linear-gradient(rgba(255,255,255,0) 65%, pink 65%);">マーカーを付けたい文章</span>

辞書登録しようとしたら入りきらない、、、

前後で分けるとかして登録したらいいんですが、、、

CSSを使って短いコードで辞書登録できるようにして少し変更もしました


【HTML／CSS】ブログにマーカー(蛍光ペン)を引く装飾の使い方解説【サンプル付き】 - SIGA BLOG

【HTML／CSS】ブログにマーカー(蛍光ペン)を引く装飾の使い方解説【サンプル付き】 - SIGA BLOG

あなたはブログの装飾にはこだわらない方でしょうか？ それとも、思い立ったらHTMLやCSSをずっと弄り続ける？ あなたがどちらのタイプなのかは分かりませんが、読者のためにも簡単な装飾ぐらいは施していることでしょう。 例えば、テキストにマーカー（蛍光ペン）を引いたような装飾ぐらいは。 もしも使ったことがないのであれば、下記コードをHTML編集で使ってみてください。 HTMLコード

ここにテキスト

テキストに黄色いマーカーの…

ファビコンsigablog.com

参照したサイトはココ


CSS追加が良いか悪いかはわかりませんが、、、

辞書登録して一発で全文出てくるのは有難い


CSSがコチラ


.line-marker01 {
background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #ffc0cb 85%);
}

これを色変えて幾つか登録しておけば便利

ここに貼り付けます 
.line-marker01 {
background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0) 60%, #00ffff 95%);
}
.line-marker02 {
background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0) 60%, #ff56aa 95%);
}
.line-marker03 {
background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0) 60%, #FED900 95%);
}

自分はミズイロとピンクとキイロを登録

％の数値を変えれば完全なアンダーラインにもできます

色々イジって自分好みにしてください


記事本文で使うHTMLはコチラ

<span class="line-marker01">テキスト</span>
<span class="line-marker02">テキスト</span>
<span class="line-marker03">テキスト</span>

これを辞書登録しとけば記事書く時に楽ですよ

 ミズイロ のマーカー 
 ピ ン ク  のマーカー 
 キ イ ロ  のマーカー 

こんな感じです


ブログカード

これはカスタマイズと言うよりF-Light仕様に置き換えました

ブログカード全て手作業で入れ替えました。。。

今までは『+Embed』と言うサービスを使ってブログカードを作ってましたがF-Light仕様のブログカードがある！！

外部サービスを使わず完全自己解決ってのが凄い。。。


ブログカード作成のリンクをブックマ―クバーに設置しとけば一撃でブログカードができます。　それをHTMLに貼り付けるとF-Light仕様のブログカードが設置できます。

やり方は、、、

ここに書いてもただのコピペになるんで↓にいってください(^^;

【F-light】おすすめブログカード作成ブックマークレットの紹介 | ふじろじっく

【F-light】おすすめブログカード作成ブックマークレットの紹介 | ふじろじっく

すたすた式さんのブログカード作成ブックマークレットと The other way round さんのブログカードデザインを F-light 用に最適化したコードを紹介

ファビコンfujilogic.blogspot.com


アイキャッチリンク設置時のCLS対策

TOPページにアイキャッチリンクを設置するとGoogl先生に『CLSが駄目だ！！』と指摘されました

またまたふじやんさんに聞く(^^;


これが修正前のコード

 <div class='article-area'>
  <div class='article-container'>
    <div class='article-box'>
      <div class='article-image'>
        <a href='記事のURL'><img alt='タイトルのテキスト' src='画像のURL'/></a>
      </div>
    </div>
    <div class='article-box'>
      <div class='article-image'>
        <a href='記事のURL'><img alt='タイトルのテキスト' src='画像のURL'/></a>
      </div>
    </div>
    <div class='article-box'>
      <div class='article-image'>
         <a href='記事のURL'><img alt='タイトルのテキスト' src='画像のURL'/></a>
      </div>
    </div>
    <div class='article-box'>
      <div class='article-image'>
        <a href='記事のURL'><img alt='タイトルのテキスト' src='画像のURL'/></a>
      </div>
    </div>
  </div>
</div>
<style>/*<![CDATA[*/
.article-area {
  background: var(--light-bg);/*背景色*/
}
.article-container {
  width: 90%;/*画像表示の幅*/
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.article-box {
  box-sizing: border-box;
  border: 2px solid var(--brand);/*画像の枠色*/
  width: 25%;
  padding: 0;
  margin: 30px 15px 0;/*画像周りの空白*/
  overflow: hidden;
}
.article-image img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition-duration: .5s;/*ゆっくり戻る*/
}
.article-image:hover img {/*マウスオーバーで拡大表示*/
  transform: scale(1.1);/*1.1倍に表示*/
  transition-duration: .5s;/*ゆっくり拡大*/
}
/*=== smartphone ２列表示 ===*/
@media (max-width: 767px) {
  .article-container {
    width: 100%;
    flex-wrap: wrap;/*折り返し表示（２列）*/
    justify-content: space-between;
    padding: 8px;
  }
  .article-box {
    width: 45%;
    padding: 0;
    margin: 8px;
  }
.article-image img {
    width: 100%;
    padding: 0;
    object-fit: cover;
  }
}
/*]]>*/</style>


↑のコードでタイトルテキスト、画像のURLを入力する部分にheighとwidthを追加します

<img height='180' width='320' alt='タイトルのテキスト' src='画像のURL'/>

これでGoogle先生に怒られなくなるそうです


アイキャッチリンクを設置する場合は

</nav>　と　<!-- メインコンテンツ -->　の間にコードをコピペです


PageSpeed insights でチェックしたら現時点ではOKでした

ただ、、、このテストもGoogleの評価（ウェブに関する主な指標）もコロコロ変わりますからね

Google先生の気分次第です

もし、また怒られたらアイキャッチリンクは諦めます


いいねボタン、SNS シェアボタン

いいねと思ったら押してください！！

皆にも教えたいと思ったらSNSシェアボタン押してください！！

Bloggerのブログに いいねボタン 実装！！ | Trekking from Kochi

Bloggerのブログに いいねボタン 実装！！ | Trekking from Kochi

ブログにいいねボタン導入しました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


Adsense自動貼付け

Blogger F-lightでAdsense自動貼付け | Trekking from Kochi

Blogger F-lightでAdsense自動貼付け | Trekking from Kochi

Adsense自動で貼付けするようにしました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


囲み枠

黒板風の囲み枠を設定しました

ブログの装飾～囲み枠(BOX)追加 | Trekking from Kochi

ブログの装飾～囲み枠(BOX)追加 | Trekking from Kochi

BloggeのF-lightに囲み枠設定

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


404エラーページ作成

オリジナルのエラーページにしました

Bloggerは簡単に設定できますよ

Bloggerオリジナル404エラーページ | Trekking from Kochi

Bloggerオリジナル404エラーページ | Trekking from Kochi

404エラーページをオリジナル画像にしてみた

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


マウスオーバーの色変更

ちょっとした事ですが自分好みに変更

BloggerテーマF-lightkマウスオーバー時の色変更 | Trekking from Kochi

BloggerテーマF-lightkマウスオーバー時の色変更 | Trekking from Kochi

BloggerテーマF-lightのマウスオーバー時の色を好きな色に変えました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


引用枠変更

引用枠を自分好みに変更しました

Blogger引用枠変更 | Trekking from Kochi

Blogger引用枠変更 | Trekking from Kochi

Bloggerの引用枠を変更しました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


ソースコードのコピーボタン

ソースコードを記事にアップした時にワンクリックでコピーできるようにしました

ソースコード表示した時にCOPYボタン設置 | Trekking from Kochi

ソースコード表示した時にCOPYボタン設置 | Trekking from Kochi

ソースコード表示した時にコピーしやすいようにボタン設置しました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


呟き専用ニュースティッカー

新着記事等のお知らせに使うニュースティッカー

これを呟き専用にしました

ニュースティッカーガジェット～Blogger・F-lightカスタマイズ | Trekking from Kochi

ニュースティッカーガジェット～Blogger・F-lightカスタマイズ | Trekking from Kochi

ニュースティッカーを呟き専用にしてみました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


SNSシェアボタン装飾

説明文追加しました

SNSシェアボタン説明追加～Blogger・F-lightカスタマイズ | Trekking from Kochi

SNSシェアボタン説明追加～Blogger・F-lightカスタマイズ | Trekking from Kochi

SNSシェアボタンに説明を追加して、いいねボタンを押されるようにカスタマイズ（笑）

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


リンク集

Bloggerで作るリンク集です

Bloggerで作るLINK集 | Trekking from Kochi

Bloggerで作るLINK集 | Trekking from Kochi

Blogger用のオリジナルリンク集

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


未使用のJavascriptとCSSを削除

標準のJavascript、CSSを削除して、それに伴う不具合を解消

【Blogger高速化】未使用のJavascriptとCSSを削除と使えなくなる機能の対処 | Trekking from Kochi

【Blogger高速化】未使用のJavascriptとCSSを削除と使えなくなる機能の対処 | Trekking from Kochi

Bloggerの未使用のJavascriptとCSSを削除した場合に使えなくなる機能があるので対処しました

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


リンクアイコン自動貼付け

【Blogger】リンクアイコンを自動で貼り付ける | Trekking from Kochi

【Blogger】リンクアイコンを自動で貼り付ける | Trekking from Kochi

リンクアイコンを自動で付くようにしました。Blogger、F-Lightです。

ファビコンkochimountaingo.blogspot.com

こちらをご覧ください m(__)m


Bingの検索結果にファビコン表示

現在、結果的にはウチのファビコンは表示されています

しかし、今も他のBloggerサイトはBingの検索結果にファビコンが表示されていません

自力でのファビコン表示は無理でサポートにお願いしました

【Blogger】Bing検索結果にファビコン表示させたい | Trekking from Kochi

【Blogger】Bing検索結果にファビコン表示させたい | Trekking from Kochi

Bingの検索結果にファビコンを表示させたい。。。

ファビコンkochimountaingo.blogspot.com

詳しくはこちらをご覧ください m(__)m


アプリーチのCSS変更

アプリーチのレイアウトが気に入らないのでCSS変更 | Trekking from Kochi

アプリーチのレイアウトが気に入らないのでCSS変更 | Trekking from Kochi

アプリーチを使うとレイアウトが、、、標準のCSSを使用せずに好きなレイアウトのCSS使う事にしました

ファビコンkochimountaingo.blogspot.com

アプリーチのCSSを変更しました
F-Lightのブログカード風です


フワっと表示

これ実装する方は注意点があります

最初に読み込む時にフワっとサイトが表示されるようになり雰囲気が良いです

しかし、、、

ふじやんさんがOneShotDiaryで呟いたのみて速攻でやってみたんですが、、、

パソコンでは問題ないんですがiPad(safari、chrome)で見ると読み込み時間が異常に長くなり固まったようになってしまい削除しました

ブログの高速化できていないのが原因なのか、、、

実装したいのに(T_T)


問題ない方は雰囲気良いからお勧めです

CSS追加するだけです

/* フワっと表示 */
body {
  animation: fadeIn .8s linear;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


各カテゴリー別最新記事一覧

あったらいいかな、、、とChatGPTに聞いて作ったけど

予想通りPageSpeedのスコア落ちるからやめた。。。

参考までに置いときます 

最新記事一覧ガジェット

最新記事一覧ガジェット展開

折りたたみでクリックすると表示
RSSで記事取得、アップ日が新しい記事順に上から表示
カテゴリーが多い場合はスライドになります

F-lightならレイアウトにガジェット(HTML)追加で即できます
他はわかりません(^^;


コード

<div class="archive-list">
  <details>
    <summary>
      <center><b>各カテゴリ最新記事</b></center>
      <svg aria-label="開閉" class="svg-icon-24">
        <use href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </summary>
    <ul id="latest-posts"></ul>
  </details>
</div>

<style>
  /* 記事リストのスタイル */
  #latest-posts {
    list-style-type: none;
    padding: 0;
    max-height: 500px; /* 開いた時の最大高さを設定 */
    overflow-y: auto; /* 内容が多い場合はスクロールできるようにする */
  }

/* 各記事のスタイル */
#latest-posts li {
  padding: 10px;
  border-radius: 5px; /* 角を丸める */
}

/* 記事タイトルのスタイル */
#latest-posts a {
  text-decoration: none;
}

/* 日付のスタイル */
#latest-posts small {
  font-size: 12px;
  margin-right: 5px;  
}

/* カテゴリごとのブロック */
.category-block {
  margin-bottom: 15px;
}

/* デスクトップでのレイアウト */
@media (min-width: 768px) {
  .category-block {
    display: flex;
    flex-direction: column; /* 縦に並べる */
  }

  .category-block h3 {
    margin-bottom: 5px; /* カテゴリ名と記事タイトルの間隔 */
    margin-left: 10px;  /* カテゴリ名の左に余白を追加 */
  }

  #latest-posts li {
    display: flex;
    justify-content: space-between;
  }

  #latest-posts li a { 
    font-size: 15px;
  }
}

/* モバイルデバイス向けのスタイル */
@media (max-width: 767px) {
  /* カテゴリブロックの余白調整 */
  .category-block {
    margin-bottom: 15px;
  }

  /* タイトルのフォントサイズを小さく */
  .category-block h3 {
    font-size: 18px;
    margin-left: 10px; /* モバイルでも左に余白を追加 */
  }

  /* 記事のリンクを大きく表示 */
  #latest-posts a {
    font-size: 14px;
  }

  /* 日付のフォントサイズをさらに小さく */
  #latest-posts small {
    font-size: 10px;
  }
}
</style>


<script>
  // カテゴリの配列を定義
  const categories = ['ここに', 'カテゴリ名', 'を', '書いて', 'ください'];
  const blogURL = ' ';
  const postContainer = document.getElementById('latest-posts'); // 記事を表示する要素
  const posts = []; // 記事を格納する配列

  // 各カテゴリの最新記事を取得して配列に格納
  const fetchPosts = (category) => {
    const feedURL = `${blogURL}/feeds/posts/default/-/${category}?alt=rss&max-results=1`; 

    return fetch(feedURL)
      .then(response => response.text())
      .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
      .then(data => {
        const item = data.querySelector("item");
        if (item) {
          const title = item.querySelector("title").textContent;
          const link = item.querySelector("link").textContent;
          const pubDate = new Date(item.querySelector("pubDate").textContent);
          posts.push({ title, link, pubDate, category });
        }
      })
      .catch(error => console.log('RSSフィードの取得中にエラーが発生しました:', error));
  };

  // すべてのカテゴリの最新記事を取得
  Promise.all(categories.map(fetchPosts)).then(() => {
    // 日付でソート
    posts.sort((a, b) => b.pubDate - a.pubDate); // 新しい順にソート

    // 記事を表示
    if (posts.length > 0) {
      const html = posts.map(post => `
        <div class="category-block">
          <h3>${post.category}</h3>
          <ul>
            <li>
              <a href="${post.link}" target="_blank">${post.title}</a><br>
              <small>${post.pubDate.toLocaleDateString()}</small>
            </li>
          </ul>
        </div>
      `).join(''); 
      postContainer.innerHTML = html; // 表示領域に追加
    } else {
      postContainer.innerHTML = '<p>利用可能な記事はありません</p>';
    }
  });
</script>

色々要らない所とかもあるかもしれないけど、、、
自分にはわからない(^^;
使う人はコレをベースに作ってください

認証マーク色変更

このマーク


今は解らないなりにアレコレやってChatGPTに聞いたり、解る英単語を見つけてはなんだこれと考え、、、素人なりに解る事が増えてきましたが、当初はこんな事もどこをどう変えたらいいのか想像すらできませんでした

好きな色に変えるだけでも嬉しくないですか？

テーマのHTML編集に行って、Ctrl+Fで検索したい語句を入力『symbol id='verified'』して検索 

<symbol id='verified' viewBox='0 0 32 32'><circle cx='16' cy='15.9' fill='#ff0000' r='15.8'/><polygon fill='#fff' points='23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5 '/></symbol>

赤字の色のコードを好きな色に変えるだけ


画像の影を消す

F-lightはデフォルトで画像他に影が付くようになっていますが、それを個別で指定して影を消す方法です

Blogger-Flight画像の影を消す | Trekking from Kochi

Blogger-Flight画像の影を消す | Trekking from Kochi

Blogger、テーマF-lightで個別で指定して画像の影を消す方法です

ファビコンkochimountaingo.blogspot.com

コチラをご覧ください
m(__)m


「最大コンテンツの描画」要素をpreloadでスコア改善


これのせいでPageSpeedのスコアが上がらなかったんですが、、、

preloadでスコア改善しました！！

元のコードはコレ


<b:includable id='snippetedPostThumbnail'>      
    <b:if cond='data:post.featuredImage'>
      <div class='feat-img'>
        <img expr:alt='data:post.title.escaped' expr:src='resizeImage(data:post.featuredImage,640,&quot;16:9&quot;)' height='360' width='640'/>
      </div>


prelosdで先読みさせてスコア改善

 <b:includable id='snippetedPostThumbnail'>      
    <b:if cond='data:post.featuredImage'>
    <link as='image' expr:href='resizeImage(data:post.featuredImage,640,&quot;16:9&quot;)' rel='preload'/>  
      <div class='feat-img'>
        <img expr:alt='data:post.title.escaped' expr:src='resizeImage(data:post.featuredImage,640,&quot;16:9&quot;)' height='360' width='640'/>
      </div>

赤字を追加
※余分な記述とかあっても自分はわかりません(^^;
解かる方はご自身で修正してください

今までモバイルは60点台のスコアだったんですが過去最高でました！！

もうちょいで80点！！
多少の上下はあるけど何回計測しても70点台が出ます
たまたまかもしれないけど
見た事もない過去最高点が出たのは事実！！

予想外のスコア上昇でした