JetTheme の編集アイコンの使い方が分かった話
<!-- markdown-mode-on -->
## **概要**
Jetthemeには管理者が閲覧画面から直接編集画面に飛べるクイック編集機能が備わっているらしいが、自分の環境ではなぜかそれが表示されなかったので、下記のブログでその機能をDIYした。
<figure class="blogcard b-link"><a aria-label="記事詳細へ(別窓で開く)" href="https://archivetosho.blogspot.com/2025/04/jettheme.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 クイック編集アイコン - 私の図書館" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6tkuCAB6zwNyTYCvTrA07cGstQGH7GBjCipsk3a6HoUiKVea-159v4oK4uq7qhXUjbbnX0Hm5Fds5sw7iiCzhqObJHwcnKQEf9-0iAqgpH6bSzH6FxQCVVBh-XrghyphenhyphenMUwaIjVewBQXI/s1600/jettheme-cover.png" width="100" /></div></div><div class="blogcard-text"><p class="blogcard-title bt-link">Jettheme クイック編集アイコン - 私の図書館</p><p class="blogcard-description bd-link"> Jetthemeには管理者が閲覧画面から直接編集画面に飛べるクイック編集機能が備わっているらしいが、自分の環境ではなぜかそれが表示されない。 【Jettheme】記事編集ボタンの削除 | No.8 Blogger+JetThemeで記事作成中にプレビュー画面で見かける、ペン...</p></div></div><div class="blogcard-footer bf-link"> <img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://archivetosho.blogspot.com/2025/04/jettheme.html" width="16" />archivetosho.blogspot.com</div></a></figure>
この機能は、「**edit post**」というらしい。DIYしたこの機能をとても便利に使っているのだが、なぜ、JetTheme標準の機能が使えないのか悶々としていた。この機能自体がマイナーなのかJetThemeの公式ドキュメントやフォーラムを手始めとして、Google 検索してもこの情報にたどり着くことができなかった。
しかし、あることがきっかけで解決することができた。編集アイコンが表示されない原因は、**Cookieの設定**であった。どうやら、BloggerではCookieでログイン情報を引き継いでいるようで、Cookie利用の許可を当該ブログに設定するとJetTheme標準のクイック編集機能が使えるようになった。
<a name="more"></a>
## 解決方法
### Chromeの場合
「設定」→「プライバシーとセキュリティ」→「サードパーティ Cookie」を開くと、次の画面になるので、ここでCookieを設定する。編集アイコンを表示させるためにはCookieを有効にすればいい。その方法は、
1. **サードパーティの Cookie を許可する**を有効にする
1. **サードパーティ Cookie の使用が許可されているサイト**を追加する
の２とおりがあるが、1番の方法は無防備になるのでやらない。
---
2番目の方法で対象の**ブログアドレス**をCookieに追加する。
<img border="0" data-original-height="581" data-original-width="687" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1fA5uEGkXxiZkPQisPouxTLjQnnkBkdG56540UtDewDXoy9b08tA0Ly2nTBf0gvOfnTR4WCxcoG8hUhKqOJRqAhS7-3MBn2fOyZMaQYyHp6mCYwRof9ArQtquF70YfRjHNTtjIdF7Ch9f_9khHGM6E23WQllFu-mYNhVnbIHHLdiJhj_DEKWzCNEcYJx/s16000/image.png" />
---
**ブログアドレス**は、閲覧画面のURLから拾うこともできるし、「ダッシュボード（設定画面）」→「⚙️設定」で確認することもできる。
<img border="0" data-original-height="392" data-original-width="850" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryyBpgVS8uHZidfCLNC1SeSlH_H5TjnTRx-kQKqsL0rdrTdsAtPpwWPYeGCIo23uaSnQw3o2P6bl5WqIXlEEMdxx_8ieTwXk4txW-YiSwAyGh8iLObzklWKdW58QKXRY9LmVKZFSl_PePnzb47ZND584K1LOebFPk7iT6nueBe1Y0W5i6EeAXk55WlHIN/s16000/image.png" />
---
閲覧画面では、画面の左端に「Dashboad(設定)」と「edit post(編集)」のアイコンが並ぶ。
<img border="0" data-original-height="785" data-original-width="1143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6K0w5yM5IvNwkdXPacD2QTIA0GRc9Pipc2Fse8gEN7d93aiWdI0yRDTmBXUqynkW7tXp0Yr0JH9FNrfm6Q7BeGQB3arO9Jc1FnjPLyXT7nqeFXLwFGuS3Gt1BOucGBnWb_nlMtaqTupCf9p3oMtB9CRXs7fC4xSLAlbJ3RG75Uddqxf4aQ3MShU_isSD/s16000/image.png" />
---
一覧画面では、リストカード形式の右上に「edit post(編集)」のアイコンが表示される。しかし、以前に[トップページを横1列のカード形式に変更 ](https://archivetosho.blogspot.com/2025/05/jettheme.html#toc_headline_5)で行ったカスタマイズのため、リストカード形式全体にリンクが有効になっており、編集のための鉛筆アイコンをクリックしようにも全体リンクが優先されていて**閲覧画面にしか飛べない不具合**が起きた。
<img border="0" data-original-height="451" data-original-width="1122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJWdh0upkVAPUKzvNT-RXFnXAVzaVVQaNmXs0-MMh63n7m7W_5SaTKUYv-Za7LzQCsrrpG3FirRXvTPmgSkQ_EHxHqFG5IIuHdlQv6_RHpK6hwdPmXM7cEJf7Ifxy9Jnyrq7tk0MuJqfw7EhfXsJyi_U87R8ZVayqfdpYYITbGnmcAbmQsMkQiMVQDS8bq/s16000/image.png" />
## 不具合対策
不具合の原因は、
[トップページを横1列のカード形式に変更 ](https://archivetosho.blogspot.com/2025/05/jettheme.html#toc_headline_5)で行ったカスタマイズのの構造では、`.list-item-link > a` という空のリンクタグが `<article>` 全体を覆っているため、編集アイコンをクリックしても先にリンクが反応してしまい、編集画面に遷移できないのが問題です。
✅ この対策として、次のCSSを前述のカスタマイズCSSに追加して、編集アイコンを最前列に持ってくるようにします。
```css
/* 編集アイコンを最前面に */
.blog-admin {
z-index: 9999 !important;
pointer-events: auto !important;
position: absolute;
}
```
## Dashbordアイコンの追加
記事の閲覧画面では、Dashbord(設定画面）とedit post(編集画面）のアイコンが並んでいますが、トップページにはDashbord(設定画面）がないので追加します。
表示位置はナビゲーションバーのアイコンの位置にします。
次のスクリプトを`</body>`の前に置きます。
```c
<!--トップページ記事一覧にDashbord追加-->
<!--Dashboardアイコン：ナビバーのダークモード切替ボタンの左に設置-->
<div class="blog-admin" id="dashboardIcon" style="display: none;">
<a class="btn btn-sm jt-btn-light rounded-0" href="#" rel="nofollow noopener noreferrer" style="align-items: center; display: flex;" target="_blank" title="Dashboard">
<svg aria-hidden="true" class="jt-icon" style="height: 1.2rem; width: 1.2rem;">
<use xlink:href="#i-menu"></use>
</svg>
</a>
</div>
<style>
/* Dashboardボタン用スタイル */
#dashboardIcon {
position: static !important;
display: inline-flex !important;
margin-right: 0.5rem;
align-items: center;
}
#dashboardIcon a {
background: transparent !important;
box-shadow: none !important;
border: none !important;
color: inherit !important;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function () {
const adminLink = document.querySelector('.blog-admin a[href*="/edit/"]');
const dashIcon = document.getElementById('dashboardIcon');
if (!adminLink || !dashIcon) return;
const match = adminLink.href.match(/post\/edit\/(\d+)\//);
if (!match) return;
const blogId = match[1];
dashIcon.querySelector('a').href = "https://www.blogger.com/blog/posts/" + blogId;
dashIcon.style.display = 'inline-flex';
// #dark-header の左隣に Dashboardアイコンを入れる
const darkHeader = document.getElementById('dark-header');
if (darkHeader && darkHeader.parentNode) {
darkHeader.parentNode.insertBefore(dashIcon, darkHeader);
}
});
</script>
```
## Menuアイコン変更@スマホ
Dashbordアイコンをナビゲーションバーに置いたとき、スマホで右隅に表示されるメニューアイコンと同じだと気づきました。スマホのメニューアイコンは、[JetThemeでデフォルト設定](https://www.jettheme.com/2021/03/icons-dan-button.html)されている `#i-menu` ですが、これを変更することにします。
他にメニューをイメージできるアイコンがJetThemeに登録されていないので、新規にSVGアイコンを登録します。登録の方法は、[グラデーション付きのSVGアイコンの新規追加と使い方](https://archivetosho.blogspot.com/2025/05/svg.html)に書いています。
Google Font から、list を使うことにします。`id=i-list` でSVGアイコンに登録しました。
<img alt="" data-original-height="355" data-original-width="1129" src="https://blogger.googleusercontent.com/img/a/AVvXsEjxjsCAr2DwKE31S4AYQlubECua7BWDi7EX1Tiqu3kb_W94E_dalV-xmqncXfRYK2wQ9kn00GRAjCexXK4xMHC1kdK2SmDnO0z0kZe1UAk7UqmQ4gwtgZfLo95W-XI4EgHQjwipnsQU2uoNokhaFzWTap8PhPykbXfkfSgxkneDULPgYd-80GGYUmW2YL0O=s16000" />
`<div class='d-flex align-self-stretch align-items-center d-lg-none'>`を探し、その次の行にある`#i-menu` を `#i-list` に変更すると完了です。
<pre style="white-space: pre-wrap;"><code class="language-html">
<div class='d-flex align-self-stretch align-items-center d-lg-none'>
<label aria-label='Toggle navigation' class='p-1 jt-icon-center hover-text-primary' for='navbar-toggle' id='navbar-toggler'><svg aria-hidden='true' class='fs-3 jt-icon'><use xlink:href='<span class="highlight">#i-menu</span>'/></svg></label>
</code></pre>
<style>
.highlight {
background-color: yellow !important; /* 好みの色 */
color:deeppink;
padding: 2px 4px;
border-radius: 4px;
}
code {
white-space: pre-wrap !important;
}
</style>
## 関連リンク