F-light カスタマイズ集

拙作 Blogger テーマの F-light リリースから2ヶ月。ユーザーは徐々に増えつつはあるもののまだまだ少なく、カスタマイズについて書かれている方もいないようですので、作者おすすめのカスタマイズを紹介したいと思います。

デモサイトの紹介記事に書かれていない事とか、アップデートで実装するほどでもなかったり、ユーザーによって好みが分かれることなどを。

CONTENTS

• 注意事項
  • 追加の CSS コードを挿入する位置
• ガジェットや項目を非表示
  • 記事ヘッダー(投稿日、更新日、コメント数)を非表示
  • 目次を非表示
  • SNS シェアボタンを非表示
  • ラベルを非表示
  • 関連記事を非表示
  • トップページ記事一覧、注目の投稿、人気の投稿の投稿日とコメント数を非表示
  • トップページ記事一覧のスニペットを非表示
• 目次のオプション
  • デフォルトで開いた状態に
  • 目次を生成する見出しの数を変更
• 更新日だけ表示
  • カスタマイズ手順
• 連絡フォームウィジェット用 CSS
• 1カラム時のメインの幅を縮める
• 2022/10/19 追加: ナビバーとメインの間にガジェットを設置
  • コードの挿入位置について
  • ①ニュースティッカー ガジェット
    • コード
  • ②アイキャッチ画像付きリンクリスト
    • コード
• 2022/11/27 追加: 新着記事に NEW を付ける
  • 導入手順
    • ① JavaScript コードを設置
    • ② CSS の追記
• 2023/08/27 追加: 検索ウィジェットのカスタムデザイン CSS
• 2023/08/30 追加: SNS シェアボタンのカスタマイズ
  • カスタマイズ その1: Twitter の鳥さんを 𝕏 に変える
    • ① SVG コードを入れ替える
    • ② 背景色の変更
  • カスタマイズ その2: ボタンに名前をつける
    • ① CSS コードの入れ替え
    • ② HTML コードの入れ替え
• 記事・ページのヘッダー(タイトルや投稿日)を中央寄せにする
  • CSS 変更箇所
• オススメ記事の紹介#recommend

注意事項

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。

2024/7/10 現在、最新の F-light は v1.37 です。古いバージョンをお使いの方は最新バージョンにアップデートすることをおすすめします。

追加の CSS コードを挿入する位置

特に指定がない場合は/*==== ユーザー カスタム CSS ====*/の直下に追記して下さい。

ガジェットや項目を非表示

一部のガジェットや項目の表示・非表示はレイアウトページでは変更できないため、非表示にするには CSS で display:none にする必要があります。

記事ヘッダー(投稿日、更新日、コメント数)を非表示

#p-header {
  display: none!important;
}COPY

目次を非表示

#toc,
#backtoc{
  display: none!important;
}COPY

SNS シェアボタンを非表示

.sns-share-buttons {
  display: none!important;
}COPY

ラベルを非表示

#p-category,
#p-hashtag {
  display: none!important;
}COPY

関連記事を非表示

#related-posts {
  display: none;
}COPY

トップページ記事一覧、注目の投稿、人気の投稿の投稿日とコメント数を非表示

/*記事一覧投稿日を非表示*/
#Blog1 .article-header {
  display: none;
}
 
/*注目の投稿投稿日を非表示*/
#FeaturedPost1 .article-header {
  display: none;
}
 
/*人気の投稿投稿日を非表示*/
#PopularPosts1 .article-header {
  display: none;
}
 
/*上記全ての投稿日をまとめて非表示*/
 .article-header {
  display: none;
}COPY

トップページ記事一覧のスニペットを非表示

.article-snippet {
  display: none;
}COPY

カードレイアウトの場合は以下の CSS も追記してください。(タイトルと投稿日が被ってしまうのを回避するため)

.article {
  padding-bottom: 10px;
}COPY

ちなみに「注目の投稿」のスニペットに関しては、レイアウトページの設定で表示・非表示を切り替えられます。

