[Blogger.com] Lightbox的な"Magnific Popup"を試してみる

当ブログは、Googleのブログ・プラットフォームサービスである"Blogger.com"を利用しており、独自ドメインを割り当ててあります。

で、2021年末に実施された画像URLの仕様変更に加え、つい最近テンプレートを変更したことなどがあり、画像のオーバーレイ表示まで手が回らず、間に合わせ的に純正のライトボックスを使っておりました。

最近になって、やっと余裕が出てきたのでその辺を何とかしてみることに。まずは、選定条件をピックアップしてみました。

• 新しい画像URL(妙に長いうえ拡張子が付いていない)に対応すること
• レスポンシブであること
• 過去の投稿をいじることなく移行できること
• 設置は簡単な方が望ましい
• 1枚の画像だけを拡大できること

最後の条件に関して補足など。画像をクリック(タップ)すると画像がオーバーレイで表示される訳ですが、その際に左右の矢印などで別の画像を参照できるタイプの表示方法があります。いわゆる"ギャラリー方式"。

当方としては、説明を補うために用意した画像なので、先の画像まで見えてしまうのはネタバレ的でちょっとイヤかな? と感じておりました。なのでクリック(タップ)した画像のみを拡大して欲しいと思う次第であります。

そんなこんなで、探してきたのが"Magnific Popup"。もちろん、上記の条件はすべてクリアしております。

上記リンクは動作サンプルを集めたページですが、ドキュメントはこちらにあります。ということで、サクッと設置してみます。

手軽なウィジェット設置方式

"Blogger.com"に"Magnific Popup"を導入する場合、ウィジェットを使うことができます。なのでとっても簡単。さらに、テンプレートを変更した場合でもウィジェットは継承されるので、レイアウト変更程度の軽作業で使い回すことができます。

ということで、その方法をご紹介。とは言え、当方が考えた訳ではなく、先達が残してくれた情報を参考に(と言うか丸パクリ)しております。

1. "Blogger.com"管理ページ左のメニューから"レイアウト"に入り
2. 一番下にあるセクション(フッターなど)にて"ガジェットを追加"をクリック
3. 開いた"ガジェットの追加"リストにて"HTML/JavaScript"を選択
4. "コンテンツ"に下記コードをコピー&ペースト("タイトル"は空欄のまま)
5. "保存"ボタンをクリック

今回使用するのはこちらのコード

<link type='text/css' rel='stylesheet' href='https://cdn.jsdelivr.net/gh/dimsemenov/Magnific-Popup@c8f6b854/dist/magnific-popup.css' /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src='https://cdn.jsdelivr.net/gh/dimsemenov/Magnific-Popup@c8f6b854/dist/jquery.magnific-popup.min.js' type='text/javascript'></script> 
<script> 
$('.post-body').magnificPopup({ 
  delegate: 'a[imageanchor="1"]', 
  gallery: { 
    enabled: true 
  }, 
  type: 'image' 
}); 
</script>

当方のように、画像がギャラリー方式で表示されるのを嫌う場合、上記コードの"gallery:"の部分の"enabled:"を"true"から"false"に書き換えれば、機能をオフにできます。

また、他の機能でjQueryを使用している場合、"<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> "の記述は削除してしまいましょう。

残しておいても大きな問題にはならないと思いますが、特定のバージョンが必要など特別な理由がない限り、2つも3つも同じモノを読み込むのは無駄ですので。

ちなみに、jQueryのバージョンはコードに記載された1.9.1より新しければ大丈夫。当方の環境では執筆時点の最新版(3.6.0)でも普通に動いています。

話は少しそれましたが、最後に管理ページ左メニューの"設定"にて"画像のライトボックス"をオフにしておきます。

使用方法と注意事項

"Magnific Popup"では、エディタにてを貼り付けた際、リンクなどの情報と同時に自動付与されるimageanchor='1'という文字列をトリガーとして作動します。

このため、投稿時に"Magnific Popup"のために何かを記述する必要はなく、過去の投稿を変更する必要もありません。

ところがこのimageanchor='1'、なかなかに不安定。いつの頃か正確な日時は不明ですが、"Blogger.com"で実施された機能アップデートでバグが盛り込まれた雰囲気です。

もしかすると当方の環境に依存する問題なのかもしれませんが、状況によってはimageanchor='1'が付与されなかったり、消えてしまったりします。例えば以下のような感じ。

• 作成ビューでの画像貼り付け時のみ付与される
• HTMLビューでの画像貼付け時には付与されない
• 作成ビューで付与されたモノはHTMLビューに切り替えても消えない
• ただしHTMLビューから作成ビューに切り替えると消えてしまう

この部分だけ注意しておけば、他に気を使うことはありません。画像のみならず、a(アンカー)タグでリンクを貼って画像を開く場合でも、imageanchor='1'を付けてあげればエフェクトが適用されます。

例えばこんな感じ。そんな訳で、画像リンクからimageanchor='1'が消えてしまった場合でも、手動で補ってあげれば"Magnific Popup"のエフェクトが機能します。少々面倒ではありますが。

なお、手動でimageanchor='1'を付与した場合でも、作成ビュー⇔HTMLビューを行き来するとやはり消えてしまいますのでご注意ください。

ちなみに、画像の下にキャプションを付けることもできます。title="なんちゃら"でOK。代替テキスト(alt="なんちゃら")ではないのでご注意くだされ。

当ブログでは、極めて基本的かつシンプルに使っておりますが、"Magnific Popup"にはビデオやフォームのポップアップ、ダイアログ風の表示、ズームエフェクトなど、さまざまな機能が用意されております。

技術さえあれば、もっと活用できるハズ。動作も軽いので、"Blogger.com"を利用するユーザには要チェックな雰囲気でありました。

ー記事をシェアするー

B!