Jettheme クイック編集アイコン
<!-- markdown-mode-on -->
<img alt="jettheme logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6tkuCAB6zwNyTYCvTrA07cGstQGH7GBjCipsk3a6HoUiKVea-159v4oK4uq7qhXUjbbnX0Hm5Fds5sw7iiCzhqObJHwcnKQEf9-0iAqgpH6bSzH6FxQCVVBh-XrghyphenhyphenMUwaIjVewBQXI/s1600/jettheme-cover.png" style="
display: none;"/>
Jetthemeには管理者が閲覧画面から直接編集画面に飛べるクイック編集機能が備わっているらしいが、自分の環境ではなぜかそれが表示されない。
<figure class="blogcard b-link"><a aria-label="記事詳細へ(別窓で開く)" href="https://8-stars.blogspot.com/2024/06/jettheme-toppage-edit-post-button.html" rel="noopener noreferrer" target="_blank"><div class="blogcard-content"><div class="blogcard-image bi-link"><div class="blogcard-image-wrapper biw-link"><img alt="【Jettheme】記事編集ボタンの削除 | No.8" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjywxxRG6lR0jSA7_AliJCmuC-nlQfJlghTOLgBeCTtrNFj1Leea_riQADjKzu90cBhnet69hiS2LuhQahJ9pvFGB66FUqdzeohSH7DvgBYy26895sSy67IbUOdHdWsn52CnLESWdH-3-UbsaYZN15ZX4oWLmxQ8333FNgEVdG2l_c4kun6DvNB3bti-YMp/s0-rw-e365/top-edit.jpg" width="100"></div></div><div class="blogcard-text"><p class="blogcard-title bt-link">【Jettheme】記事編集ボタンの削除 | No.8</p><p class="blogcard-description bd-link"> Blogger+JetThemeで記事作成中にプレビュー画面で見かける、ペンのアイコン。自分（Bloggerを管理しているGoogleアカウントでログイン中に表示）にしか見えていないのですが、使っていないので消してしまうことにしました。</p></div></div><div class="blogcard-footer bf-link"> <img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://8-stars.blogspot.com/2024/06/jettheme-toppage-edit-post-button.html" width="16">8-stars.blogspot.com</div></a></figure>
仕方がないので、自分で組み込むことにした。
このとき、chromeの拡張機能[stylus](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=JA&pli=1)がまだ使えるようなので、これを使ってログイン済みのブログ管理者や投稿者なら編集アイコンが表示されるようにした。
<a name="more"></a>
## クイック編集アイコンを表示させるコード
記事タイトルの右横に鉛筆アイコンを表示させる。
### 元コード
記事タイトルは次のコードなので、これを書き換える。
オリジナルのテーマHTML`jettheme-v2.xml`ならば、2017行になる。
<pre class="line-numbers" data-start="2017"><code class="language-html">
<header class='entry-header mb-3'>
<h1 class='entry-title mb-4'><data:post.title/></h1>
</code></pre>
### 書き換えコード
```html
<header class='entry-header mb-3'>
<h1 class='entry-title mb-0' style='margin: 0; display: inline;'>
<data:post.title/>
<span class='item-control' style='display:none'>
<!-- <b:if cond='data:post.id'>-->
<!-- <b:if cond='data:post.adminClass'>-->
<a class="btn btn-sm jt-btn-light rounded-pill jt-icon-center" expr:href=""https://www.blogger.com/blog/post/edit/" + data:blog.blogId + "/" + data:post.id" rel="nofollow noopener noreferrer" target="_blank" title="Edit post">
<img alt="編集" class="icon-action" height="18" src="https://resources.blogblog.com/img/icon18_edit_allbkg.gif" width="18"/>
</a>
<!-- </b:if>-->
</span>
</h1>
```
### stylus
stylus で下記のように設定していると、一般読者には表示されず、ログイン済みのブログ管理者や投稿者のみに編集アイコンが表示される。
<pre ><code class="language-html">
.item-control {
display: initial !important;
}
</code></pre>
## 参考：本来備わっているクイック編集アイコン機能
Jettheme(ver2.9)のコードから、クイック編集に関する箇所を解析すると、次の内容である。
<svg width="24" height="24" >
<use xlink:href="#i-chatgpt"></use>
</svg><span style="font-size:12px;"> </span>ChatGPT
このコードは **Blogger テンプレート**の一部で、特定の投稿に「編集アイコン（鉛筆マーク）」を表示するための処理が含まれています。該当部分を抜き出して解説します。
---
### 対象コードの抜粋：
<pre ><code class="language-html">
<span expr:class='"position-absolute top-0 end-0 " + data:post.adminClass'>
<a class='btn btn-sm jt-btn-light rounded-pill jt-icon-center'
expr:href='"https://www.blogger.com/blog/post/edit/" + data:blog.blogId + "/" + data:post.id'
rel='nofollow noopener noreferrer'
target='_blank'
title='Edit post'>
<svg aria-hidden='true' class='jt-icon'>
<use xlink:href='#i-edit'/>
</svg>
</a>
</span>
</code></pre>
---
### 🔍 解析と説明：
#### 1. `expr:class='"position-absolute top-0 end-0 " + data:post.adminClass'`
- 投稿ブロックの右上に「編集ボタン」を絶対配置。
- `data:post.adminClass` が追加されるのは、**ログイン済みのブログ管理者や投稿者**のみ。
- これにより、**一般読者には非表示**となります。
- <data:post.adminClass> は blog-admin pid-***(***は複数桁の数字)というクラス名を返してきましたが、
- chromeのF12では、"item-control"を見つけることができませんでした。（data:post.adminClass には、ログインしていて編集権限がある場合のみ "item-control" が付与されます。）
#### 2. `<a>`
- Blogger 管理画面の投稿編集ページへのリンクを生成。
- 例：`https://www.blogger.com/blog/post/edit/1234567890/987654321`
- `data:blog.blogId` → ブログのID
- `data:post.id` → 各記事のID
#### 3. `title='Edit post'`
- ホバー時に「Edit post（投稿を編集）」というツールチップが表示されます。
#### 4. `<svg>～</svg>`
- 編集用のアイコン（鉛筆マーク）を表示。
- `<use xlink:href='#i-edit'/>` → SVGスプライトの `#i-edit` を参照
---
### 🎯 表示される条件
この「編集アイコン」は、**ログイン中かつその投稿の編集権限を持つユーザー**にのみ表示されます。テンプレート内部の条件付きクラス `data:post.adminClass` によって制御されています。
---
### 📌 補足：見つけた場所について
この編集リンクは、以下のような場所に表示される可能性があります：
- **投稿リスト（カード型一覧）**
- **個別投稿ページ**
- **フィーチャード投稿（JetFeaturedPost）**
- たとえば以下の一節でも確認できます：
<pre><code class="language-xml">
<span class='position-absolute top-0 end-0 blog-admin'>...</span>
</code></pre>
## 関連リンク