目次のオプション

デフォルトで開いた状態に

以下のコードを変更します。「!」を削除するだけです。

s.open=!1COPY

↓↓変更

s.open=1COPY

目次を生成する見出しの数を変更

デフォルトでは見出し3つ以上で生成される様になっていますが、この数を変更するには以下の箇所の数値を変更します。

if(a.length<3)COPY

更新日だけ表示

先日 Twitter でたまたまこんな記事がシェアされているのを見かけました。投稿日よりも更新日の表示を優先させた方がアクセスが増えるらしいという内容。実際の所 SEO に効果あるのかどうかは検証していないのでわかりませんけど、参考までに F-light でのカスタマイズ手順を書いておきます。

Tanweb.net

ブログ記事の更新日を優先して Google 検索に知らせると SEO に効果アリ！（SANGO用カスタマイズ）

記事をどんなに新しい情報へとリライトしても、Google 検索結果の日付は投稿日のままなので、期間検索の新しい日付には（新しい情報なのに）登場しないのだ。今回は「ブログ記事は投稿日よりも更新日を優先させて Google 検索にお知らせして欲しい！」をブログします。

https://tanweb.net/2018/08/11/22585/

カスタマイズ手順

まずこのコードを検索で探します。

<span id='p-header'>

このすぐ下のコード (<time expr:datetime= から </b:if> まで) を変更します。

    <time expr:datetime='data:post.date.iso8601' id='p-header-pdate'><svg aria-label='カレンダー' class='svg svg-calendar-days' style='vertical-align:-10%;margin-right:5px'><use href='#svg-calendar-days'/></svg><data:post.date.year/>/<b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/></time>
  <b:if cond='data:post.date.year != data:post.lastUpdated.year or data:post.date.month != data:post.lastUpdated.month or data:post.date.day !=  data:post.lastUpdated.day'>
    <span id='p-header-udate'>&#65372;<svg aria-label='更新日' class='svg svg-arrows-rotate' style='margin:0 5px'><use href='#svg-arrows-rotate'/></svg><data:post.lastUpdated.year/>/<b:eval expr='data:post.lastUpdated.month lt 10 ? &quot;0&quot; + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/<b:eval expr='data:post.lastUpdated.day lt 10 ? &quot;0&quot; + data:post.lastUpdated.day : data:post.lastUpdated.day'/></span>
  </b:if>COPY

↓↓変更

  <b:if cond='data:post.date.year != data:post.lastUpdated.year or data:post.date.month != data:post.lastUpdated.month or data:post.date.day !=  data:post.lastUpdated.day'>
    <time expr:datetime='data:post.lastUpdated.iso8601'>最終更新日: <data:post.lastUpdated.year/>/<b:eval expr='data:post.lastUpdated.month lt 10 ? &quot;0&quot; + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/<b:eval expr='data:post.lastUpdated.day lt 10 ? &quot;0&quot; + data:post.lastUpdated.day : data:post.lastUpdated.day'/></time>
  <b:else/>
    <time expr:datetime='data:post.date.iso8601' id='p-header-pdate'>投稿日: <data:post.date.year/>/<b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/></time>
  </b:if>COPY

投稿後に記事が更新された場合は「更新日」のみを表示。更新なし(投稿日と更新日が同じ)の場合は「投稿日」が表示されます。

アイコンだとぱっと見で判り辛いような気がしたので文字表記にしました。

↓↓

連絡フォームウィジェット用 CSS

公式ガジェットでよく使われるものの一つということで。

F-lght に馴染むようなデザインを用意してみました。もちろんダークモード対応です。

v1.32～ CSS を追加済みです。

