【Blogger】新バージョンのテーマで記事編集アイコンを表示させる (2021/11/12: コードと手順を変更しました)

2021/07/02 ｜2023/09/06

QooQ や公式シンプルテーマ等の旧バージョンのテーマでは、記事ページでタイトルの付近に記事編集アイコンが表示されます。

新バージョンでは廃止された

記事を修正したくなった時、わざわざ管理ページに行って当該記事を探さなくても、その場ですぐに編集ページに入れるのが便利で私も結構頻繁に使うのですが、Essential や Contempo や Emporio等の新バージョンテーマでは廃止されてしまったんですよね。

この新テーマの仕様を不満に感じられてる方も多そうですし、新バージョンしか使ったことがなくてこの機能の事を知らない方もいるだろうというわけで、表示させるカスタマイズ方法を紹介したいと思います。

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

手順①

まずテーマのHTML編集にて <b:includable id='postTitle' var='post'> を検索で探します(編集画面内をクリックでアクティブな状態にして Ctrl + F で検索できます)。
※Emporio は同じタグが3つ、Notable は2つありますが当該タグはいずれのテーマも一番下です。

手順②

このタグの下の方にある <data:post.title/> (2つある内の <b:else/> の下にある方)の下に下記のコードを挿入します。

  <!-- https://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html -->
  <b:with value='data:view.isPage ? "blog/page/edit/" : "blog/post/edit/"' var='path'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:with>

このコードは、Soraya さんがブログで公開された暫定コードです。

Blogger Code PE
Foire aux questions Blogger (Octobre 2021)
Vous avez une question sur Blogger et vous n'osez pas la …
http://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html

補足: Smart テーマの場合

公式ではない Smart テーマの場合は <h1 itemprop='name'> の下にある <data:post.title/> の下に上記のコードを挿入してください。

固定ページでも表示させたい場合は <b:includable id='static'> の数行下にある <data:post.title/> の下にコードを挿入します。

Emporio への導入例

このように記事タイトルの右側にが付きます。

最後に

アイコンは旧バージョンと同じくログイン状態でのブログ管理者にしか見えませんのでご心配なく。(仮に管理者以外がクリックしたとしても編集ページには入れません)

2021/07/21 追記

Bloggerの仕様変更の影響で、今後管理者以外にもアイコンが見える状態になってしまう可能性が出てきたため、暫定的な対応方法を考えてみました。
詳しくはこの記事を御覧ください。

ふじろじっく
QooQ】Bloggerの仕様変更に影響されずに記事編集アイコンを使い続ける方法 (2021/11/12: 手順の変更及び記事一覧ページでの表示方法を追記しました)
便利な記事編集アイコンを今後も使い続けるための方法を紹介
https://fujilogic.blogspot.com/2021/07/quick-edit-icon-on-QooQ.html