【QooQ】Bloggerの仕様変更に影響されずに記事編集アイコンを使い続ける方法

2021/07/21 2

QooQ

アイキャッチ

記事編集アイコンが廃止?

昨日、テストブログの内の一つで、記事編集のクイックエディットアイコンpenが表示されなくなっているのに気づきました。
テーマを変えてみても表示されないので、カスタマイズの影響による不具合とかではなさそう。

試しに当該コードで使われている分岐タグの
<b:if cond='data:post.editUrl'>
<b:if cond='data:view.isSingleItem'> に変えてみたところpenが復活。

もしやと思いこちらの Bloggerエキスパートさんのブログ記事を確認してみたら、editUrl が今年の夏に廃止予定のリストに含まれていました。

ファビコンBlogger Code PE
サムネイル
Les données obsolètes
La liste des data XML Blogger dépréciées, en cours d'abandon et abandonnées durant ces 10 dernières années...
http://bloggercode-blogconnexion.blogspot.com/2019/04/depreciated-data.html


廃止予定リスト


現在アイコンが表示されているブログでも順次適用されて利用できなくなるかもしれません。

というわけで、代替のコードで今後も記事編集アイコンを使い続ける方法を紹介したいと思います。

クイックエディットの改造コード

penアイコンを表示させるだけならば先述の分岐タグの変更で対応できますが、当該コードのリンク先が
<a expr:href='data:post.editUrl'… と、ここでも editUrl が使われていて編集ページに飛ぶことが出来ないため、この部分も変更する必要があります。

改造版のコードは、前回の記事で紹介したものがそのまま使えました。

<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<b:if cond='data:view.isPost'>
<a expr:href='&quot;https://www.blogger.com/blog/post/edit/&quot; + data:blog.blogId + &quot;/&quot; +  data:blog.postId' rel='noopener' target='_blank' title='投稿を編集'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
<b:elseif cond='data:view.isPage'/>
<a expr:href='&quot;https://www.blogger.com/blog/page/edit/&quot; + data:blog.blogId + &quot;/&quot; +  data:blog.pageId' rel='noopener' target='_blank' title='ページを編集'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</b:if>
</span>
※固定ページでは不要という方は6~9行目の
<b:elseif cond='data:view.isPage'/>
(中略)
</a>
の部分を削除してください。

QooQ でのカスタマイズ手順(v1.30で検証)

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

HTML編集画面にて下記のコードを検索で探します。
<b:if cond='data:post.editUrl'>
2箇所ヒットすると思いますが、変更するのは上側の方です。


画像の枠で囲まれている部分の
<b:if cond='data:post.editUrl'></b:if> までの範囲を丸ごと上記の改造版コードと入れ替えます。

以上で完了です。これでもし editUrl が廃止されたとしても、影響を受けることなく記事編集アイコンを使い続けることが出来ると思います。

管理者以外にも見えてしまう?

実は先述の廃止予定リストに adminClass というデータがあって、今回のコードにもクラスのところに含まれているのですが、これは管理者にのみ表示させるための識別コードで、もしこれが廃止されると編集アイコンが管理者以外にも常に見えている状態になってしまう可能性があるのです。

仮に管理者以外がアイコンをクリックしたとしても編集ページに入ることは出来ないので別に問題はないのですが、そういう状態がなんとなく不安に感じるとか、デザイン的な観点から読者には余計なものは見せたくないという方もいるかもしれません。実際私もその一人だったりします(^^;

というわけで、参考までに管理者だけにアイコンを表示させる暫定的な方法も紹介したいと思います。

手順①: コードの変更

まず上記のコードの当該部分をこのように変更します

<span class='item-control' style='display:none'>
<b:if cond='data:view.isPost'>
<a expr:href='&quot;https://www.blogger.com/blog/post/edit/&quot; + data:blog.blogId + &quot;/&quot; +  data:blog.postId' rel='noopener' target='_blank' title='投稿を編集'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
<b:elseif cond='data:view.isPage'/>
<a expr:href='&quot;https://www.blogger.com/blog/page/edit/&quot; + data:blog.blogId + &quot;/&quot; +  data:blog.pageId' rel='noopener' target='_blank' title='ページを編集'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</b:if>
</span>

span タグから adminClass を削除して、表示させないための style='display:none' を追記しています。

手順②: ブラウザ拡張機能を利用

このままだと管理者にもアイコンが見えなくなってしまいますので、管理者にだけ見えるように Stylus というブラウザ拡張機能を使って CSS をコントロールします。
尚、Stylus の導入や使用方法についてはこちらの記事を御覧ください。

ファビコンふじろじっく
サムネイル
Chrome と Firefox の拡張 "Stylus" で Blogger の複数ブログの管理を便利に。
私達のようなうっかりさんのお役に立てれば。
https://fujilogic.blogspot.com/2019/06/blogger-dashboard-customize-with-stylus.html


Stylus を導入したら編集画面にてURL欄にご自身のブログのホームURLを登録し、コード欄に以下のCSSを登録し保存します。

.item-control {
    display: initial!important;
}


これで管理者にだけpenが表示される状態になっているはずです。
試しに非管理者と同じ条件になるようにシークレットモード(プライベートウィンドウ)でアクセスしてみればアイコンが見えていないことが確認できると思います。


以上、pen愛用者のお役に立てれば幸いです。