.contact-form-email,
.contact-form-email-message,
.contact-form-name {
  max-width:100%;
  min-width:100%;
  color: var(--color);
  padding: .5em;
  outline: none;
  border-radius: 3px;
  background: var(--dark-bg);
  transition: .2s;
  border: 1px solid transparent;
}
.contact-form-email:focus,
.contact-form-email-message:focus,
.contact-form-name:focus {
  box-shadow: 0 0 6px var(--link);
  border: 1px solid var(--link);
}
.contact-form-email-message {
  min-height: 200px;
}
.contact-form-email,
.contact-form-name { 
  height:40px;
}
.contact-form-button-submit {
  border-radius : 3px;
  line-height: .1;
  margin: 2em 0;
  cursor: pointer;
  padding: 1em 2em;
  background: var(--brand);
  color: var(--brand-font);
  transition: .3s;
  border: none;
  outline: none;
}
.contact-form-button-submit:hover {
  transform: scale(1.1);
}
.contact-form-button-submit:active {
  transform: none;
}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
  color: var(--color);
  font-weight: bold!important;
}
.contact-form-cross {
  width: .9em;
  height: .9em;
  vertical-align: -5%;
  margin:0 5px;
}
.contact-form-cross:hover {
  cursor:pointer;
}COPY

1カラム時のメインの幅を縮める

狭めの方が好みの方も多いようなので。

以下の箇所の 900px の数値を変更して下さい。

/*==== 1 カラム レイアウト ====*/
#main-content {
  position: relative;
  margin: 3em auto 0;
  padding: 1em;
  max-width: 900px;/*お好みで数値を調整*/
}COPY

2022/10/19 追加: ナビバーとメインの間にガジェットを設置

ナビバーの下のスペース用のおすすめのガジェットを2つ紹介します。

コードの挿入位置について

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

①ニュースティッカー ガジェット

IB-Note

【jQuery不使用】JavaScriptとCSSで作るニュースティッカー | IB-Note

Webサイトで時々見かけるニュースティッカーをJSとCSSだけで作りました。コピペで簡単に使うことができます。

https://itblogger-note.blogspot.com/2022/07/news-ticker.html

F-light デモサイトにお知らせ用としてこちらの IB-Note さん作のガジェットを置いてみたところ、予想以上にいい感じにハマりましたので、F-light 用に最適化した コードを紹介したいと思います。

ニュースタイトルにNEW を付けたい場合は、以下のコードを使用して下さい。(自動で表示させることはできません)

<span class="ticker-new">NEW</span>COPY

コード

<div class='ticker-wrap'>
  <div class='ticker-head'>NEWS</div>
  <div class='ticker'>
    <ul>
      <li class='ticker-item'><a href='リンクURL'><span class='ticker-date'>日付</span><span class='ticker-title'>ニュースタイトル</span></a></li>
      <li class='ticker-item'><a href='リンクURL'><span class='ticker-date'>日付</span><span class='ticker-title'>ニュースタイトル</span></a></li>
      <li class='ticker-item'><a href='リンクURL'><span class='ticker-date'>日付</span><span class='ticker-title'>ニュースタイトル</span></a></li>
    </ul>
  </div>
</div>
<script>/*<![CDATA[*/
/* News Ticker gadget powered by IB-Note via: https://itblogger-note.blogspot.com/2022/07/news-ticker.html */
 
