Blogger で Lightbox が使えるようになっていました。以下の記事で知りました。
クリボウの Blogger Tips: Blogger に Lightbox 再登場
ブログの投稿中の画像をクリックすると、ページ移動せずにページ全体が暗転して中央に画像が表示される仕組みを「Lightbox」といいます。この Lightbox 機能、華々しく Blogger に登場したもののすぐに停止されてしまったニュースが、まだ記憶に新しいと思います。 クリボウの Blogger Tips: Blogger、 Lightbox 導入するもすぐにロールバック この機能が、今回戻ってきました。 ...
Lightbox とは以下のようなものです。
概説
Lightboxが利用出来るようにされたページでは、ユーザは、Lightboxの窓でサムネイルを拡大したい時にイメージをクリックできます。(イメージのサイズに応じて、窓は、アニメーションを使用することでそれ自体をリサイズします)。 Lightboxは、どのイメージがXHTMLの"rel"属性を通してLightboxの窓に示されるかを決定します。<a>要素で<img>要素を囲うことで使用できる。 また、Lightboxは見出しをイメージに添付して、矢印キーを使用することでスライドショーが出来る方法を提供します。
Blogger の Lightbox はデフォルトで有効になっています。 Lightbox を無効にする方法は以下の通りです。
クリボウの Blogger Tips: Blogger に Lightbox 再登場
Lightbox を停止するには、新ダッシュボードの場合、「設定 ＞ 投稿とコメント ＞ Open images in Lightbox」という項目で、旧ダッシュボードの場合は「設定 ＞ フォーマット ＞ Open images in Lightbox」の項目で「いいえ」を選択します。
MarsEdit で Blogger の Lightbox を使用するための設定
MarsEdit の Media Manager でスタイルを追加します。 手順は以下の通りです。
- MarsEdit のメニューから [Window]-[Media Manager] を選択します(ショートカットは⌘2)。
- Media Manager で何か画像を選択して右側のペインを有効にします。
- [Style] 欄のリストから [Edit…] を選択します。
- Media Markup 画面の [+] ボタンをクリックします。
- [Name] に名前を入力し、[Opening] 欄に例えば以下のように入力します。
<a href="#fileurl#"><img style="display:block; margin-left:auto; margin-right:auto;" src="#fileurl#" alt="#alttext#" title="#displayname#" border="0" width="#imgwidth#" height="#imgheight#" /></a>
Wikipedia の説明にあるように、<a> タグで <img> タグを囲めばよいようです。
サンプル
こちらのエントリで Lightbox を使ってみましたのでよろしければご覧ください。
0 コメント:
コメントを投稿