編集

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

2023/10/26 ｜2024/05/03

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

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

ZEROとF-Lightの違い等

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

結論を言うとF-Lightはお勧めです

ZEROからF-lightへ

吹き出し

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

吹き出し

CSSを自分で作るなんて素人には無理

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

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

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

さて、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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-MKhyphenhyphenyGpk058ybVT7uZWrMYicx_9ldXu-vTA-FddWKUaH0qXi8Ug7FSX18_cupawZXD3vdXoToLdYhp6cbyi8nDfcTj1iwm6o2ECx8kMhqdZvC6tzQjP9htc0IfgVbOMEKCW2u5pA-Fn/s320/image.png);
}
.you::after {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUCFd1cvvTG7AGhyphenhyphenigWXhpniePrS3NLMudZxrpI7aMCxX8BmhQWHQa3BoQ4SGmLl6l4RBu2h8-XpE57xxR6YDRB2EiUAraenMEv0NRyMGQTnTE1i-Nzv7qB9J8M-8DWdBOEwsyBFd1Jx0/s320/smile-egao.png);
}

オレンジの箇所の数値を変えて位置調整しました

黄色の所は使いたい画像のアドレスいれてください

  
     <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;
}

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

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

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

黄色を全てオレンジに変更中。。。

オレンジだとダークモードでも見易いでしょ？

※少しずつですが現在もアンダーラインに変更してます。。。

カスタマイズ

マーカー装飾

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%);
}

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

％を少し変えて、、、

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

<span class="line-marker01">ミズイロのマーカーを引く</span>
<span class="line-marker02">ピンクのマーカーを引く</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を追加します