編集

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

2023/10/26 ｜2024/09/09

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

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

ZEROとF-Lightの違い等

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

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

ZEROからF-lightへ

吹き出し

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

吹き出し

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

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

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

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

さて、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

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

Google アナリティクスの設定

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

嘘でしょ！？

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

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の評価

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

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

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

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

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

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

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

2023年12月追記

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

PageSpeed insightsのテストでもOKです

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

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

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

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

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

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

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

カスタマイズ

マーカー装飾

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


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

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

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

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

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

参照したサイトはココ

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】おすすめブログカード作成ブックマークレットの紹介 | ふじろじっく

アイキャッチリンク設置時の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を追加します