(function(window, document) {
  const animTime = 5000;
  const speed = 100;
  const limit = 0;
  let animId;
  let isRunning = false;
 
  const ticker = document.querySelector('.ticker');
  loadTicker();
 
  function loadTicker() {
    tickerAnim();
    animId = setInterval(tickerAnim, animTime);
    isRunning = true;
  }
 
  // アニメーション処理
  function tickerAnim() {
    const items = ticker.querySelectorAll('.ticker-item');
    const running = ticker.querySelector('.run');
    let idx, link, first, next;
    if (!running) { // 実行中の要素がない場合（初回のみ）
      first = items[0];
      link = first.querySelector('a');
      first.classList.add('fadeInDown', 'run');
      first.style.zIndex = 1;
      setTimeout(textMove, 1000, link); // 第3引数に引数linkを指定。こうしないと即実行されてしまうので注意。
    } else {
      for (let i = 0; i < items.length; i++) {
        if (items[i] == running) {
          idx = i; // 実行中要素のインデックスを取得
          break;
        }
      }
      next = items[(idx + 1) % items.length];
      running.classList.replace('fadeInDown', 'fadeOutDown');
      setTimeout(() => {
        running.classList.remove('fadeOutDown', 'run');
        running.style.zIndex = 0;
        link = running.querySelector('a');
        link.style.transform = 'none';
        next.classList.add('fadeInDown', 'run');
        next.style.zIndex = 1;
        link = next.querySelector('a');
        setTimeout(textMove, 1000, link);
      }, 300);
    }
  }
 
  // テキスト移動処理
  function textMove(elm) {
    const move = elm.parentNode.clientWidth - elm.clientWidth;
    if (move < 0) {
      elm.style.transform = 'translateX(' + move + 'px)';
      elm.style.transitionDuration = Math.abs(move) / speed + 's';
    }
  }
 
  // ウィンドウサイズ変更時
  window.addEventListener('resize', () => {
    const windowWidth = window.innerWidth;
    if (windowWidth <= limit) {
      ticker.style.display = 'none';
      clearInterval(animId);
      isRunning = false;
    } else {
      if (!isRunning) {
        ticker.style.display = 'block';
        animId = setInterval(tickerAnim, animTime);
        isRunning = true;
      }
    }
  });
})(window, document);
/*]]>*/</script>
<style>/*<![CDATA[*/
.ticker-wrap {
  display: flex;
  max-width: 97%;
  width: 900px;/*横幅一杯に表示させる場合は 1155px*/
  background: var(--brand);
  padding: 4px;
  margin: 2em auto 0;
}
.ticker-head {
  width: 4.5em;
  font-family: verdana;
  font-style: italic;
  color: #fff; /*F-light v1.29 以降は var(--brand-font) に置き換える*/
  line-height: 30px;
  padding: 0 4px;
  text-align: center;
}
.ticker {
  width: 100%;
  height: 30px;
  font-size: 15px;
  background: var(--light-bg);
  line-height: 30px;
  padding: 0 6px;
  overflow: hidden;
}
.ticker ul {
  position: relative;
  list-style: none;
  height: 100%;
  padding: 0;
  margin: 0;
}
.ticker-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-right: 0;
  opacity: 0;
}
.ticker-item a {
  display: inline-block;
  width: auto;
  color: var(--color);
  white-space: nowrap;
  text-decoration: none;
  transition: transform 5s linear;
}
.ticker-item a::after {
  content: "\00BB";
  margin-left: 2px;
  font-size: 1.9rem;
}
.ticker-item a:hover {
  color: var(--link);
}
.ticker-date {
  font-weight: bold;
  color: var(--link);
}
.ticker-title {
  margin-left: 10px;
}
.ticker-new {
  color: var(--red-color);
  font-weight: bold;
  margin-left: 10px;
  animation: blink 1s ease-in-out infinite alternate;
}
.fadeInDown {
  opacity: 0;
}
.fadeInDown.run {
  animation: fadeInDown 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.fadeOutDown {
  opacity: 1;
}
.fadeOutDown.run {
  animation: fadeOutDown 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/*]]>*/</style>COPY

コードの詳細や各オプションについては上記の IB-Note さんの記事を参考にしてください。

②アイキャッチ画像付きリンクリスト

QooQ 用カスタマイズ記事

moca＊Bloggerメモ＊2nd

Blogger 「QooQ」 カスタマイズ＊ヘッダー・ナビゲーションバー

Blogger 日本語テンプレート「QooQ」のカスタマイズ記事です。 Blogger「QooQ」のヘッダーとナビゲーションバーをカスタマイズしてみました。 おすすめ記事などのアイキャッチ画像付きリンクを表示する方法もあわせてご紹介します。

https://www.moca-memo.com/2020/02/blogger-qooq-header.html#toc_headline_6

オリジナル作者さんの記事

バンビの初心者ブログ教室

【はてなブログ】ヘッダー下におすすめ記事やアイキャッチを並べて表示するカスタマイズ方法 - バンビの初心者ブログ教室

自分のブログを訪れてくれた人に読んでもらいたい「おすすめ記事」をトップページのヘッダー下に表示する方法です。

https://www.bambi.pro/entry/blog-eyecatch-list

QooQ でよく見かける人気のガジェットです。注目の投稿を一度に4つ並べたいという方に。

コード

オリジナルコードのクラス名 article-img は F-light で使用中のクラス名と重複していて、そのままだと表示が崩れてしまうので、article-image に変更しました。

※画像のアスペクト比は4枚とも同じにして下さい。

<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>COPY

2022/11/27 追加: 新着記事に NEW を付ける

トップページの記事一覧の新着記事で、よく「NEW」というマークが付いているのを見かけますよね。あれいつかやってみたいなあと思っていたのですが、昨日 BINUBALL さんがカスタマイズ記事を書かれていて、早速うちでも取り入れてみたところ問題なく実装できましたので、F-light 用の導入手順を紹介したいと思います。

잡담방 (チャットルーム)

Blogger에서 새 글에 특별한 표시 주기 (Bloggerで新しい記事に特別な表示を与える)

발행된 지 얼마 되지 않은 글에 특별한 표시를 주고 싶을 때가 있습니다. 자바스크립트를 이용해서 알아낼 수 있습니다. Blogger의 기본 테마인 Contempo 테마에서 적용할 수 있는 방법입니다. 다른 테마에서도 적용되는지는 시험하지 않았으므로 댓...

https://rickrollblog.blogspot.com/2022/11/blogger-new-post-style.html

BINUBALL さんのブログは記事リストの枠を赤色のボーダーを囲うというシンプルなスタイルですが、うちではこんな感じに左上に「NEW」マークを表示させます。
※ラベルページや検索ページでも新着記事が含まれていれば NEW が表示されますが、注目の投稿と人気の投稿には表示されません。

導入手順

① JavaScript コードを設置

HTML 編集にて <b:include data='post' name='post'/> を検索で探します。

このタグの直下に以下のコードを挿入します。

<script>
  /* Auto add NEW mark powered by  BINUBALL via: https://rickrollblog.blogspot.com/2022/11/blogger-new-post-style.html */
 
  (function(){
  const idx = <data:i/>;
  //<![CDATA[
  const date = () => {
    const now = new Date().getTime();
    const postDate = new Date(document.querySelectorAll('time')[idx].dateTime).getTime();
    const diff = (now - postDate) / 1000;
    const dayDiff = Math.floor(diff / 86400);
    if (dayDiff < 7) { // NEW を表示する日数
      document.querySelectorAll('.article')[idx].classList.add('new')
    }
    console.log(dayDiff);
  }
  date();
  })();
  //]]>
</script>COPY

NEW を表示する期間はデフォルトで7日間にしてありますが、if (dayDiff < 7)の数値でお好みに変更できます。

② CSS の追記

以下のコードを /*==== ユーザー カスタム CSS ====*/ の直下に追記します。

NEW の文言や配色など、お好みで変更して下さい。

/*== 新着記事 NEW マーク ==*/
.new:not(#FeaturedPost1 .article)::before {
  content: "NEW";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 2px 5px;
  border-top-left-radius: 5px;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  background: red;
}
@media (max-width: 600px) {
  .new .article-category {
    display: none;
  }
}COPY

2023/08/27 追加: 検索ウィジェットのカスタムデザイン CSS

F-light の検索ウィジェットは初めからナビバーに埋め込んであるのですが、使い勝手が悪い？のかそれとも目立たないから？なのかはわかりませんが、サイドバーに追加で設置している方をたまに見かけます。

そのままだとデフォルトのショボいデザインになってしまいますので、F-light に馴染むようなデザインの CSS を用意してみました。

v1.32～ CSS を追加済みです。

.widget-content form {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}
.search-input input {
  box-sizing: border-box;
  background: var(--dark-bg);
  color: var(--color);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: none;
  width: calc(100% - 70px);
  height: 40px;
  padding: 0 .5em;
}
.search-input input:focus {
  outline: none;
  border: 1px solid var(--brand);
  padding: 0 calc(.5em - 1px);
}
.search-input input::placeholder {
  color: var(--dark-color);
}
.search-action {
  position: absolute;
  background: var(--brand);
  color: var(--brand-font);
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  top: 0;
  right: 0;
  width: 70px;
  height: 40px;
}
.search-action:hover {
  cursor: pointer;
  opacity: .8;
}COPY

2023/08/30 追加: SNS シェアボタンのカスタマイズ

カスタマイズ その1: Twitter の鳥さんを 𝕏 に変える

① SVG コードを入れ替える

検索で<symbol id='svg-twitter'を探し、</symbol>までの部分を以下のコードと入れ替えます。

<symbol id='svg-twitter' viewBox='0 0 1200 1227'><path d='M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z'/></symbol>COPY

② 背景色の変更

検索で.tweetを探し、background のカラーコードを黒系に変更します。

.tweet {
  background: #000;
}COPY

カスタマイズ その2: ボタンに名前をつける

こんな風に名前付きのデザインに変更します。スマホの方はこれまでとほぼ変わりなしです。

スマホ

① CSS コードの入れ替え

/*==== SNS シェアボタン ====*/の所の CSS を以下のコードと入れ替えます。

/*==== SNS シェアボタン ====*/
.sns-share-buttons {
  width: 450px;
  margin: 4em auto;
  display: flex;
  justify-content: space-around;
  max-width: 100%;
}
.sns-share-buttons span {
  text-align: center;
  font-size: 2.4rem;
  display: block;
  padding-top: 8px;
  line-height: 1;
  border-radius: 5px;
  height: 55px;
  width: 65px;
  transition: .3s;
  color: #fff;
}
.sns-share-buttons span:hover {
  transform: scale(1.1);
  cursor: pointer;
}
.btnname {
  display: block;
  font-size: 50%!important;
  font-weight: bold;
  padding: 0!important;
  height: 1em!important;
}
.copy_btn .btnname {
  padding-top: 3px!important;
  font-size: 50%;
}
.copy_btn span {
  font-size: 50%;
}
.svg-twitter {
  margin-bottom: 5px;
}
.svg-facebook-f {
  height: 30px;
  width: 30px;
  margin-top: -1px;
}
.hatebusvg {
  height: 28px;
  width: 28px;
}
.linesvg {
  height: 30px;
  width: 30px;
  margin: -2px 0 -1px 2px;
}
.svg-get-pocket {
  height: 30px;
  width: 30px;
  margin-top: -2px;
}
.tweet {
  background: #000;
}
.facebook {
  background: #1877f2;
}
.line {
  background: #00b900;
}
.hatena {
  background: #00a4de;
}
.pocket {
  background: #ef4056;
}
.copy_btn {
  background: slategray;
}
.copy_btn::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71 M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
}
@media (max-width: 600px ) {
  .sns-share-buttons {
    width: 350px;
  }
  .btnname:not(.copy_btn .copied) {
    display: none!important;
  }
  .sns-share-buttons span {
    height: 45px;
    width: 45px;
    padding-top: 9px;
  }
  .svg-twitter,
  .linesvg {
    margin-top: 2px;
  }
  .copy_btn span {
    margin-top: -6px!important;
    font-size: 40%!important;
  }
}COPY

② HTML コードの入れ替え

検索で<div class='sns-share-buttons'>を探し、行番号の右の▼をクリックして折りたたんでから、以下のコードと入れ替えます。

<div class='sns-share-buttons'>
    <span class='tweet' onclick='tweet_btn()' role='button' title='ポスト'><svg aria-label='ポスト' class='svg svg-twitter'><use href='#svg-twitter'/></svg><span class='btnname'>ポスト</span></span>
<script>/*<![CDATA[*/
  function tweet_btn(){const w=550,h=550;window.open("https://x.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}
/*]]>*/</script>
    <span class='facebook' onclick='fb_btn()' role='button' title='シェア'><svg aria-label='Facebookにシェア' class='svg svg-facebook-f'><use href='#svg-facebook-f'/></svg><span class='btnname'>シェア</span></span>
<script>/*<![CDATA[*/
  function fb_btn(){const w=550,h=420;window.open("https://www.facebook.com/sharer.php?u="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}
/*]]>*/</script>
    <span class='line' onclick='line_btn()' role='button' title='LINEで送る'><svg aria-label='ラインで送る' class='linesvg'><use href='#linesvg'/></svg><span class='btnname'>ライン</span></span>
<script>/*<![CDATA[*/
  function line_btn(){const w=550,h=520;window.open("https://social-plugins.line.me/lineit/share?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}
/*]]>*/</script>
    <span class='hatena' onclick='hatena_btn()' role='button' title='はてなブックマークに登録'><svg aria-label='はてなブックマーク' class='hatebusvg'><use href='#hatebusvg'/></svg><span class='btnname'>はてブ</span></span>
<script>/*<![CDATA[*/
  function hatena_btn(){const w=480,h=480;window.open("https://b.hatena.ne.jp/entry/panel/?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}
/*]]>*/</script>
    <span class='pocket' onclick='pocket_btn()' role='button' title='Pocketに保存'><svg aria-label='Pocketに保存' class='svg svg-get-pocket'><use href='#svg-get-pocket'/></svg><span class='btnname'>ポケット</span></span>
<script>/*<![CDATA[*/
  function pocket_btn(){const w=550,h=420;window.open("https://getpocket.com/edit?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}
/*]]>*/</script>
    <span class='copy_btn' onclick='copyLink()' role='button' title='タイトルとURLをコピーする'><span class='btnname'>コピー</span></span>
<script>/*<![CDATA[*/
  const copy_btn=document.getElementsByClassName("copy_btn")[0];function copyLink(){let t=document.title+"\n"+location.href;navigator.clipboard.writeText(t),copy_btn.innerHTML="<span class='btnname copied'>コピー済</span>",copy_btn.setAttribute("title","コピーしました"),setTimeout(()=>{copy_btn.innerHTML="<span class='btnname'>コピー</span>",copy_btn.title="タイトルとURLをコピーする"},2e3)}copy_btn.addEventListener("click",copyLink);
/*]]>*/</script>
  </div>COPY

ボタン名はお好みで変更して下さい。名前が長すぎるとはみ出すので注意。

英語表記にするとこんな感じ。

記事・ページのヘッダー(タイトルや投稿日)を中央寄せにする

1カラムの個別ページでは、この方がバランスがいいと思いませんか？

CSS 変更箇所

2箇所にtext-align: center;を追加し、display: flex;をコメントアウトするか削除して下さい。

/*==== 投稿ヘッダー ====*/
#p-header {
  text-align: center; /*追加*/
  display: block;
  font-size: 1.4rem;
  margin: 1.5em 0 1em;
  color: var(--dark-color);
}
#p-header a:hover {
  color: var(--link);
  text-decoration: underline;
}
#p-header-title {
  text-align: center; /*追加*/
  font-size: 2.2rem;
  font-weight: normal;
  color: var(--color);
  /*display: flex;*/ /*コメントアウト OR 削除*/ 
  margin-top: .5em;
  margin-left: -8px;
  line-height: 1.3;
}
#p-header-title::before {
  content: "\25A0";
  padding-right: 2px;
  color: var(--brand);
}COPY

オススメ記事の紹介#recommend

Trekking from KochiのGOさんが様々なカスタマイズネタを紹介されています。ぜひチェックしてみてください！

Trekking from Kochi

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

BloggerのテーマをZEROからF-liteへ変更、カスタマイズの記事もここにまとめてます

https://kochimountaingo.blogspot.com/2023/10/zerof-liteblogger.html

今後またオススメの記事を見つけたら、随時紹介させていただきます。